Does the order the of the <link> elements matter?


Does the order the of the <link> elements matter?


The order of <link> elements matters when we have conflicting CSS selectors - the linked resouce with the conflicting selector that is physically lower in the HTML document will be applied. This has to do with the concept of cascade; the order of CSS rules matters.

Say we have two CSS files with a conflicting selector:


h1 {
  color: red;


h1 {
  color: green;

Given the following HTML, which color will be applied to the <h1> element?:

<!DOCTYPE html>
  <title>My Site</title>
  <link rel="stylesheet" href="stylesheetTwo.css">
  <link rel="stylesheet" href="stylesheetOne.css">
  <h1>Hello World</h1>

The <h1> element will have the color: red; style applied because the stylesheetOne.css file is physically lower in our HTML document.

When implementing Bootstrap we will want to make sure our <link> to Bootstrap comes before the <link> to our own CSS file, otherwise, prewritten CSS declarations in Bootstrap may override styles we’ve declared.


I think this is an important point to add directly into the “Connecting to Bootstrap” slide of the Make a Website course (instead of leaving it as a sidenote via an external link). Not everyone will click through to find this out.


I also think you should just include this in the lesson as it does, indeed, matter. This opening a new tab in a discussion thread to read what should be included in the lesson is not efficient and seems more like a way to fix a lesson as an after thought. It works, but, it’s clunky. Otherwise your lessons here are outstanding.