Html - 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

RKDCODES
May 24, 2023
102 views
0 votes
2 Answers

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/[email protected]/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.

Tags: css html

Answers

- tniese
- May 23, 2023 at 11:09 pm
- 0 votes
0
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/[email protected]/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.
Login or Signup to reply.

- JacquelineBarnard
- May 24, 2023 at 4:24 am
- 0 votes
0
Is this legal!? …or for unethical hacking and controlling of innocent people’s smartphones!? …no disrespect but I am suicidal due to my being targeted and they’re running and ruining my entire life.

Shame on you who do practice this! Do you not realise ALL done in the dark will be brought into the light and the vengeance belongs to One! …. Laugh if you please but you who control hack take over (mitM) or whatever else it may be called are the epitome of ruthless and stupid …

Perhaps I am misguided and what I have stumbled upon here is innocent however I somehow doubt it…

Respectfully,
Jacqueline Barnard

Login or Signup to reply.