CSE691/891 - Internet Programming Summer 2001
prev next

Putting the "Cascading" into CSS

Stylesheets are called cascading because of the rules for inheriting styles from parent nodes.

  1. "Inheritance is simply the mechanism by which styles are applied not only to a specified element, but also to its descendants. If a color is applied to an H1 element, for example, then that color is applied to all text in the H1, even the text enclosed within child elements", Eric Meyer, Cascading Style Sheets, O'Reilly, 2000.
  2. When we apply a style to an unordered list, <ul>, it is also applied to all the list items, <li>, as well. As you can see, the same applies to an ordered list.
  3. When two rules conflict, the more specific rule wins.
    li { padding-bottom: 15px; }
    .bottomSpace { padding-bottom: 10px; }

    <li class="bottomSpace> ... </li>
    So, for this list item, its bottom padding will be 10 pixels.

Example of Advanced DHTML: IFrames
Other Samples: samples

prev next