What does "Cascading" mean?

"Cascading" means that styles you apply to the most general tags will flow or "cascade" over the more specific tags.

For example when font-family and colour are specified in a body styling they will apply to any text you enter.

By applying a style to the <p> tag the colour specified in the body styling was overridden. This is because the paragraph tag is more specific than the <body> tag. Adding a class allows even more styling specificity.

Shortcuts

If there are several tags or even tags with classes attached that have the same formatting you can combine them and use a single set of styles rather than having them repeat. Simply separate the tags (with or without classes) with a comma e.g.

h1, h2, p.center { text-align: center; }

There are several more css shortcuts you can employ to reduce the amount of code in your css file.

Valid XHTML 1.0 Transitional

Block Level Elements

Block level elements control all of the text on your page in blocks of varying sizes. As such, styling one has an effect on large sections of your page at a time.

This highlights the "cascading" nature of style sheets.

  1. Open your css file and add the command:

    body { background-color: #000;
    color: #fff; }
     
    p { color: #f00; }

  2. Go to your browser and open your html file. If your html file is already open click "refresh" or press F5. All of the content entered between <p> tags should go red.

    In most situations you won't want to make all of a Web page's paragraphs red. This is where "classes" come in.

  3. Open your css file again and edit the last entry you made so that it now reads:

    body { background-color: #000;
    color: #fff; }
     
    p.red { color: #f00; }

  4. Go back to your browser window and click "refresh" press F5. All of the content that was red should now revert to white.

    You have just created a paragraph class called "red". All of the <p> tagged lines reverted to white because they now no longer match the command.

    Put another way when your browser saw

    p { color: #f00 }

    it made all of the stuff between <p> tags red. After adding the class "red" and making the command

    p.red { color: #f00 }

    the browser still looks for <p> tags but it will only colour those paragraph tags with the class "red" attached as shown in the next step...

  5. To attach the class "red" to a paragraph tag add this code to a <p> of your choice. Once added the tag should look like this:

    <p class="red">Trees are awesome...

  6. Go back to your browser window again and click "refresh" or press F5. All of the content should still be white except for the one line you gave the class "red" to.

That's all there is to styling block-level elements. There are many different style properties that can be applied but they will all follow the tag { property: value } form. Experiment with these common examples:

font-height: Xpt
font-weight: bold
font-style: italic, oblique, underline
font-family: serif, sans-serif, courier etc...
font-style: italic, oblique, underline
line-height: 1.5 is recommended for best readability

For more styles visit the css styles page.

Next section: In-line elements→