The C in CSS | My Memory

CSS (Cascading style sheets) can appear in various ways. Inline, embedded, part of a style section and so on. The order in which they “cascade” – in other words the order in which the browser uses the styles is very specific.

The order is shown below.

Inline

The inline style takes precedence over all other style mechanisms. An inline style is simply a style applied to an elements style attribute, for example

<p style="color:red">A red paragraph</p>

Embedded

If no inline style is found for an element then the browser looks for an embedded style. We embed a style within style element, as below

<head>
   <style>
      p { color:red }
   </style>
</head>

External

After the embedded style the browser looks for any external styles found via the link element.

<head>
   <link rel="stylesheet" type="text/css" href="theme.css">
</head>

Theme.css

p { color:red }

User

If none of the previous mechanisms yields a matching style the browser checks the user styles. These are styles defined for a specific user on their machine. Each browser has it’s own way of allowing a user to define their “user” styles. In Google Chrome there’s a file in the user profile, for example C:\Documents and Settings\\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Browser

Finally if no match is found for any of the above, the browser uses it’s default settings for the style.

!Important

Along with the above the user can mark a style as important

<style>
   p { color:red !important}
</style>

In such situations where a property is marked with !important the browser will now give preference to these important properties. In essence the order of precedence of the !important properties are reversed, therefore user style sheet has higher !important precedence than an author supplied !important value.

Note: The Inline, embedded and separate stylesheet are collectively known as the author style sheets.