Chapter 8. Styling a Flexible Heading

In this lesson, you will learn how to create a border above and below a heading, add a continuous gradient background image, and style the text with text-transform and letter spacing.

Styling the Heading

To style this heading, you will need a selector that targets the <h1> element. To make sure you don’t target every <h1> on the page, you should also include a unique identifier, such as header, within the selector (see Listing 8.1).

Example 8.1. CSS Code Showing the Selector to Style the Heading

h1#header {...}

The HTML code used for this heading is shown in Listing 8.2.

Example 8.2. HTML Code Containing the Markup for a Heading

<h1 id="header">
    Page Heading

Get Sams Teach Yourself CSS in 10 Minutes now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.