Sams Teach Yourself CSS in 10 Minutes

Chapter 18. Creating a Site Header

In this lesson, you will learn how to set up and style a site header using an <h1> element, an image, and a list.

Setting Up the HTML Code

The HTML code for this lesson is comprised of three main components: a <div> element, which helps define the header section semantically; an <h1> element; and a <ul> element for navigation as shown in Listing 18.1.

Example 18.1. HTML Code Containing the Markup for the Site Header

<div id="container"> <h1> <a href="/"><img src="header.jpg" alt="Sitename"a></a> </h1> <ul id="topnav"> <li><a href="#">Skip to content</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Staff</a></li> <li><a href="#">Portfolio</a></li> ...