Background Color Does Not Get Applied

Question

I'm having problems with coding this, because I really can't find what the problem is, the background color wouldn't appear.
I used an external css file.
I hope someone answers this, the code is below:

This is the html:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    </div>
  </body>

</html>

This is the css:

.header {
  background-color: #111111;
}

Is your CSS file right next to your HTML file? The most likely reason the CSS isn't being applied is that the file is not where you're referencing it. — Roddy of the Frozen Peas, Jun 05 '21 at 18:32
I've removed the "height" and "width" from the CSS in the question because they were not present in the original question and were added by another user without any explanation. We shouldn't be changing the OP's code arbitrarily, especially when the changes we're making invalidate existing answers because they may have been part of the actual problem. — Roddy of the Frozen Peas, Jun 05 '21 at 18:35
Can you please write your code example in a snippet: https://stackoverflow.com/help/minimal-reproducible-example — chrwahl, Jun 05 '21 at 20:18

theknightD2 · Answer 1 · 2021-06-05T19:10:51.110

I actually had this problem (before I knew about StackOverflow). Your code is (mostly) fine.
The problem is the computer doesn't know what to do.
A div is simply a divider. (Pretty sure that div is a abbreviated version of divider).
A divider without anything inside it is empty. Useless.
You need to put something in it to apply color, size, ect.
See the following Stack Snippets®.

As you can see, adding text is a simple way to solve your problem.

.header {
  background-color: #111111;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    And look at that. Problem solved.
    </div>
  </body>

</html>

If you don't want text, add a <br>.

.header {
  background-color: #111111;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    <br>
    </div>
  </body>

</html>

You can even set the size of the div, too!

.header {
  height: 200px;
  width: 50 px;
  background-color: #111111;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="designs.css">
  </head>

  <body>
    <div class="header">
    Some text here whose div has been set to 200 by 50 px
    </div>
  </body>

</html>

score 0 · Answer 2 · answered Jun 05 '21 at 18:02

0

Your code is ok. The problem is that you did not specify width and height of the div.

Try to add this to your css and you will see that it will work.

.header {
  background-color:#111111;
  width: 100%;
  height: 100px;
}

answered Jun 05 '21 at 18:02

NeNaD

18,172
8
47
89

Background Color Does Not Get Applied

2 Answers2