Introducing Classy Classes and Other Selectors

In this section, you take a closer look at how style rules are put together and how each style rule knows which element on your page to style. If this information seems like a lot to take in, bear with us. We show you a little later in this chapter how to put your new knowledge to use, to work with the style rules that Expression Web writes for you and to write your own style rules from scratch.

A style rule isn't much use if it doesn't know what to style. To figure out which thingy gets which styling, CSS uses selectors. A selector is the part of the style rule that tells it what to format, just like we tell our paintbrush-brandishing kids what they can paint on.

Element-based style rules

Style rules can apply to HTML elements, like the examples we show in this section. These are element-based style rules. In each case, the selector (the item being formatted, or targeted, by the style rule) is an HTML element:

GLANCE AT THE CODE 

Here's a style rule that applies the Georgia font to all first-level headings:

 h1 {            font-family: Georgia; } 

In this style rule, h1 is the selector, referring to the HTML element <h1>, and affects all the content between the <h1> and </h1> tags.

The following style rule applies the Georgia font to all paragraphs:

 p {            font-family: Georgia; } 

In this style rule, p is the selector, referring to all content between the HTML tags <p> and </p>.

In Expression Web, element-based style rules appear in the Apply Styles task pane list under the heading Contextual Selectors. If you know that you want a specific HTML element to look a certain way, you would create in Expression Web a style rule that targets that type of element (for example, a first-level heading or paragraph). Expression Web doesn't create an element-based style automatically. See the section "Creating a style rule from scratch," later in this chapter, for the details about how to create your own style rules.

Tip 

For a chart of the most common HTML elements and their tags, take a look at Chapter 14.

Anatomy of a style rule

Here's an X-ray view of a style rule, with its various parts on display.

Expression Web writes style rules on separate lines, like this:

 selector { property: value; property: value; } 

The advantage of this format is that each style declaration appears on a separate line, making the declarative block easy to read and modify. You can just as easily write a style rule on one line, like in the diagram.

You can change the way Expression Web writes style rules by choosing Tools Page Editor Options and then clicking the Code Formatting tab and changing the options in the CSS area.

Class-based style rules

GLANCE AT THE CODE 

Now we get more specific. The following style rule colors in red any HTML element that contains the attribute/value pair class=“warning” in its HTML tag (#FF0000 is the hexadecimal code for red; see the sidebar "Hexa-what? How CSS understands color," later in this chapter):

 .warning {            color: #FF0000; } 

This is a class-based style rule. The period in .warning indicates that the style rule applies to an HTML tag containing the attribute class, and warning matches the attribute's value (class=“warning”). Here are some HTML elements with class=“warning” in them:

A paragraph:

 <p >Never cross the street without looking           both ways!</para> 

A second-level heading:

 <h2 >Watch for snakes!</h2> 

An unordered list:

 <ul >           <li>Always look both ways</li>           <li>Never cross when the light is red</li>           <li>Do not assume cars can see you</li> </ul> 

Notice that it doesn't matter what the HTML element is. As long as it has class=“warning” in its tag, it's colored red.

If you want to change the color of every element with class=“warning” (for example, from red to blue), you simply change the color property value in the style rule (from #FF0000 to #0000FF, the hexadecimal number for blue).

When you format elements on your Web page, Expression Web automatically writes most formatting information as class-based styles with generic class values, such as style1, style2, and so on. Expression Web makes it easy to change automatic class-based styles and write your own style rules. We show you how to tweak automatic style rules and write your own, in the section "Performing Common Style-Rule Maneuvers," later in this chapter.

Hexa-what? How CSS understands color

When you look at color values in CSS, you notice that some CSS books and Web sites refer to colors by name: red, green, blue. Some even get more specific: CornflowerBlue and Khaki. But when you look at the color properties that Expression Web writes in style rules, you see six-digit letter-number combinations, like this: #FF0000 (red), #0000FF (blue), #008000 (green), #6495AD (CornflowerBlue), and #F0E68C (Khaki). These letter-number combinations are hexadecimal numbers. Hexadecimalnumbers describe every one of the 16,777,216 colors that a modern computer monitor can display with a unique combination of letters and numbers. Wow!

Hexadecimal color numbers are sometimes abbreviated to three digits, like this: #FFF (white) or #000 (black). You can abbreviate a hexadecimal color number onlyif the two digits repre senting eachcolor value are the same (the full color value for white is #FFFFFF; black is #000000).

Although all browsers understand the same set of basic color names (the Standard Colors set shown in many color areas of Expression Web and other Microsoft programs), all browsers understand hexadecimal numbers, so you should specify color values by hexadecimal number. A great color gizmo for picking Web colors is at http://www.febooti.com/products/iezoom/online-help/online-color-chartpicker.html. If you use Photoshop Elements as your graphics program, the Color Picker feature tells you a color's hexadecimal number, too. (See Photoshop Elements For Dummies, by Barbara Obermeier and Ted Padova (Wiley), for a detailed look at this program.) And, if you feel like geeking out over the finer points of color for the Web, check out the Wikipedia explanation at http://www.en.wikipedia.org/wiki/Web_colors or Web Design For Dummies, by Lisa Lopuck (Wiley).

ID-based style rules

ID-based style rules come in handy when you're using CSS to position HTML elements on your page, which we get to in Chapter 8. Whereas class is used to identify a group of elements, id identifies a unique element on a page.

GLANCE AT THE CODE 

Here's an example of an ID-based style rule that sets the font size for the element on the page that has id=“copyright” in its HTML tag. ID-based style rules always have the symbol # preceding their name:

 #copyright {           font-size: xx-small; } 

Here's the style rule applied to a paragraph on the Web page with the attribute/value pair id=“copyright”:

 <p > Copyright 2006. All rights           reserved.</para> 

Pseudo classes and other selectors

TECHNICAL STUFF 

In addition to elements, classes, and IDs, all sorts of other selectors-and ways to combine selectors-let you target content precisely with your style rules. For example, a:active, a:hover, a:link, a:visited are pseudo classes; they allow you to set different properties for each of the four hyper-link states. (We talk about hyperlinks in Chapter 4.) The selector p.warning shows you how you can combine selectors to target only those paragraphs (p) that have class=“warning” in their tags.

Check out your favorite CSS reference book for more information about selectors. (We list some of our favorite CSS resources in the sidebar "Miles of styles," earlier in this chapter.)