How the Cascade Works

The rules of the Cascade mean that it is possible to write very general CSS rules which cover most elements, then redefine or override those rules for more specific cases. So, where there are generic text elements, you can set up a rule for the general case, then redefine properties for specific cases.

For more details on the Cascade, see the explanation in the CSS Guidelines.

Firstly, the cascade prioritises the rules created by the website designer over and above any that are defined in the browser, either as defaults or those overridden by the user themselves (it's possible to customise the default behaviour of most browsers).

Secondly, more specific selectors will allow a rule to take precedence. So, a rule which selects only p elements will be overridden by a rule which selects all p elements which are children of a div, so if the CSS says:

  div>p { color:blue; }
  p { color:red; }
         

then the paragraphs directly inside a div will be coloured blue, and those not inside a div will be coloured red, even though the order might suggest otherwise.

Thirdly, there is a precendence of ID-based selectors over other types, so using a #name selector will usually take priority over any general redefinitions of elements.

However, the most important feature of the cascade is that later rules will override earlier ones (if of the same type).

It's quite common to define a set of defaults in a common stylesheet, then to override some of those rules with more specific stylesheets which are included later in the document. And sometimes, web pages override the site's CSS with inline CSS rules specific to individual pages. This occurs with the CMIT web pages, where inline CSS colours specific subdivisions of the menus, to give a contextual highlighting of the menu for the 'current' module.