Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

The CSS Cascade

One of the most fundamental things about CSS properties is that they cascade, which is why the technology is called Cascading Style Sheets. But what does this mean?

Cascading is a method used to resolve potential conflicts between the various different types of style sheet a browser supports, and apply them in order of precedence by who created them, the method used to create the styles, and the types of properties selected.

Style Sheet Creators

There are three main types of style sheet supported by all modern browsers. In order of precedence from high to low, they are:

1. Those created by a document’s author

2. Those created by the user

3. Those created by the browser

These three sets of style sheets are processed in reverse order. Firstly, the defaults in the web browser are applied to the document. Without these defaults, web pages that don’t use style sheets would look terrible. They include the font face, size, and color; element spacing; table borders and spacing; and all the other reasonable standards a user would expect.

Next, if the user has created any styles to use in preference to the standard ones, these are applied, replacing any of the browser’s default styles that may conflict.

Lastly, any styles created by the current document’s author are applied, replacing any that have been created either as browser defaults or by the user.

Style Sheet Methods

Style sheets can be created using three different methods. In order of precedence from high to low, they are:

1. As inline styles ...