HTML5 and CSS3, Second Edition

Let’s center the page’s content and set some basic font styles.

html5_new_tags/stylesheets/style.css

body{

margin:15pxauto;

font-family:Arial,"MS Trebuchet", sans-serif;

width:960px;

}

p{ margin:0 0 20px0;}

p,li{ line-height:20px;}

Next we define the header’s width.

html5_new_tags/stylesheets/style.css

#page_header{width:100%;}

We style the main navigation links by transforming the bulleted lists into a

horizontal navigation bar by floating all of the list items so they fall on the

same line:

html5_new_tags/stylesheets/style.css

#page_header>nav>ul, #page_footer >nav>ul{

list-style:none;

margin:0;

padding:0;

}

#page_header>nav>ul>li, #page_footernav>ul>li{

margin:0 20px0 0;

padding:0;

display:inline;

}

We add a little margin to the right side of each <li> so we get space between

each menu entry. We’re using the shorthand version of the margin rule, which

reads top, right, bottom, left. Think of it like an analog clock; 12 is at the top, 3

is on the right, 6 is at the bottom, and 9 is on the left.

Next we style the main content to create a large content column and a

smaller sidebar. The posts section needs to be floated left and given a width,

and we need to float the callout inside the article. While we’re doing that, let’s

bump up the font size for the callout.

html5_new_tags/stylesheets/style.css

#posts{

float:left;

width:74%;

}

report erratum • discuss

Redefining a Blog Using Semantic Markup • 23

Download from Wow! eBook <www.wowebook.com>