Bo dinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to CSS Reference Index


CSS - The Cascade

CSS is short for Cascading Style Sheets.

What this defines is a "top-down" cascading style of formatting. This means that from top to bottom, the closer the style is to the element being styled, the more precedence it has. For example, if you have an h4 style at the top of your stylesheet and another one at the bottom, the bottom style would be the one applied, because of the "cascading" top to bottom nature of CSS, making the bottom h4 closer to the element being styled.

This also applies to an internal styling that is defined in the head of the webpage, as well as inline styles that are defined at the local element tag, within the webpage itself. The same "cascading" effect would still hold true.

Remember, the closer a style is to the element being styled, the higher precedence it has. So an inline style would have precedence over both a page style (located in the head of a webpage), and ALSO a style created in an external stylesheet. Likewise, a page style would have precedence over an external style sheet.

This would also apply if you had multiple external style sheets being called in the head section of a webpage,

  • < link rel="stylesheet" href="stylesheet1">
  • < link rel="stylesheet" href="stylesheet2">

Stylesheet2 would have precedence over stylesheet1, because it would be the last one linked to, and therefore closer to the element(s) being styled.

Back to Top