The-Complete-Web-Development-Bootcamp/main/06 - Introduction to Bootstrap 4/75 - A Note About CSS Link Order.html

<p>Hey guys,</p><p>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. </p><p>CSS styles are applied in the order they are linked in your HTML code. </p><p>So if you had two stylesheets e.g. styles1.css and styles2.css which both target the same element e.g.</p><p><strong>styles1.css</strong></p><pre class="prettyprint linenums">body {
background-color: red;
}</pre><p><strong>styles2.css</strong></p><pre class="prettyprint linenums">body {
background-color: blue;
}</pre><p>If inside the head section if your HTML, you list your links as this:</p><pre class="prettyprint linenums">&lt;link rel="stylesheet" href="styles1.css"&gt;
&lt;link rel="stylesheet" href="styles2.css"&gt;</pre><p>The resulting page will be <strong>blue</strong>.</p><p>But if you listed your links like this:</p><pre class="prettyprint linenums">&lt;link rel="stylesheet" href="styles2.css"&gt;
&lt;link rel="stylesheet" href="styles1.css"&gt;</pre><p>The resulting page will be <strong>red</strong>.</p><p>Essentially both styles are being applied, but the one that's visible at the end is the one applied last.</p><p><br></p><p>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:</p><pre class="prettyprint linenums">&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;link rel="stylesheet" href="css/styles.css"&gt;</pre><p>This means that you first load the default bootstrap styles, then you can override some of those components with your own custom CSS. </p><p>Unlike CSS and JavaScript, HTML code is executed from top to bottom so the order of your code matters.</p><p>All the best,</p><p>Your instructor, Angela</p><p><br></p>