how do I change my header background color?

Question

I want to change the header background red along the navigation menu. however, my html/css does not work as intended. can you tell me what I did wrong? I though that header selector is the container of my topnav section. not sure why changing background-color through header style doesn't do anything. if I put the bakcground-color under the .topnav a, there will be a gap between the floating elements

    <head>
    <style>
        body {
    box-sizing: border-box;
    margin: 0;
    background-color: #4c8b41;


}

header {
    background-color: red;
}

.topnav a {
    float: left;
    color: #f8f8f8;

    text-align: center;
    text-decoration: none;
    padding: 10px 10px;
}

.topnav a:hover {
    background-color: black;

}

#topnav-right {
    float: right;    
}
    </style>
</head>
<body>
    <header>
        <div class="topnav">
            <a href="#"><h2>Home</h2></a>
            <a href="#"><h2><input type="text" placeholder="Search"></h2></a>
            <div id="topnav-right">
                <a href="#"><h2>Log In</h2></a>
                <a href="#"><h2>Sign Up</h2></a>
            </div>
        </div>
    </header>

</body>
</html>

Kevin Bruccoleri · Answer 1 · 2018-08-04T12:52:01.153

The following rule will only work on elements that have class="header", not the header element. Instead use:

header {
    background-color: red;
}

CSS selectors use the following syntax:

tag
{
  ...
}
.class
{
  ...
}
#id
{
  ...
}

Note that the tag has nothing prefacing it, which is what you want to do in the case of the header.

UPDATE: The problem also lies in that the header element has no height, so the background is not visible. Note that this is because of the floated anchor tags within the .topnav element. Note the CSS updates to the .topnav:after, which provide a clearfix.

<head>
  <style>
    body {
      box-sizing: border-box;
      margin: 0;
      background-color: #4c8b41;
    }
    
    header {
      background-color: red;
    }
    
    .topnav:after {
      clear: both;
      display: block;
      content: "";
    }
    
    .topnav a {
      float: left;
      color: #f8f8f8;
      text-align: center;
      text-decoration: none;
      padding: 10px 10px;
    }
    
    .topnav a:hover {
      background-color: black;
    }
    
    #topnav-right {
      float: right;
    }
  </style>
</head>

<body>
  <header>
    <div class="topnav">
      <a href="#">
        <h2>Home</h2>
      </a>
      <a href="#">
        <h2><input type="text" placeholder="Search"></h2>
      </a>
      <div id="topnav-right">
        <a href="#">
          <h2>Log In</h2>
        </a>
        <a href="#">
          <h2>Sign Up</h2>
        </a>
      </div>
    </div>
  </header>

</body>

</html>

score 3 · Accepted Answer · answered Aug 04 '18 at 12:46

body {
         box-sizing: border-box;
         margin: 0;
         background-color: #4c8b41;
         }
         
         header {
           background-color: red;
           height:100px;
         }
         
         .topnav a {
         float: left;
         color: #f8f8f8;
         text-align: center;
         text-decoration: none;
         padding: 10px 10px;
         }
         
         .topnav a:hover {
         background-color: black;
         }
         
         #topnav-right {
         float: right;    
         }

<html>
   <head>
   </head>
   <body>
      <header>
         <div class="topnav">
            <a href="#">
               <h2>Home</h2>
            </a>
            <a href="#">
               <h2><input type="text" placeholder="Search"></h2>
            </a>
            <div id="topnav-right">
               <a href="#">
                  <h2>Log In</h2>
               </a>
               <a href="#">
                  <h2>Sign Up</h2>
               </a>
            </div>
         </div>
      </header>
   </body>
</html>

hey it works!!!! can you tell me why setting the height property fixes it? what is the default value? — noob, Aug 04 '18 at 12:52
you define div in header tag and if you want to set background color on header tag than you have to set height for header based on inside content but if you want to set background color on div than you don't need to define height — Kaushik Andani, Aug 04 '18 at 12:56

rileyjsumner · Answer 3 · 2018-08-04T12:50:26.873

1

You are trying to apply the css to class header, rather than the element.

header { /*remove the '.'*/
    background-color: red;
}
/* EDIT */
.topnav {
    background-color: red;
    height: 80px;

}

Try applying it to your div.

EDIT 2: try adding a height

edited Aug 04 '18 at 12:50

answered Aug 04 '18 at 12:38

rileyjsumner

523
1
8
21

doesnt work. if i put it under .topnav a, there will be a color gap between the two floating elements – noob Aug 04 '18 at 12:46
Not under .topnav a, just .topnav – rileyjsumner Aug 04 '18 at 12:47
yea, still does not work either even if I put it under .topnav – noob Aug 04 '18 at 12:50
why you copied my answer @rileyjsumner? – Kaushik Andani Aug 04 '18 at 12:52
@KaushikAndani apologies did not realize you had the same solution. This whole post is 6 of the same answers teaching you how to apply css selectors – rileyjsumner Aug 04 '18 at 12:54

Nik · Answer 4 · 2018-08-04T12:49:50.587

Either Change '.header' to 'header' in css, or add class='header' to header tag.. This should solve your problem. .header in css refers to a class in html.

Edit

Seems like the header div did not have any height. Here is updated code.

body {
    box-sizing: border-box;
    margin: 0;
    background-color: #4c8b41;
}

.header {
    background-color: red;
    height: 87px;
}

.topnav a {
    float: left;
    color: #f8f8f8;

    text-align: center;
    text-decoration: none;
    padding: 10px 10px;
}

.topnav a:hover {
    background-color: black;

}

#topnav-right {
    float: right;    
}

<body>
    <header>
        <div class="topnav header">
            <a href="#"><h2>Home</h2></a>
            <a href="#"><h2><input type="text" placeholder="Search"></h2></a>
            <div id="topnav-right">
                <a href="#"><h2>Log In</h2></a>
                <a href="#"><h2>Sign Up</h2></a>
            </div>
        </div>
    </header>

</body>

i changed it to header but it still does not work somehow – noob Aug 04 '18 at 12:40 — noob, Aug 04 '18 at 12:40

score 1 · Answer 5 · answered Aug 04 '18 at 12:43

1

Remove the dot for styles to apply correctly. The dot syntax is for class selection. Header is an HTML element and hence no need of the dot. The reason for header not showing background color is that all elements inside it are set to float. Floating divs do not affect height of the parent. In your case since all elements are floating, parent div height becomes zero and hence you do not see the background color

answered Aug 04 '18 at 12:43

cdoshi

2,772
1
13
20

do you mind telling me why it won't show up if the child element is set to float? so, how can i have a continuous bakcground color for my header?? – noob Aug 04 '18 at 12:48
So basically when you set an element to float, it does not affect the height of the parent. Its basically removed from the normal flow of the page. Check https://developer.mozilla.org/en-US/docs/Web/CSS/float. If you want parent to have a height, either set it manually to a certain pixel or remove floating from the elements on the left and just keep the right element as float – cdoshi Aug 04 '18 at 12:53

score 1 · Answer 6 · answered Aug 04 '18 at 12:45

header { 
    background-color: red;
}

if not working than add a id to your header section

<body>
    <header id="some_id">
        <div class="topnav">
            <a href="#"><h2>Home</h2></a>
            <a href="#"><h2><input type="text" placeholder="Search"></h2></a>
            <div id="topnav-right">
                <a href="#"><h2>Log In</h2></a>
                <a href="#"><h2>Sign Up</h2></a>
            </div>
        </div>
    </header>

</body>

like this Than add css

#some_id{background-color: red;}

or

#some_id{background: red;}

how do I change my header background color?

6 Answers6