Testing HTML5 & CSS3

Basic Setup

Now we've taken care of the content at the top of the page in the last page we can define some basic rules concerning typography, background color of the page, etc. We can do all of this as we would in CSS 2.1 so I won't show everything here. First we reset margin and padding-styles with a simple rule;

{
margin: 0;
padding: 0;
}

Block Declaration

We then tell the browser to render all the new HTML 5 elements as block;

header, footer, aside, nav, article
{display: block;}

The browsers are fine with the new elements they don't recognize (this is why HTML 5 is somewhat backwards compatible), but they don't know how those elements should be rendered by default. We have to tell them this until the standard is implemented across the board, hence the block declaration.

Font Size

Also note how I've chosen to size the fonts for elements such as h1 and h2 in pixels instead of ems or %. This is to maintain the progressive nature of the tutorial. When the major browsers one day are completely finished implementing HTML5 and CSS3 we will all have access to page zooming instead of just text resizing. This eliminates the need to define sizes in relative units, as the browser will scale the page anyway.

h3{
font-size: 18px;
line-height: 22px;
padding: 11px 0;
}

No additional styles are required for the header, so we'll go straight to the navigation.

Navigation

It is important to note that the width of the body has been defined as 940px and that it has been centered, see the second and third lines below;

body{
margin: 0 auto;
padding: 22px 0;
width: 940px;
font: 13px/22px Helvetica, Arial, sans-serif;
background: #f0f0f0;
}

Our navigation bar needs to span the whole width of the window, so we'll have to apply some additional styles;

nav {
position: absolute;
left: 0;
width: 100%;
background-color:#333333;
}

We position the nav-element absolutely, align it to the left of the window and make it span the whole width of the page.

We'll center align the nested list items by setting the second margin declaration to auto to center it within the boundaries of the layout:

nav ul {
margin: 0 auto;}

Now we'll define some additional styles to make the navigation items look prettier and align them to the grid the layout is based on;

nav ul {
margin: 0 auto;
width: 940px;
list-style: none;}