CSS cascade made easy | CSS cascading

CSS cascade is the perfect name if you ask me. But just because you’ve worked with CSS in the past doesn’t necessarily mean you know the sequence in which the declarations take effect. There are several ways to integrate cascading style sheets that may overwrite each other. The various CSS types and integration options are described below, where you will also find an explanation of how to calculate the weighting of individual styles.

CSS cascading – it’s all in the name

With CSS, or cascading style sheets, the name indeed says it all. The language was developed to separate the design aspect from the content of a website. In the past, websites were designed in the source code itself. This resulted in exceedingly large and complex layout tables and made the source code unnecessarily long and virtually impossible to decipher. Imagine a cascade as something like this: whatever is closest has the most weight. Here’s an analogy: what begins as a slow-moving stream reaches its maximum power and force as it reaches the end of the cascading falls.

It’s a new take on an old expression: last come, first served.

Style sheet hierarchy

Before the individual weightings are calculated in a style sheet, the individual style specifications are overwritten by design. The style sheet types are as follows:

1. The browser style sheet

Each browser displays certain elements differently. This is done by design to ensure that they can also be recognised in a standard output to allow each browser to be identified by its signature. This is frequently the case with forms or submit buttons. The browser style sheet is, however, the first one to be overwritten.

2. The user style sheet

User style sheets are CSS settings made by the user in the browser. A prime example of this is making the text larger for older users who have a difficult time reading small print and enlarge the font in the browser to help them read better. The user style sheet is one level above the browser style sheet; meaning it has a higher weighting.

3. The author style sheet

The author style sheet is the style sheet with the highest weighting and overwrites the other two style sheets. It defines how the page will appear and is specified by the designer or author of the page. In the cascade, this is the final point in the individual style sheets. It is the end of the cascade and has the most weight. The author style sheet can be integrated in one of three ways:

1. via an external CSS file which is embedded in the head.

	
	    <link rel='stylesheet' href='/css/autorenstylesheet.css' type='text/css' />
	

2. via an internal CSS definition which is located directly in the head of the document.

	
	    <style>        
	/* CSS direkt im Dokument */        
	.text-red {            
	color: rgb(255,0,0);        
	}    
	</style>
	

3. via inline styles which are indicated in the relevant tag with <p style=“…“>

Calculating the specificity of CSS instructions

Many specifications can also overwrite each other in a style sheet, however. The cascade is calculated by how close the declaration is to the element itself. For example, p {color:red;} is simply an element selector that every <p> in the document addresses. However, p.klasse {color:green;} is much closer to the single element <p class=“klasse“>, which overrides the first declaration.

According to this table, the declaration #nav a.foo {color:red;} would therefore have a weighting of 111. By contrast, the declaration a {color:green}; would only have a weighting of 1 and would definitely be overwritten. However, there is one exception: declarations with the !important attribute.

The GOD mode for the CSS cascade with !important

To fight the elements, you need Thor’s hammer. This would be the !important attribute for CSS. The !important-Attribut flags CSS declarations as top priority and, once written, they will not be overwritten. The tag looks something like this: p {color: red !important;}. This means that the text of all paragraphs in HTML would be red. This definition could also not be overwritten by inline styles. Please note that the !important tag is not inherited. When I define something in CSS, say p {color:red;}, then another element that is inside this <p>tag (for example, <p>there is another <p>Im Paragraph <span>ist noch ein anderer Tag</span></p>. !important therefore really only refers to the element that it directly addresses and does not affect any other tags in between.

CSS cascading in summary

Here is a list describing the CSS cascade from the least to most important style sheet as well as the CSS declaration with the highest priority:

• 1. Browser style sheet
• 2. User style sheet
• 3. Author style sheet

  • externe CSS-Datei
  • <style>-Anweisung im HTML <head>
  • Inline-Styles
  • !important-Attribut

Would you like to learn more about exciting topics from the world of adesso? Then check out our latest blog posts.