A Smarter Way To Learn HTML & CSS(2015)

65
Layout:
a modern header part 2

In the last chapter we took the first steps to create a header that’s flush with the top of the browser window and stretches from edge to edge of the window. We specified a width of 100% for the div. We instructed the browser to eliminate the whitespace it would normally add to the top and sides. And we added a background color.

But no header color block showed up. Why? Because without a height specification or any content that would force the browser to stretch the div up and down to accommodate the content, the browser assigns the div a height of 0. The crimson color block has a width but no height. It’s one-dimensional, an invisible phantom.

We could assign it a height, specifying a number of pixels, but we’re avoiding pixels because they prevent the page from adapting to different-size windows. We could assign it a height as a percentage to avoid the pixel problem, but we don’t need to. When we put some content inside the div, the div will expand to accommodate it. For content, I’ll start with a heading.

We start by creating a style for the heading.

div#header h2 {
font-family: Verdana, Geneva, sans-serif;
font-weight: 900;
color: white;
}

The highlighted first line says, “Apply this style to an h2 heading within the div whose id is “header.” Now we can write…

<div id="header">
<h2>A Smarter Way to Learn</h2>
</div>

…and a header appears in the browser.

I’d like to make the heading a little beefier, so I add this:

div#header h2 {
font-family: Verdana, Geneva, sans-serif;
font-weight: 900;
color: white;
font-size: 2em;
}

This is the result:

Finally, let’s give the heading some whitespace on the left.

div#header h2 {
font-family: Verdana, Geneva, sans-serif;
font-weight: 900;
color: white;
font-size: 2em;
margin-left: 2%;
padding: 0;
}

And here we go:

In your CSS file code a 100%-wide div with absolute positioning at the top left. Assign it a light color. In your HTML file code the div and put a heading in it. Save the files. Display the page. (The div will be at the top of the page if you coded correctly.)

Sample CSS code is at:
http://asmarterwaytolearn.com/htmlcss/practice-65-1.html.

Sample HTML code is at:
http://asmarterwaytolearn.com/htmlcss/practice-65-2.html.

Find the interactive coding exercises for this chapter at:
http://www.ASmarterWayToLearn.com/htmlcss/65.html