First time visitor? The tutorials start here.

The Cascade in Cascading Style Sheets (CSS)

Ok, so “Style Sheet” makes sense. It’s a sheet full of styling definitions for a web page. But, what’s with this “Cascading” bit?

Well, cascading style sheets follow a certain flow. Generally, you start with the more generic properties of a page and work your way to the more specific areas.

Most people like to start by defining the body tag to set the styling for the overall page, myself included. For the body tag, you would define the page background, font-family, font-size, color of the text, and other things that pertain to the whole page.

Now let’s say you want a different sized font in one or more areas of the page, but there are other aspects you don’t want to change. You could give that area a class name, define only a font-size for that class, and it would “inherit” all the other attributes of the body except for the font-size, because you are redefining it for that particular class.

That is, unless that class is inside another class or id, and some other attribute has already been redefined there.

This is the cascade. Inheriting qualities from the “parent” elements, while taking on different attribute values where they have been redefined.

A visual:

Let’s say you have this in your xHTML. I’ll use borders and background colors to emphasize the nesting of elements (divs in this case, but the same would apply for spans, anchor links, etc) inside other elements:

<body>
  Content in the body only.

<div class="parent">
  Content in the parent element.

<div class="child">
  Content in the child element.
</div><!– end child –>

  Content in the parent element.
</div><!– end parent –>

  Content in the body only.
</body>

Now, let’s put that with the following CSS:

body {
	background: #fff;
	font: 12px verdana, arial, sans-serif;
	color: #333;
}
.parent { font-size: 11px; }
.child { color: #000; }

Content in the body only would have a white background and dark gray (#333), 12px text in a sans-serif font-family.

Content in the parent element but not in the child would inherit the color of the body’s text and the body’s font-family (verdana, arial, sans-serif). It won’t, however, inherit the body’s 12px font-size, because the parent‘s font-size has been redefined to be 11px. In the case of backgrounds, they are always transparent when they’re not defined explicitly (the exception is the body, whose default background is white). This way, if you use an image for one or more backgrounds, it won’t keep inserting itself everywhere through inheritance.

Content in the child element is also in the parent element, as you can see by the nesting in the xHTML above. Therefore, it would inherit the body’s font-family and the parent’s redefined 11px font-size, but not the text color because the color of the child‘s text is redefined to be black (#000). As with the parent, the background would be transparent, allowing the background of the body to show through.

But this is only one way the cascade works.

Defining the same thing twice

If you define the same thing twice, using the same manner of targeting, the last thing you define will take precedence. By “manner of targeting,” I mean that you can target <div class="parent"> with .parent or with div.parent. While they both target the same thing, it can make a difference as to which one you use, which I’ll explain below. For now, let’s concentrate on the same manner of targeting.

If you use this in your CSS:

.parent { font-size: 11px; }

Then, further down in your CSS you use:

.parent { font-size: 12px; }

The font-size for the parent will be 12px. Likewise, if you use:

.parent { font-size: 11px; color: #333; font-size: 12px; }

The font-size for the parent will still be 12px. Likewise, if you use:

.child { border: 1px solid #ccc; border-top: 2px dashed #f00; }

There, all four sides of the child are defined to have a 1px solid gray border, but afterward, the top border is redefined to have a 2px dashed red border. Therefore, the right, bottom, and left borders will be 1px wide, solid and gray, while the top border will be 2px wide, dashed and red.

If the borders were switched around to read like so:

.child { border-top: 2px dashed #f00; border: 1px solid #ccc; }

The 4-side “border” attribute now overrides the “border-top” attribute, so all four borders will be 1px, solid and gray. Therefore, while defining “border” before redefining one border may have some merit in terms of shortening your code, you should never have a line in your CSS that looks like that last example, because defining the red dashed border that will never show up is pointless.

Manner of targeting

As mentioned above, you can target <div class="parent"> with .parent or with div.parent. I will delve into this in part 2 of this 3-part series, The Cascade in CSS: Different Ways to Target the Same Element.

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.