Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 164

Exploring Selector Patterns
Tammy has examined your work on color styles from the last session and asks that you
create another color style for h1 headings. She suggests that you display the text of your
h1 headings in white on a sky blue background.

To format h1 headings:

◗

1. Return to the sa_styles.css file in your text editor.
◗

2. Directly above the style rule for h2 headings, insert the following style rule, as
shown in Figure 3-17:

h1 {
background-color: rgb(125, 186, 240);
color: white;
}

Figure 3-17 Creating a style for h1 headings

display h1 headings in white
on a sky blue b ackground

◗

3. Save your changes to the file and then reload the home.htm file in your Web
browser. Figure 3-18 shows the revised appearance of the page.

Figure 3-18 Effect of the h1 style rule

sky blue
backgrou n d added
to the company logo

formatted h1 heading

Tammy notices that the sky blue background has been added to the Welcome text in
the h1 heading, but it also has been added to the company logo. A quick investigation of
the HTML code reveals that the logo itself is also within an h1 heading:

<header>
<h1>
<img src=”salogo.png” alt=”Sunny Acres” />
</h1>
</header>
Tammy doesn't want all h1 headings formatted the same way. To specify which h1
headings receive a sky blue background and which ones don't, you have to modify the
selector in the style rule you just entered.