HTML5 and CSS3, Second Edition

(singke) #1
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>

Free download pdf