CSS - Understanding the Cascade [LESSON]

Understanding the Cascade

Cascading Style Sheets

Cascading Style Sheets (CSS) provide the design to the page. There are three types of style sheets:

Types of Cascading Style Sheets: External Style Sheets Internal Style Sheets Inline Style Sheets

 

External Style Sheets

External style sheets are the most used, it is the place you should typically put all your styles for the website. The external style sheet is an external .css document that is created in the text editor.  You place your styles for the website on this document and you can change the website design by just changing this one style sheet. You just list the styles; no HTML goes on the external style sheet. You save the sheet as a .css file format and link it to the HTML page. 

CSS code

To attach the style sheet to the HTML page, you enter the following link into the head section:

Link inside the head section: <link rel="stylesheet" type="text/css" href="style.css" />

The href attribute points the browser to the correct file, make sure the file listed is the correct .css file and is in the same file folder as the HTML pages.

Internal Style Sheets

The second type of style sheet is the internal style sheet. This style sheet is used for a one-page website or for changing the style for this page from what styles appear on other pages of the site.  If you have the fonts for h1 as white throughout the site, but on this page, you want them to be yellow, then you would change the style in the internal style sheet.  To enter an internal style sheet, you put the <style> HTML element inside the <head> element.  You enter your style rules inside the <style> element. Make sure you close the <style> element before closing the <head> element. See the image below on how to enter an internal style sheet.

Internal style sheet inside the <head> element.

Inline Style

The inline style should be used on very rare occasions. The reason for this is, if you want to change the appearance of the website, or elements on the website, you will have to go to each individual HTML element to make this change. This is done inside the individual element and only applies to that element. 

Inline style shown as follows: <h1 style="font-family: impact; color: cyan;">This is the Title of the Page</h1>

Multiple Style Sheets and Priority

These different styles override one another. Normally, you will use the external style sheet for your styles. If you need to override what you have in the external style sheet for a certain page of the site, you put those styles in the internal style sheet for that page. It will override the external style.  If you want one element in your content to have a different appearance than the other elements on the page or in the site, then you use the inline style. This is put in the element and overrides both the styles in the internal style sheet and the external style sheet(s). 

The last style or style sheet is the priority.  If you look at a lot of websites online, you’ll notice they often have multiple style sheets.  This is for different reasons, like there may be one for accessibility options, or the JavaScript may refer to a specific sheet for certain situations.  There may be one for special fonts, this is very common.  If you have multiple style sheets, the last style sheet is the priority for the browser, so it will check the last one first and then go to the others if needed. 

Style sheets are said to “cascade” because they override one another. The styles “cascade” over each other. The rules the browser applies are as follows, giving #1 the highest priority.

  1. Inline style (inside the HTML element) – the browser will look for an inline style, if there isn’t one it goes to the next item.
  2. Internal style sheet (inside the <head> element) – the browser looks to see if there is a style applied to the element in the head, if not it goes to the next item.
  3. External style sheet (linked in the head) – the browser will look for a style for the element in the external style sheet. If there isn’t one, then it goes to the last item.
  4. Browser default – if there is no style applied to the element, the browser will apply the default for the browser to the element.

If you put more than one style for an element in any of these locations, the last style is the one that is used.  In the image below the developer put two different colors for the h1 font, the h1 item will be center-aligned and yellow because the text-align isn't overridden and the last color rule was yellow.

CSS internal style sheet showing 2 styles for the h1 element.

Try this activity below to check your Understanding Cascading Style Sheets. 

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION