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.
2
Answers
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
h1that overwrites your styling.Just change the order in your HTML to:
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.
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