Section 3.8. Tutorial: Selector Sampler

3.8. Tutorial: Selector Sampler

In the rest of this chapter, you'll create a variety of selector types and see how each affects a Web page. This tutorial starts with the basic selector types and then moves on to more advanced styles.

To get started, you need to download the tutorial files located on this book's companion Web site at www.sawmac.com/css/. Click the tutorial link and download the files. All of the files are enclosed in a ZIP archive, so you'll need to unzip them first. (Detailed instructions for unzipping the files are on the Web site.) The files for this tutorial are contained inside the folder named chapter_03 .

INDIGNANTLY ASKED QUESTION
Keeping It Internal

Hey, what's up with the internal style sheet in this tutorial? Chapter 2 recommends using external style sheets for a bunch of reasons .

Think you're pretty smart, eh? Yes, external style sheets usually make for faster, more efficient Web sites, for all the reasons mentioned in Chapter 2 . However, internal style sheets make your life easier when you're designing a single page at a time, as in this tutorial. You get to work in just one Web page file instead of flipping back and forth between the external style sheet file and the Web page.

Furthermore, you can preview your results without constantly refreshing your browser's cache; flip back to the box in Section 2.5.1 for more on that quirkiness.

Many hotshot Web designers like to begin their designs with an internal style sheet, since it's faster and it avoids any problems with all that cache nonsense . Here's their secret: Once they've perfected their design, they simply copy the code from the internal style sheet, paste it into an external style sheet, and then link the style sheet to their site's pages as described in Section 2.4.2.

Open selector_basics.html in your favorite text editor .

This page is made of very basic HTML tags. The most exciting thing about it is the graphic banner (see Figure 3-7). But you'll liven things up in this tutorial. You'll start by adding an internal style sheet to this file.

Figure 3-7. Plain HTML looks cold and monotonous in a Web browser. But with a little CSS, you can turn drab (left) into fab (Figure 3-10) in 31 easy steps.
Click directly after the closing </title> tag, hit Return and type < style type="text/css" > .

This is the opening style tag, which lets a Web browser know that the information that follows is Cascading Style Sheet instructions. The HTML should now look like this (the stuff you added is in bold):
```
 <title>Selector Basics</title>  <style type="text/css">  </head> 
```
Type selectorssuch as the tag selector you're about to createare the most basic type of selector. (If you completed the tutorial in the last chapter, you've already created a few.)
Press Enter (Return), and then type p {

To create a tag selector, simply use the name of the HTML tag you wish to format. This style applies to all paragraphs of text within <p> tags.
Hit Return again and add the following four CSS properties to supply the style's formattingcolor, size , font, and left indent :
```
 color: #5f9794; font-family: "Century Gothic", "Gill Sans", Arial, sans-serif; font-size: 1em; margin-left: 50px; 
```
Press Enter (Return) to place each CSS property on its own line. It's also a good idea to visually organize your CSS code by indenting each property with the Tab key.

Note: These property names and their values may look unfamiliar. For now, just type them as is. You'll learn what 1em and 50px mean, along with all the ins and outs of text formatting properties, in Chapter 6.
Complete this style by pressing Enter (Return) and then typing a closing bracket (}), which marks the end of the style. Your completed style should look like this :
```
 p {  color:#5f9794;  font-family: "Century Gothic", "Gill Sans", Arial, sans-serif;  font-size: 1em;  margin-left:50px; } 
```
Finally, you'll add the closing <style> tag to complete the style sheet.
Hit Return to create a new, blank line and type </ style > .

Your style sheet's complete. Time for a look-see.
Open the page in a Web browser to preview your work .

Unless you tinker with the preference settings, most browsers display black text in a standard serif font like Times. If your CSS style works properly, then you should see seven indented paragraphs in a sans-serif font in an attractive dark teal color (see Figure 3-8).

3.8.1. Creating a Group Selector

Sometimes several different elements on a page share the same look. For instance, you may want all your headings to have the same font and color for a consistent style. Instead of creating separate styles and duplicating the same property settings for each tag<h1>, <h2>, and so onyou can group the tags together into a single selector.

