University Libraries, University at Albany, SUNY Need Help? Search this Site Site Index
Home Catalog Database Finder Journals

Introduction to Cascading Style Sheets
Inheritance and the Cascade

The term "cascade" in Cascading Style Sheets refers to how styles affect other styles, precedence, and inheritance. Imagine a boulder at the top of a mountain. Give that boulder a push and it starts to tumble down the slope. As it goes it bumps into other boulders and starts them to roll, too. The cascade of boulders builds, each boulder affecting when and how another boulder rolls. This is analogous to how Cascading Style Sheets work.

A Web page's tags and styles illustrated as a flow chartInstead of bouncing boulders we have styles that are governed by rules. Those rules specify which attribute can be inherited by another style. Imagine a Web page's tags and styles being organized in a flow chart. The diagram on the right provides an example of such a chart.

 

 

 

 

 

 

Diagream illustrating CSS inheritanceLet's say that the text on a Web page is specified by a style to be red. That style is applied to the body tag. All the text on the page will be red. Now let's say that you make a special class that displays text in blue and apply it to a div tag. All the text inside that div will be blue while all the text outside the div will still be red.

Image that you have a new class for green text. You apply that class to a span tag inside the div tag. All the text inside that span tag will be green, all the text outside that tag will be blue, except for the text outside the div tag with is still red!

Most styles specify more than just a single thing. This means that a typical style will specify color, font, font weight, font style, whether or not the text is underlined, and a host of other options.

That style will probably look something like this:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
background-color: #FFFFFF;
font-weight: normal;
}

Don't forget, the CSS rules state that when a font color is specified there must also be a background color listed in the style.
Because that style is applied to the body tag, all the text on the page will be exactly like that. The style specifies that the font family is the Arial, Helvetica, ands sans-serif group. The font size is 1 em, the color is black, with a white background color. The font weight is normal.

 

 

Now let's image that you have created a style for some of the text on a page. In the body tag you specify the text will be displayed in Arial or Helvetica, font size 1em, the color will be black, and the font weight will be normal, just like the example up above. But for this section of text the color must be a dark blue. Everything else will be the same. You could write the the style like this:

.BlueText {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: normal;
color: #000066;
background-color: #FFFFFF;
}

But that is fairly complicated, especially because it simply repeats the same information except for the font color. You can make it easier and write the style like this:

.BlueText {
color: #000066;
background-color: #FFFFFF;
}

All the other attributes, such as the size and family, are inherited from the body tag! You can see the code for such a page by clicking here. The page will open in a new window.

If you would like to see the page "live" in a browser, click here, and it will open in a new window.

So far, in this example the main body text is black, normal, Arial or Helvetica, and 1 em in size with a white background. All of those attributes are inherited by the text in a paragraph except for the color which is blue. The style .BlueText was applied to the paragraph <p></p> tag. Now you can go another step further.

You can create a style called .FunkyText and apply it only to a particular span tag. This style looks like this:

.FunkyText {
font-family: "Comic Sans MS", Comix, fantasy, sans-serif;
}

You can see the code for this entire page by clicking here and it will open in a new window.

In this example all attributes for the text are inherited from the .BlueText style and the body tag, except for the font family. You can see the actual page by clicking here and it will open in a new window.

The next thing to learn about is how to control text alignment.

 

Page 7

Tutorial prepared by Roger Lipera
Interactive Media Center
University Libraries, University at Albany