Introduction to CSS Hierarchy

This chapter will discuss the three ways to apply CSS Styles: using the style attribute, the <style> element, and using the <link> element to reference an external stylesheet.

There are three ways to create and implement CSS styling so they can be applied to HTML elements. Each have their own advantages and disadvantages, and some will have more precedence over another. This means that some CSS styles will override others, even if the CSS Selection is the same. We will start with discussing the lowest in the hierarchy.

Hierarchy - Linked Stylesheets

As you may be familiar, HTML page code consists of three main parts, which are Element sections. We have <head>, <body> and <html>. The <head> and <body> elements are contained within the <html> element, which tells the browser the sections of the file to read from. As you may know, everything in the <html> element tells the browser that the code within it is Hyper-Text Markup Language. Additionally, everything in the <body> element is everything that is shown and rendered to the user. However, the <head> element is not shown to the user. Often the <head> element tells the browser some additional information, including the page title using <title> elements, metadata information, often used by search engines to help them sort pages, and linked data in <link> elements, telling the browser to link to other files on the server, and the relationship they have to this page.

Linking independent CSS Stylesheets uses this <link> element, inside the page Header, and it looks like the following code:

HTML
  1. <head>
  2. <link rel="stylesheet" href="styles.css" type="text/css" />
  3. </head>

As seen on line 2, the <link> has three main attributes: rel, which is the relationship between the file linked and this page, href, which is the Hypertext Reference[12], and this points to the physical file to transfer, and type, which is the expected data type of the document, representative of a MIME Type[13].

The file linked in the above code, "styles.css", is a plain text document with the .css file extension. The file extension gives the file association with programs designed to accommodate the CSS syntax. These programs will often include keyword highlighting, which colours the keywords to help visually separate them. Due to this being in a <link> element, the browser makes a second download request for that file. Any CSS Styling will not be applied until this file has been fully downloaded[14]. On slow connections, this is very noticeable, as the browser will display the HTML content while waiting for the CSS stylesheet to be downloaded, and then it will apply the stylings to the elements. A suitable work-around for this is to enable Caching on the additional style files. That way the user only has to download it once, and then for subsequent pages it will re-use the stylesheet already on their computer, not requiring an additional download[15].

The Linked method of using CSS stylesheets has the advantage of using the same stylesheet file for multiple pages. It is often used across an entire website, like this one[16]. The page you are viewing is using the same style sheet as all the other pages on this web site.

Linked stylesheets have the lowest hierarchy from the three. This means it can be overridden with the two other methods listed below.

Hierarchy - Element Styles

Element styles use a specific <style> element, which is not rendered on the web page. These style elements can be placed anywhere in the <body> or <head> elements on the page. An example is given below:

HTML
  1. <head>
  2. <style type="text/css">
  3. .element_styling {
  4. background-color: maroon;
  5. box-shadow: inset 0px 0px 10px #000000;
  6. color: #CECECE;
  7. padding: 16px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <style type="text/css" scoped>
  13. /* Code here will apply to every element within the parent <div>. */
  14. </style>
  16. <div>
  17. <p class="element_styling">This is an example of element styling. The block of code can be used in both the <head> and <body> elements. It can also support a specific attribute ("scoped", however only works in Firefox v21 at the time of this writing) which only makes it apply to child elements of the parent element it's within.</p>
  18. </div>
  19. </body>
Example

This is an example of element styling. The block of code can be used in both the <head> and <body> elements. It can also support a specific attribute ("scoped", however only works in Firefox v21 at the time of this writing) which only makes it apply to child elements of the parent element it's within.

These styles will be applied to the current page you are viewing. You cannot make them style other pages. You may notice I have added the type attribute, with the same MIME data type as the Linked stylesheet above. The type attribute is required for both the Linked and Element styles, and is required to be a valid MIME Type[17].

Element based styling will override Linked page based styling. For example, if in styles.css, you have a selector to select every <div> element, and give it a green background, you can override this with Element styles. This overriding will only apply to the page that has the Element style on it, every other page will use the Linked styling.

The advantage of Element based styling means that there's no chance of your content being unstyled while the browser downloads a Linked stylesheet. The code for the Element style is included in the HTML document that contains your content, so there's no delay in rendering. The downside to this is it can heavily bloat out your page if you have a lot of styles, and if you want to change how something looks across all pages, you will need to edit every single page, instead of just one file.

Element styles are in the middle of the hierarchy. They will override Linked stylesheets, but are overridden by Attributes styles, which we will disucss below.

Hierarchy - Attribute Styles

Attributed based styling is the highest of all three styling methods, and will override the other two methods. These are also the most limited types of styling, where the styles will only be applied to the element that the attribute is within. Similar to the above, Attribute styling uses the style attribute inside elements, like the code below:

HTML
  1. <div>
  2. <p class="element_styling" style="background-color: #60AFFE; color: #FFFFFF; font-size: 14pt; text-shadow: 1px 1px 1px #000000;">
  3. This is a paragraph section, where the background colour is light blue,<br />
  4. the font size is 14 points, and all text is white and has some shadow.<br /><br />
  5. Note: Because this paragraph element has the same class used in the Element Styling section above, it inherits the inner box shadow and padding. This is because the attribute style does not override these.
  6. </p>
  7. </div>
Example

This is a paragraph section, where the background colour is light blue
the font size is 14 points, and all text is white and has some shadow.

Note: Because this paragraph element has the same class used in the Element Styling section above, it inherits the inner box shadow and padding. This is because the attribute style does not override these.

These styles will only be applied to the element that has the attribute, and this will override all other styles. For example, if a Linked stylesheet originally makes all <p> elements have a red background colour, and their font size be 10 points, this Attribute style will override it with the styles as its value. As demonstrated, any CSS properties that are not overridden in the attribute style will be inherited from the next lowest in the hierarchy, in this case, from our .element_styling class we made in the Element Styles section above.

The advantage of Attribute styles is that you cannot get more specific than this selection. Additionally, it will override all other styles. However, it will not override child elements if they are styled by another means. For example: If a <p> element has attribute based styling, but there is an <a> element within it, that has styling through Link or Element based styles, the Attribute based style will not override it.

Attribute styling are at the top of the hierarchy. They will override all other styles, but only for the element that has the style attribute within it. It will not affect parent or child elements.

Conclusion

In conclusion, we have discussed and learned about the differences and reasons for separating HTML structure from CSS styling, because it offers us much more flexibility to styling our elements over what attributes can do. We also explained and discussed about four of the five CSS Selectors, which we use in stylesheets to select specific elements to style, in addition to grouping selectors together to make the selection more precise and fine. And finally we discussed the three CSS styling methods, and the hierarchy they hold, where one method will override the styling of another.

I hope you have understood and use the knowledge you have gained here to help you build better websites. There are a few resources below to help improve your knowledge, and should always be used to better develop your skills as a web developer.

W3Schools - The biggest web developer resource available. Explains every detail about everything web related.
W3C - World Wide Web Consortium, the official source for the Web standards. Explains the finest detail and requirement for the three main web languages: HTML, CSS and Javascript.