Section 6.6. Class Selectors

6.6. Class Selectors

So far, you've seen how to apply formatting rules on a tag-by-tag basis. These selectors are called type selectors . They apply formatting by matching every occurrence of an HTML tag. The only exception is inline styles (Section 6.1.2), which act only on the tag where they're placed.

Type selectors are powerful, but not that flexible. Sometimes you need a little more flexibility to modify whole sections or small portions of an HTML document. Fortunately, style sheets have the perfect solution with class selectors .

Class selectors are one of the most practical style sheet tricks around. They allow you to separate your rules from your tags, and use them wherever you please . The basic idea is that you separate your Web page content into conceptual groups, or classes . Once you've taken this step, you can apply different formatting to each class. The trick is, you choose where you want to use each class in your Web page. For example, you might have two identical <h1> headings, but give them separate classes so the formatting is different for each heading.

For a more detailed example, consider the page shown in Figure 6-15. In the following sections, you'll work with this example to apply class-based style rules.

6.6.1. Creating Class Rules

To use classes, begin by mentally dividing your page into different kinds of content. In this case, it makes sense to create a specialized class for book reviews, and the author byline.

Figure 6-15. In the average HTML document, you have a sea of similar tagseven a complex page often boils down to just headings and paragraph tags. This page has a general introduction followed by a series of book reviews. The general introduction, the author credits, and the book summaries are all marked up with <p> tags, but they shouldn't be formatted in the same way, because they represent different types of content. Instead, a better system would be one in which each different type of content (title, author, or description) gets formatted in a different way.


To create a class-specific rule, you use a two part name , like this:

 p.review {            } 

The first part of the name indicates the tag that the rule applies toin this case, the paragraph tag. The second part (the part after the period) is the class name. You can choose whatever class name you want, as long as you stick to letters , digits, and dashes, and make sure the first character is always a letter.

The point of the class name is to provide a succinct description of the type of content you want to format. In this example, the class name is review, because it's going to be applied to all the paragraphs that contain the actual reviews.

So how does the browser know when to apply a rule that uses a class selector? It turns out that class rules are never applied automatically. Instead, it's up to you to add the class name to the appropriate tags using the class attribute in your HTML file. Here's an example that links a paragraph to the review class:

 <p class="review">The actual review would go right here.</p> 

As long as the class name in the tag matches the class name in the style sheet, the browser applies the formatting.


Note: Class rules work in addition to any other rules. For example, if you create a rule for the <p> tag, that rule applies to all paragraphs, including those that are part of a specialized class. However, if the class rule conflicts with any other rules, the class rule wins.

