Jegsworks: Free Online Computer Lessons Logo:Jegsworks Jan's Illustrated Computer Literacy 101
Home > Resources & Examples > Jan's CSS > Cascade
Icon: Arrow - Previous pagePrevious    NextIcon: Arrow - Next page

Jan's CSS: The Cascade

Cascading Style Sheets (CSS) allow you to set overall formatting and positioning and then adjust those for special situations without disturbing the rest of the pages. Very slick!

But what happens when you have different kinds of styles on the same page? That's where the 'cascade' rules come in.

Suppose you have a web page with an external style sheet (linked), an internal style sheet (in the HEAD of the page), AND a paragraph with an inline style (in the SPAN tag). Which settings win out?

Order in which styles are applied:

  • Browser's default styles
  • External style sheet
  • Internal style sheet
  • Inline style
  • For nested elements, from the outside inward.
  • For multiple linked style sheets or multiple style declarations, in order of appearance in the HTML source code.

Examples of the Cascade of Inheritance:

H3 heading

From the linked external
style sheet,
example1.css

H3 heading plus
a class

From external style sheet example1.css
+ internal style sheet: class="second"

H3 heading plus class plus inline style

From external + internal + inline style
h3 {color:teal;
font-family: Arial, Helvetica, sans-serif;}		 .second {font-family:"Courier New", Courier, monospace;} style="color: #fbf3e8;
background-color:teal;"

Image of style results:

Image of effects of the cascade of style sheets

So the internal style sheet changed the font for the H3 heading. An inline style changed the color and background color for some text, the word 'inline'.

For the curious:

The boxes above were styled with class="example", which is in the internal style sheet for this page. The original, default font was set in the external style sheet demo.css: font-family: Calibri,Arial,Helvetica,sans-serif;

div.example {
    color:black;
    width:200px;
    height:200px;
    border:thin solid black;
    text-align:center;
}

Most of the properties in this class are for the DIV, but text-align changes the default alignment for text.