DJG DJG - 4 months ago 7
HTML Question

Why isn't this page's background black?

What am I not seeing here?

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
</head>

<body>
</body>
</html>


CSS: (css/style.css)

body{
background-color:black;
}


I already double-checked the file structure. What am I missing?

Answer

Don't give your link element an end tag. Either leave it as <link attributes='values'> or make it self closing: <link attributes='values'/>

body{
  background-color:black;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>
  </body>
</html>

Less typing if you leave the / off self closing tags. In HTML5 this is ok, however there are other versions of HTML and XML that require all tags to be formally closed.

More details are here: Are self-closing tags valid in HTML5?.

Update: Despite this, most browsers still render correctly when the link element is closed incorrectly. And that wasn't the problem here.

Comments