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
</h1>

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

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.