Here's the complete style sheet you might use to format the book review page:

 /* Set the font for the whole page. */ body {       font-family: Georgia,serif;     } /* Set some standard margins for paragraphs. */     p {       margin-top: 2px;   margin-bottom: 6px;     } /* Format the heading with a background color. */ h1 {       background-color: #FDF5E6;   padding: 20px;   text-align: center;     } /* Make the bylines small and italicized. */ p.byline {       font-size: 65%;   font-style: italic;   border-bottom-style: outset;   border-bottom-width: 1px;   margin-bottom: 5px;   margin-top: 0px;     } /* Make book reviews a little smaller, and justified. */ p.review {       font-size: 83%;   text-align: justify;     } /* Make the review headings blue. */ h2.review {       font-size: 100%;   color: blue;   margin-bottom: 0px;     } 

This style sheet includes three type selector rules. The first formats the <body> tag, thereby applying the same font to the whole Web page. The second gives every <p> tag the same margins, and the third changes the alignment and background color of <h1> headings. Next, two new paragraph classes are definedone for the byline, and one for the review body. Lastly, a class is created for the review headings.

This example also introduces another featureCSS comments. CSS comments don't look like HTML comments. They always start with the characters /* and end with the characters */. Comments allow you to document what each class represents. Without them, it's all too easy to forget what each style rule does in a complicated style sheet.

And here's how the page applies the classes in the style sheet. (To save space, most of the text is left out, but the essential structure is still here.)

 <html> <head> <link rel="stylesheet" href="PessimistReviews1.css"            type="text/css" >          <title>The Pessimist</title>     </head> <body>          <h1>The Pessimist's Review Site</h1>  <p></p>  <p></p>  <br>  <h2  class="review"  >How To Lose Friends and Fail in Life</h2>  <p  class="byline"  >Chris Chu</p>  <p  class="review"  ></p>  <h2  class="review"  >Europe 2005: Great Places to Miss</h2>  <p  class="byline"  >Antonio Cervantes</p>  <p  class="review"  ></p>     </body> </html> 

Figure 6-16 shows the result.

Figure 6-16. Class rules allow you to format different parts of a document differently, even if they use the same tag (like the ever-common <p> tag).



Tip: Creating style sheets is an art and takes a fair bit of practice. To make the best use of them, you need to become comfortable with class rules. Not only do class rules give you complete flexibility, they also help you think in a more logical, structured way about your Web site.

6.6.2. Saving Work with the <div> Tag

It can get tedious to apply the class attribute to every tag in your Web page. Fortunately, there's a great shortcut, courtesy of the <div> tag.

You may remember the <div> tag from the last chapter (Section 5.2.7). It lets you group together arbitrary sections of your Web page. You can put as many elements in the <div> tag as you want, including headings, paragraphs, lists, and more.

Thanks to style sheet inheritance, if you apply a class name to the <div> tag, it's automatically applied to all the nested elements. That means you can change this:

 <p class="review"></p> <p class="review"></p> <p class="review"></p> 

into this:

 <div class="review">          <p></p>  <p></p>  <p></p>     </div> 

This works because of style sheet inheritance (Section 6.1.6). Essentially, when you format the <div> tag, all the <p> tags inside of it inherit the settings. And although there are some settings that can't be inherited in this way (like margin and padding), most can. Figure 6-17 shows this example.

The <div> tag is a great way to save loads of time. Web gurus use it all the time.

6.6.3. More Generic Class Rules

You can also create a rule that has a class name but doesn't specify a tag name. All you need to do is leave the first part of the selector (the portion before the period) blank. Here's an example:

 .emphasize {       color: red;   font-weight: bolder;     } 

The great thing about a rule like this is that you can use it with any tag, as long as you use the right class name. In other words, you can use it to format paragraphs, headings, lists, and more with bold, red lettering. The class name reflects this more general-purpose use. Instead of indicating the type of content, it indicates the type of formatting.

Figure 6-17. In this example, each review is wrapped in a <div> tag. The <div> tag applies a background color and some borders, separating the reviews from the rest of the page. Techniques like these can help organize dense pages with lots of information.


Most Web designers use both tag-specific class rules, and more generic class rules. Although you could stick exclusively with generic rules, if you know that a certain set of formatting options will only be used with a specific tag, it's good to clearly indicate this fact with a tag-specific rule. That way, you won't forget the purpose of your rule when you edit your Web site later on.

6.6.4. Creating a Style Sheet for Your Entire Web Site

Class rules aren't just useful for separating different types of content. They also come in handy if you want to define the rules for your entire Web site in a single style sheet.

In a typical Web site, you'll have pages or groups of pages that need to be formatted differently. For example, you might have several pages that make up an online photo gallery, another group of pages chronicling your trip to Guadeloupe, and a separate page with your r sum . Rather than create three style sheets, you can create a single style sheet that handles everything. The trick is to use different class names for each section. In other words, you'll create a r sum class, a trip diary class, and a photo gallery class. Here's a basic outline of this approach:

  /* Used for the resume pages. */  p.resume { } h1.resume {  } h2.resume {  }  /* Used for the trip diary pages. */  p.trip {  } h1.trip {  } h2.trip {  }  /* Used for the online photo gallery. */  p.gallery {  } h1.gallery {  } h2.gallery {  } 

Obviously, each page will use only a few of these rules. However, it's often easier to maintain your site when you keep your styles together in one place.



Creating Web Sites. The Missing Manual
Creating Web Sites: The Missing Manual
ISBN: B0057DA53M
EAN: N/A
Year: 2003
Pages: 135

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net