O'Reilly logo

Sams Teach Yourself CSS in 10 Minutes by Russ Weakley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required