HTML5 and CSS3, Second Edition

Now let’s add some CSS to the page to create the layout we need. It’ll be

similar to the CSS for the blog. In stylesheets/style.css, add the basic styling to

the body:

html5_aria/homepage/stylesheets/style.css

body{

width:960px;

margin:15pxauto;

}

p{

margin:0 0 20px0;

}

p,li{

line-height:20px;

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

}

Then add the styles to create the horizontal navigation in the header:

html5_aria/homepage/stylesheets/style.css

#header{

width:100%;

}

#header>nav>ul, #footer>nav>ul{

list-style:none;

margin:0;

padding:0;

}

#header>nav>ul>li, #footer>nav>ul>li{

padding:0;

margin:0 20px0 0;

display:inline;

}

And finally, style the footer so it sits at the bottom and so its text is centered.

html5_aria/homepage/stylesheets/style.css

footer#footer{

clear:both;

width:100%;

display:block;

text-align:center;

}

Now let’s see what we can do about making the inner content change when

we click one of our links.

report erratum • discuss

Creating an Accessible Updatable Region • 101

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