Return to your text editor and the selector_basics.html file .

You'll add a new style below the <p> tag style you just created.

Figure 3-8. A simple tag selector can completely transform the appearance of every instance of a tag, making quick work of styling all the paragraphs of text on a page.
Click at the end of the closing brace of the tag selector, press Enter (Return) to start a new line, and then type h1, h2, h3 { .

As explained earlier in this chapter, a group selector is simply a list of selectors separated by commas. This rule applies the same formatting, which you'll add next , to all <h1>, <h2>, and <h3> tags on the page.
Hit Return, and then add two CSS properties :
```
 color: #102536; font-family: Georgia, Times, serif; 
```
You're adding some basic text formatting options, just as you did in the previous steps.
Finally, hit Enter (Return), and then type the closing brace to complete this style. It should look like this :
```
 h1, h2, h3 {  color:#102536;  font-family: Georgia, Times, serif; } 
```
Save the file, and preview it in a Web browser .

The <h1> heading near the top of the page and the <h2> headings introducing each of the three sections all have the same font and font color.

3.8.2. Creating and Applying a Class Selector

Tag selectors are quick and efficient, but they're a bit indiscriminate in how they style a page. What if you want to style a single <p> tag differently than all the other <p> tags on a page? A class selector is the answer.

Return to your text editor and the selector_basics.html file .

Add a new style below the group selector style you just created.
Click at the end of the closing brace of the h1, h2, h3 selector, press Enter (Return), and then type .note { .

This style's name, note , indicates its purpose: to highlight paragraphs that contain extra bits of information for your site's visitors . Once you create a class style, you can apply it wherever these notes appearlike the second paragraph, in this case.

Hit Return, and then add the following list of properties to the style :

 font-size: .85em; color: #294e56; margin: 0 100px; padding: 10px; border: 1px solid #73afb7; background-color: #fbef99;

Finally, complete the style by pressing Return and typing the closing brace. The completed class style should look like this :
```
 .note {  font-size: .85em;  color:#294e56;  margin: 0 100px;  padding: 10px;  border: 1px solid #73afb7;  background-color: #fbef99; } 
```
If you preview the page now, you see no changes. Unlike tag selectors, class selectors don't have any affect on a Web page until you apply the style in the HTML code.
In the page's HTML, locate the <p> tag that begins with the word "Note:" inside <strong> tags .

To apply a class style to a tag, simply add a class attribute, followed by the class selector's namein this case, the .note style you just created.
Click just after the "p" in the <p> tag, and then type a space followed by class="note" . The HTML should now look like this (what you just typed is in bold) :
```
 <p  class="note"  ><strong>NOTE:</strong> Lorem ipsum dolor 
```
Be sure not to type class=".note" . In CSS, the period's necessary to indicate a class style name; in HTML, it's verboten.

Note: Despite the name, there's no reason you can't add this class to other tags as well, not just the <p> tag. If you happen to want to apply this formatting to an <h2> tag, for example, then your HTML would look like this: < h2 class= " note ">.
Save and preview the Web page in a browser .

The note paragraph is nicely highlighted on the page (see Figure 3-9).

Figure 3-9. You can make detailed formatting changes with class selectors. A class style gives this one paragraph different formatting from all other paragraphs on the page, making it stand out as a distinctive note.

Note: If your page doesn't look like Figure 3-9, then you may have mistyped the name of a property or its value. Double-check your code with the steps in Section 3.8.2. Also, make sure to end each declarationproperty:value combinationwith a semicolon and conclude the style with a closing brace at the very end. When your style's not working correctly, missing semicolons and closing braces are frequent culprits.

3.8.3. Creating and Applying an ID Selector

You can apply class selectors to multiple elements on a page. For example, you can use the note class you made in the previous exercise to create any number of notes on a page. ID selectors look and act just like classes, but you can apply an ID only once per page. Web designers frequently use ID selectors to indicate unique sections of a page, as explained in Section 3.1.

In this exercise, you'll create a style that sets a specific width for a Web page's content, and centers it in the middle of the browser window. Once you create the ID selector, apply it to the page using a <div> tag.

Return to your text editor and the selector_basics.html file .

Add a new style below the .note class style you created before.
Click after the previous style's closing bracket (}), hit Return or Enter to create a new line, and then type # wrapper {

ID selectors always begin with the pound symbol (#). The style's name indicates its role on the page: Use it to wrap all of the other content on the page, as though you're boxing it up. That way, the set width and other formatting apply to the entire package.
Hit Return again, and then type :
```
 width:680px; margin: 0 auto; padding: 0 20px; border-left: 1px solid #666666; border-right: 1px solid #666666; 
```
These properties provide a width for the content, set the margins so the content floats in the center of the Web browser, and add a little space between the page content and left and right border lines.
Finish the style by typing the closing brace. The whole thing should look like this :
```
 #wrapper {  width:680px;  margin: 0 auto;  padding: 0 20px;  border-left: 1px solid #666666;  border-right: 1px solid #666666; } 
```
Just as with a class, this style doesn't do anything until you apply it to the page. So you'll add a <div> tag to the page's HTML, delineating where you want the ID style to apply.
Find the page's opening <body> tag. Click after the tag's closing >, and then hit Enter .

You'll place the opening <div> tag here, before the contents of the page.
Type < div id="wrapper" > .

The <div> appears between the <body> and <h1> tags, like so:
```
 <body>  <div id="wrapper">  <h1><img src="images/logo.gif" alt="CosmoFarmer 2.0" width="553" height="70" /> 
```
Next, you'll close the <div> tag to indicate the end of the wrapper.
Scroll down the page until you find the last paragraph on the pagethe one containing the copyright notice. Click after the closing </p> tag, hit Return, and then type </ div > .

The closing </div> is sandwiched between that last paragraph and the closing </body> tag:
```
 <p>Copyright 2006, <a href="http://www.cosmofarmer.com/"> CosmoFarmer.com </a></p>  </div>  </body> 
```
Save the page, and preview it in a browser .

Everything on the page, the CosmoFarmer logo and all of the text, now have a set width and float in the center of the browser window (see Figure 3-10). Even if you resize the browser window (try it!), the content remains centered.

Note: Internet Explorer 5 for Windows, won't center the content on the page as described in step 8. It requires a little more work to accomplish that. You won't find specific instructions on how to do that here, but you'll find a detailed explanation of how to center a page in IE 5 starting in Section 11.1.

3.8.4. Creating a Descendent Selector

On the selectors_basics.html page, you see a couple of words inside the <h2> tags that require special emphasis. The page's HTML uses the <strong> tag to indicate these special words, but since browsers automatically make headings and <strong> tags bold, you can't see any difference when you preview the page in a Web browser. How can you make those words stand out from the rest of the headingwithout messing up all the other <strong> tags on the page?

Figure 3-10. The page is really coming together now. The left and right border lines, as well as the set width, create a solid looking page.

As you saw earlier in this chapter, CSS provides a simple solution for targeting just the <strong> tags that appear inside those headingsdescendent selectorsand now's your chance to see one in action.

Return to your text editor and the selector_basics.html file. Create a new empty line for the descendent selector style .

If you just completed the previous steps, click after the closing brace of the # wrapper style, and then hit Enter (Return).
Type h2 strong {

The last tag in the selector strong is the element you ultimately want to format. In this case, the style formats the <strong> tag only when it's inside an <h2> tag. It has no effect on <strong> tags inside paragraphs, lists, or <h1> tags, for example.
Hit Enter (Return), type color: red ;, and then hit Enter (Return) again to create another blank line. Finish the style by typing the closing brace character .

The finished style should look like this:
```
 h2 strong {  color: red; } 
```
Save the page and preview it in a Web browser .

The word "Before" should appear red in the first <h2> heading, as should the words "Excellent" and "Heavy" in the other two headings.

Descendent selectors are among the most powerful CSS tools. Professional Web designers use them extensively to target particular tags without littering the HTML with CSS classes. You can learn a lot more about descendent selectors in Chapter 14.

Note: You can see a completed version of the page you've just created in the chapter_03_finished folder.