Description Contains everything in the header which is usually at the top of the page. Containers Contained by #container Contains: The Site Title (h1) The Site Subtitle (h2) #search-top-box #top-bar #login-status #header-extra-div-1 (all three)

Outline Click to view in closer detail!

Details

The site's header is by default located at the top of the page. It contains the site's title, subtitle, search box, login status, and the top navigation bar. Because this <div> block contains so much vital information, the #header id is one of the most important ids on the page.

The site title is defined as an h1 tag and can thus be accessed with #header h1. The subtitle is a heading level lower than that and can similarly be accessed with #header h2.

The top bar is also located within the header. Manipulating this bar relative to the #container can therefore be tricky, but at the same time it allows for a unification between the edges of the top bar and the rest of the header for a more consistent look.

Examples

On this page, the site's subtitle is made red with the code below:

#header h2 span{    color: #E00; }

Try It on the CSS Zone Sandbox!

Base CSS

#header {
    position: relative;
    z-index: 30;
    height: 7em;
}
 
#header h1{
    margin: 0;
    padding: 0;
}
#header h2{
    margin: 0;
    padding: 0;
}