Hey guys,

A quick note about the next lecture. If you find that your custom styles are not working, make sure that you change the order of link tags in the header.

CSS styles are applied in the order they are linked in your HTML code.

So if you had two stylesheets e.g. styles1.css and styles2.css which both target the same element e.g.

styles1.css

body {
background-color: red;
}

styles2.css

body {
background-color: blue;
}

If inside the head section if your HTML, you list your links as this:

<link rel="stylesheet" href="styles1.css">
<link rel="stylesheet" href="styles2.css">

The resulting page will be blue.

But if you listed your links like this:

<link rel="stylesheet" href="styles2.css">
<link rel="stylesheet" href="styles1.css">

The resulting page will be red.

Essentially both styles are being applied, but the one that's visible at the end is the one applied last.

So following that logic, if your custom styles are not overriding the bootstrap styles, all you need to do is move the link to your custom stylesheet to a line after the bootstrap CDN link:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">

This means that you first load the default bootstrap styles, then you can override some of those components with your own custom CSS.

Unlike CSS and JavaScript, HTML code is executed from top to bottom so the order of your code matters.

All the best,

Your instructor, Angela