Cascade

Cascade is the C in CSS (style sheets are the S and the S). This means that if there are two or more rules that apply to the same element, there is an order of preference, specifying which rule will be used.

This order of precedence is decided by:

  • The last rule: If two rules affect the same property of the same element, the latter of the two will take precedence. That is, the last one written when you read from top to bottom.

  • Specificity: If one selector is more specific than another, the most specific rule will take precedence. E.g. p is more specific than * (this selects all elements, more on that later), and p b is more specific than p.

  • Important: Adding !important after any property value indicates that that declaration should be considered more important than other rules that apply to the same element. Use this with caution.

As for "the last rule", this precedence rule is further specified by the level at which you write your CSS. There are five levels of styles: inline style, embedded styles, external style sheet, user specified styles and browser default.

These are ordered in a hierarchy, where inline styles has the highest precedence, then embedded styles, external style sheets, user specified, and lastly browser defaults. That means that if some element has it's style specified several places, the specification with the highest precedence win, thus affecting the element.

You will soon learn about classes and IDs. But already now you can learn that IDs have a higher precedence than classes because they are more specific.

Inline styling

Inline styling is when you write your style directly on the element, e.g. in your HTML document. For a given paragraph you would e.g. write:

<p style="color: orange;
          font-family: arial, sans-serif;
          font-size: 16px;">
  This is some styled paragraph!
</p>

There is a, perhaps obvious, drawback to this method. In the cases where you would want the same style on several paragraphs you would have to copy the style. If you then later would like to change the style, you would have to change it on all the places it was used. Using classes you only have to write a set of rules once.

Embedded styles

One way to use class and ID references (you will learn about classes and IDs in the following section), rather than writing inline CSS, is to write your style embedded. That is, you write it in your HTML document, but on a designated place, encapsulated by the <style></style> tags. You can write them wherever you want, but a good idea is to have them in your <head> section.

For the same paragraph style as above, you would then write:

<head>
  <style>
    p{
      color: orange;
      font-family: arial, sans-serif;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>
    This is some styled paragraph!
  </p>
  <p>
    This is another paragraph with the same styling!
  </p>
</body>

This approach supports the Don't repeat yourself (DRY) principle, which says that you should not write the same code twice, making the code easier to maintain later on.

External style sheets

External style sheets looks like embedded styles, but differs in that the style is included from an external resource, meaning a different file than the HTML document. Using this approach, several HTML files can share the same styles.

I would recommend including the link to the style sheet in the <head> section of your document. You do that by writing:

<link href="path/to/stylesheet.css" rel="stylesheet">

Should you include several style sheets, which is possible, and some of them define the same property for the same class, the one included last will be used.

This is also true when you inside the same style sheet define the same property for the same class, the last declaration will be used.

You may wonder "what is a style sheet and how do I write one?" I am not going to say that it is easy, but it is quite easy. You do not have to do any document declaration or anything. Just start writing your rules, e.g. the top of the document could look like this:

body{
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
}

... or any other rules you would like to have there. It is up to you!

User specified rules

A user can specify CSS rules in their browser. This can not be affected by your code, but the style sheets you provide will take preference, should they affect the same element.

Browser defaults

Lastly we have the browser default styles. These are styles used by the browsers when your style sheet has not defined any for an element. E.g. if you have not defined the font-family property for a paragraph tag, the paragraph would be in the browser default font, which on browsers on MacOS is usually Helvetica, and browsers on Windows it is usually Verdana. These default may also vary across browsers on the same operating system.

If you want a consistent look across platforms you should define styles to override the browser default.

PreviousCommentsNextInheritance

Last updated