Background color not showing up with external CSS file

Question

I am working in Visual Studio Code, with extension "open in browser" so that I can preview my code in Google Chrome. I have my basic HTML done, and I am trying to link it to an external CSS file. However, the background color I have set in the CSS file is not showing up.

I have looked up solutions and can't see any issue with my code.

HTML

<head>
    <title>Site</title>
    <link rel = "Website Style" type = "text/css" href = "ResumeStyle.css" >
</head>

CSS

body{
background-color: darkgray;
}

This should change the background to dark gray, but it remains white. I'm not sure if it's an issue with my code or if it has to do with the Chrome extension. Sorry if its a basic question I'm just not seeing the issue.

You should get sublime text 3 for yourself it will help you write your code by starting typing and pressing TAB it will autocomplete certain tags for you. ^^ — 13garth, Oct 18 '19 at 16:16

score 2 · Accepted Answer · edited Aug 30 '20 at 15:50

2

Change rel="Website Style" to rel="stylesheet". Also double check the path to your CSS is correct.

You can read about the different rel attributes here: https://www.w3schools.com/tags/att_link_rel.asp

edited Aug 30 '20 at 15:50

HoldOffHunger

18,769
10
104
133

answered Oct 18 '19 at 16:22

jjsecord

114
5

score 0 · Answer 2 · answered Oct 18 '19 at 16:25

It's likely that your issue is that you are modifying a CSS property for 'body', but you aren't using 'body' in your html file. Check out this simple example from W3Schools Here

This is what I'm thinking you might need, just adding the body tag.

<head>
    <title>Site</title>
    <link rel = "Website Style" type = "text/css" href = "ResumeStyle.css" >
</head>
<body>
</body>```

score 0 · Answer 3 · edited Aug 30 '20 at 15:51

0

Recheck the spelling of file, even the capitalize letter can cause this issue.

edited Aug 30 '20 at 15:51

HoldOffHunger

18,769
10
104
133

answered Oct 18 '19 at 16:26

Wania Kanwal

77
1
8

score 0 · Answer 4 · answered Oct 18 '19 at 16:27

You need to check the path: if the css' file and the html's file are on the same folder.

If they are, then:

</head>
  <link rel="stylesheet" type="text/css" href="ResumeStyle.css">
</head>

If the stylesheet is on another folder then you need to change the href.

Also check if the ResumeStyle name is correct, capital letters matters. And check if you really have a body in your html.

If any of these answer works for you, please leave a vote.

There is a great answer about that here.

Background color not showing up with external CSS file

4 Answers4