The meaning of cascading

CSS stands for Cascading Style Sheet.

I can understand the meaning of Style.

Does Sheet mean “a piece of paper?”

What’s the meaning of cascading?

When water flows over a cliff, it ‘cascades’ down the cliff wall.

When you have multiple style sheets—inline, internal and external and also user style sheets—they fall (or cascade) over the top of each other, one overriding another. That’s the basic idea.

Thank you. I now can understand the meaning of cascades.

I still can’t understand this part.
How or Why do they fall over the top of each other?

here’s an example

if one source says “todd is an idiot” and another source says “todd is a great guy” then which is correct?

the answer is, one source takes priority over all other sources, and that’s the one that takes effect

in css, the priority is defined here – http://www.w3.org/TR/REC-CSS1/#cascading-order

OK you are so going to get better explanations but heres mine:
Cascading refers to the way in which CSS code can style multiple selectors.

For example if you wanted all your H1 tags coloured red with a background yellow you would just add this to a style sheet:

h1 {
color: red;
background:yellow;
}

Then hey presto all your h1 selectors are all styled the same throughout your site without individual labour intensive codding. It is this quality which I feel gives CSS the metaphor cascading.

So does the metaphor cascading mean here big differences at a time like the differences between top of the cliff and the bottom of the cliff by
“cascading” down the cliff wall?

no, not big differences

think of dominoes falling over

Then Does it mean changing all at once?

I’ve never really thought ‘cascading’ was a very good word to describe the interaction of multiply style declarations, but I guess we are stuck with it. If you have three conflicting style declarations for an element, there are rules for which one will actually apply (see Rudy’s link above). As far as you are concerned (viewing that element in your browser) the change will be ‘all at once’ (though I’m not really sure what you mean by that).

Imagine you are standing on the edge of a cliff, wondering what to do, and three people gave you a command:

Father: “go left!”
Brother: “go right!”
Wife: “jump!”

Which command would you obey? It depends on who (in your eyes) has the greater authority, as you can only choose one option. The browser has to obey the rule that carries most authority or weight.

Does “cascading” in CSS mean near to great authority?

I’ve always understood cascading as follows:

When the browsers renders an element, it will go looking through all specified styles for said element.
Suppose it wants to style an <h1> element.
It will first start in an external stylesheet and find


h1 {
  color: red;
}

So now all <h1>'s are colored red.
It finds another stylesheet and that one says


h1 {
  padding: 10px;
}

So now, the <h1> will look like


h1 {
  color: red;
  padding: 10px;
}

And the color: red part has cascaded from the first stylesheet into the next, and is still active.

This is the same as explanation 2a for the word “cascade” in the Merriam-Webster Dictonary:

a : something arranged or occurring in a series or in a succession of stages so that each stage derives from or acts upon the product of the preceding <blood clotting involves a biochemical cascade>

Now when the <h1> in question has style=“color: blue;” it will be colored blue, because inline styles have higher precedence than external stylesheets. So there the cascading of color:red; from the external stylesheet stopped and it overwritten by the more dominant color:blue from the inline style.

Hmmm, I don’t think that’s really the idea.

Look, you’ve got an external style sheet, and that flows over your html page like water running over a waterfall. In that style sheet there might be several rules that apply to your element, and if so, the rules that are most specific will win out. Then if there is an embedded style sheet (in the head of your document) and it has more specific rules for that element, those rules will win out instead as this embedded style sheet cascades over the page. Then if there are any inline styles for that element, they will cascade over the page and override the previous rules. And finally, if users have set up their own style sheets on their computer, any styles for the element will cascade over all the others and override them.

Of course, all this happens in the blink of an eye as the page loads.

EDIT: and as ScallioXTX says, all of the styles from various sources add up along the way. So if the external style sheet has a styling rule for the element that is not overridden by subsequent style sheets, then that style will still be among the final styles for the element.

Does “to cascade over” contain the meaning of “to override”?

I’ve never really thought ‘cascading’ was a very good word to describe the interaction of multiply style declarations, but I guess we are stuck with it.

So if the external style sheet has a styling rule for the element that is not overridden by subsequent style sheets, then that style will still be among the final styles for the element
I always just think of it terms of overriding. Whether it’s selector rules in the stylesheet, or multiple stylesheets linked in the document head. Any changes made lower in the source will override any rules/stylesheets above it.

Does “to cascade over” contain the meaning of “to override”?
I was writing my post when you asked. :slight_smile:

I guess cascading contains the meaning of some ladders(stairs) of water falls.

Thank you very much.

When water cascades over a waterfall, the water that comes after it covers it over, as it were. Scallio’s dictionary definition was good: “each stage derives from or acts upon the product of the preceding”.

Off Topic:

Now, what I really want to know is—what does “get my greedy down” mean?!

[ot]
Now, what I really want to know is—what does “get my greedy down” mean?!
[/ot]My English is poor, It was more poor when I wrote it.

I remember I was full of greed when I wrote it. (I might thought I could change the world.)
I might wanted someone(you/I/God) to make(get) me(my greed) not-full of greed(come down).

If you dump your greed that you want to change the world and empy your mind(slim your body),
you’ll be out of pains(Hinayana:Sri Lanka, Thailand, Cambodia, Myanmar:Southern Buddhists; I like to say it Micro Buddhism.) and you will see how you can change the world(Mahayana:Korea, Japan, China, Tibet: Northern Buddhists; I like to say it Macro Buddism).

Does it make sense?

I don’t know whether it makes sense or not in English.
(if you recite it whenever you have time under the condition of it make sense in English, you may get peace in your mind.)

Yes, thanks for the explanation. I see what you mean now! No, it’s not perfect English, but that almost makes it better. :slight_smile: It’s a rather sweet translation, and sticks in the mind. I guess you could say: “may I not be greedy”, but that’s a bit boring compared with your version!

Joon.
Tho the question may have been answered already. I thought you might find this metaphor useful as well.

Cascading could be thought of as inheritance… or parents giving to children. for example:

BODY { color:red; font-weight:bold; text-decoration: underline} will make all text in the document display as : bold, red and underlined.

But since all tags are CHILDREN of the BODY tags ( they are inside it)… they too will be bold, red and underlined.… until you make new, more specific declarations…

example


<body>
Text
<span>text in a span, inline text</span>
<p> text in a P tag </p>
<div><p>text in a p tag thats in a div tag</p><div>
</body>


body { color:red; font-weight:bold; text-decoration: underline} 
div p{ color:green}

as before all text is red… it inherited that color form its parent EXCEPT for the text that’s in a P tag that’s in a DIV tag because we made a NEW RULE for it.

so the children follow the parent UNLESS a new rule is made. after a while the new rules CAN LOOK like they form a stair shape: like this:


body{ color:red;}
body div { color:green;}
body div p { color:purple;}
body div p a { color:orange;}
body div p a  span{ color:blue;}

Hope that enlightens you a bit. :slight_smile:

BTW… I like the “get my greedy down”… its a very wise philosophy