CSS: The Missing Manual

Tutorial: Styling Links

In this tutorial, you'll style links in a variety of ways, like adding rollovers and background graphics. You'll also create both vertical and horizontal navigation bars.

To get started, download the tutorial files from this book's companion Web site at http://www.sawmac.com/css/. Click the tutorial link and download the files. All the files are enclosed in a ZIP archive, so you need to unzip them first. (You'll find detailed instructions on the Web site.) The files for this tutorial are contained inside the chapter_09 folder.

Basic Link Formatting

1. Launch a Web browser and open the file chapter_09 → links → bathtub.html .

   As usual, you'll be working on a page from CosmoFarmer.com. This page contains a variety of links (circled in Figure 9-11) that point to other pages on the site, links to pages on other Web sites, and an email address. Start by changing the color of the links in the main content area of this page.

2. Open bathtub.html in a text editor and place your cursor between the opening and closing <style> tags.

   The page already has an external style sheet attached to it with some basic formatting, plus the <style> tags for an internal style sheet.

3. Add a new style to the internal style sheet:

   	<style type="text/css">#main a {
   	    color: #8C1919;
   	}
   	</style>

   This descendent selector changes the color of all <a> tags that are inside tags that have an ID of #main. The main body text on the page is wrapped in a <div> tag with an ID of #main. Adding and naming a ...