CODEWITHSUNDEEP
htmlcss
ellabasiyam
ellabasiyam

Reputation: 1

Stylesheet won't over ride Bootstrap - or I'm not linking it properly?

I can't get my css to over ride Bootstrap, or i'm not linking it properly? My .css is in the same file as my .html, I've placed my stylesheet below Bootstrap, still no avail. I've tried creating id's to over ride, still nothing. If I link in a stylesheet from W3Schools though it'll override Bootstrap. Is it just my css file? I know it's not best practice but I also tried using !important in my .css but still nothing. Here's my code:

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

.h1 {
  font-family: 'Roboto', sans-serif;
  color:blue;
}
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">   

<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<link rel="stylesheet" href="photographywebsite.css">

<title>
    Photography Website
</title>
</head>

<body>
<h1>Hello World!</h1>

</body>
</HTML>

Upvotes: 0

Views: 45

Answers (2)

Joker
Joker

Reputation: 87

The problem isn't with the linking of your Stylesheet.

Instead you are not referencing the element "h1" but an element with the class of "h1".

Try to change your code to:

h1 {
  font-family: 'Roboto', sans-serif;
  color:blue;
}

or add the class "h1" to your heading.

For reference on css selectors check out https://www.w3schools.com/cssref/css_selectors.asp

Upvotes: 1

Wahaj
Wahaj

Reputation: 1

Remove this line from stylesheet reference and try

integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"

Upvotes: 0

Related Questions