My H1 is not changing colour and I cant figure out why. All of the other selectors are changing colour on command, but the H1 is not responding

I am a complete beginner so apologies if this is a silly issue ! Please see my code below. The H1 is not changing colour, I have seperated the CSS and HTML and linked them. When I target the menu class and paragraph selector the colours change as expected but the H1 is not changing colour. please help 🙂

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>MYWEBSITE</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="container menu">
      <div class="row">
        <div class="col-3">About me</div>
        <div class="col-3">Contact Information</div>
        <div class="col-3">Certificates</div>
        <div class="col-3">gallery</div>
      </div>
    </div>
    <br />
    <h1>ROCHELLECODES</h1>
    <p>Welcome to my website</p>
  </body>
</html>

h1 {
  font-family: "Bebas Neue", sans-serif;
  color: lawngreen;
}
.menu {
  font-family: "Bebas Neue", sans-serif;
  color: blue;
}
p {
  font-family: "Bebas Neue", sans-serif;
  color: blueviolet;
}

I expected the H1 text "ROCHELLECODES" to turn "Lawngreen" as written in my CSS but nothing is happening. The other selectors are working normally.

>Solution :

The order in which the <style> and <link> tags appear in your HTML code matters.

The boostrap stylesheet is loaded after your stylesheet, and boostrap also has a rule for h1 that overwrites your styling.

Just change the order in your HTML to:

    <title>MYWEBSITE</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />

This won’t always solve your problem because also Specificity plays an important role. But having your style sheet after the one of the framework allows you to overwrite rules with the same Specificity.

Leave a Reply