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

Question

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

Answer

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:

stylesheetOne.css:

h1 {
  color: red;
}

stylesheetTwo.css:

h1 {
  color: green;
}

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

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

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.

6 Likes

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.

20 Likes

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.

4 Likes

I agree with this. This is a key point that many people miss.

Um, think I missed that, too. What was the point?

it is time to emphasize this in the main lesson - not just leave it to chance and place it here

Thank you. We can wish for it, but at this late stage it’s hardly something we can expect. Courses of long ago have not been maintained for at least five years. They were abandoned when the engineers were needed elsewhere, and the authors were long gone. They are frozen in time, more or less paleo and never likely to change, only erode.

1 Like

OK, thank you very much for this information. I had a different impression. Very interesting!

1 Like