Home » The tutorial » The CSS Cascade

The CSS Cascade 

If you've been reading web tutorials you've no doubt come across the term 'CSS'.  You may even already know that it stands for Cascading Style Sheets.  I know the whole cascading concept threw me a little when I was learning CSS, so here's a quick lesson.

Look at the content of Bob's page.  The cascade for that is html -> body -> div.main -> table -> tbody -> tr -> td.content -> p.  The header 'Welcome to Bob Smith Photography' is almost the same, but h1 replaces the final p.  If we wanted to change the font for the content, we could put a font-family declaration in any of those definitions (look back to div.main on the first posting) and it would cascade downhill.  We could have the following declaration:

html
{
font-family: Georgia;
}

and all of the text would be in the Georgia font.  

In the case of conflicts, the one farther right gets priority.  So if you put font-family: Arial; in the td.content declaration and font-family: Georgia; in the html declaration, the font in the content section would be Arial.