My stylesheet won't link to my css and it's killing me!

1

Hi, this is really frustrating and I cannot seem to find a solution for it. The only thing I can do for now to circumvent the issue is put my css in a “style” element in the “head” portion of the html.

Basically, I have a style.css file that is in the same directory as my index.html. There is no problem I can see in my linking of the css file, however the properties from the css file are not simply not being applied to my html. I have a folder called TwitchJSONAPI which houses both index.html and style.css.

This is my HTML mark up:

<!DOCTYPE html>
<html>
<head>
  <title>Using TwitchJSONAPI</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
</head>

<body>
<h2>Hello</h2>
</body>
</html>

And this is my simple CSS to test:

h2 {
  font-size: 100px;
}

It simply isn’t working. Am I missing something really obvious? Hope someone can help. Thanks a lot.

2

Probably or maybe not. Put your styles.css after your link to bootstrap?

3

Try switching the order of the CSS files. You may be overwriting your custom CSS with Bootstrap.

4

Oh, wow, that actually seems to have worked. Was pulling my hair out for this? Thanks a lot guys, didn’t know this would even be an issue.

5

it’s because your file is read from top to bottom. So first it encounters Bootstrap and thinks “so that’s what I have to do” and then it sees your css and it goes “oh, I have to do that”.

Glad you’re not dead !