Designing with CSS – Part 1: Understanding CSS Design Concepts

ID, Class, and Descendant Selectors

In the previous section I reviewed the parts of a CSS rule. I now take you through some of the more commonly used selectors and look at how they are used.

The ID Selector

I begin by defining a div with an ID selector. The div you define here is a container or wrapper div. Using a wrapper div is a common practice in CSS positioning, and we will look deeper into how they work later in Part 3. The ID selector is preceded by the pound sign (#) within your style sheet (see Listing 1). The margins you set should be somewhat familiar to you from the way you set up your body margins earlier. I am using a pairs value to declare the settings. As you can see, the top and bottom will be zero.

#wrapper {
width: 770px;
margin: 0 auto; 
}

Listing 1. Wrapper ID selector

The auto value may be new to you, so let me explain. When you progress to laying out your first CSS positioning document in Part 3, you will create a fixed-width layout. The width of your container or wrapper div will be 770 pixels to ensure that you have no horizontal scrolling for your viewers who have set their browsers to an 800-pixel-wide resolution. The margin value of auto is applied to the left and right sides of the wrapper div. This means that regardless of the users' browser window width, the page content is always centered horizontally. The space on either side of the fixed-width wrapper div is distributed evenly by the auto pairs value in your style sheet. You will see how these values are set in the Creating an ID Selector demo at the end of this section.

The pound sign (#) in your style sheet indicates that your wrapper div is an ID selector. However, it is not used when you reference the ID selector from within your XHTML code. If you were inserting the wrapper div into your XHTML document, you would reference it as shown in Listing 2.

<div id="wrapper">
Our wrapper div content
</div>

Listing 2. ID referenced in HTML, as opposed to how it is written in the CSS file

As you can see, you reference the wrapper by using id="wrapper". The properties and values you set for your wrapper div within your style sheet are now applied to the wrapper div in your XHTML code.

Caution: You can only use an ID selector name once in your XHTML document. For example, if you defined an ID selector in your style sheet and then reused that selector name on an image swap behavior within the same document, you will get some very odd behavior.

Play the demo: Creating an ID Selector

Here are the steps reviewed in the demo:

1. Click the New CSS Style button in the CSS Styles panel. The New CSS Style dialog box opens.
2. For Selector Type, click the Advanced option.
3. Name the ID selector #wrapper. When you create an ID selector, you type the name into the Selector field. An ID selector is always preceded by the pound (#) sign.
4. Ensure that you have external.css selected in the Define In pop-up menu.
5. Click OK.
6. Select the Box category.
7. Deselect the Same for All option in the Margin section.
8. In the Top text box, enter 0.
9. In the Right text box, enter auto.
10. In the Bottom text box, enter 0.
11. In the Left text box, enter auto.
12. Select the Border category.
13. Deselect the Same For All option in the Style area. You are going to add a 1 pixel solid black border to the left and right sides of your #wrapper ID.
14. Select Solid from the Right and Left pop-up menus for the border style.
15. Deselect the Same For All option in the Width section.
16. Enter 1 in the Right and Left text boxes for the border width.
17. Deselect the Same For All option in the Color section.
18. Enter #000000 in the Right and Left text boxes for the border color.
19. Select the Positioning category.
20. Select Relative from the Type pop-up menu.
21. Click OK.
22. Open the external.css file. You will now see the newly created #wrapper rule.
23. Select the File > Save to save the external.css file.

Your #wrapper selector is now in the CSS Styles panel.

The Class Selector

Unlike the ID selector, the class selector can be used as often as you need within your XHTML document. The class selector is preceded by a period (.) within your style sheet (see Listing 3).

.leftimage {
margin-right: 15px;
margin-bottom: 5px;
}

Listing 3. Class selector

The period (.) in the style sheet indicates that the rule is a class selector. However, the period is not used when you reference the class selector from within your XHTML code. For example, if you were inserting the leftimage class into your XHTML document, you would reference it as shown in Listing 4.

<img src="images/mypic.jpg" alt="some text " width="145" height="180" class="leftimage" />

Listing 4. Referencing a class selector within XHTML

The final outcome is the same whether you use a class selector or an ID selector. Because you will need to apply the settings you have declared within your rule on many occasions, and often more than once in the same document, you really need this rule to be a class selector instead of an ID selector.

Play the demo: Creating a Class Selector

Here are the steps from the demo:

1. Click the New CSS style button in the CSS Styles panel. The New CSS Style dialog opens.
2. For Selector Type, click the Class option.
3. Name your class selector .leftimage. A class name is always preceded by a period.
4. Ensure that the external.css style sheet is selected.
5. Click OK.
6. Select the Box category.
7. Deselect the Same For All option in the Margin section.
8. Give the Right margin a value of 15.
9. Give the Bottom margin a value of 5.
10. Click OK.
11. Open the external.css file and view your .leftimage class rule.
12. Select File > Save to save the external.css file.

The .leftimage class appears in the external.css tree in the CSS Styles panel.

Pattern Matching and the Descendant Selector

The descendant selector is a powerful way to target specific elements within specific areas of your XHTML documents. Using a descendant selector, you could, for instance, easily target any em elements that reside within p elements. There is no need to create a separate class and then apply it to the <em> tags. You can simply target them from the style sheet. There is a space between each element within the descendant selector (see Listing 5). A descendant selector works in much the same way as the forward slash (/) does in a folder hierarchy within a URL.

p em {
color: #990000;
}

Listing 5. Descendant selector applying to em elements within p elements

The rule shown in Listing 5 says, Find p elements and if those p elements contain em elements, change the text color to #990000.

For any em elements that exist outside a p element, or within a different element, the pattern is broken and the text color change is not applied. The descendant selector allows you to pattern-match your XHTML documents and to be very specific as to how you affect elements with any given rule.

Play the demo: Creating a Descendant Selector

Here are the steps reviewed in the demo:

1. Click the New CSS style button in the CSS Styles panel. The New CSS Style dialog box opens.
2. For Selector Type, click the Advanced option.
3. In the Selector text box, enter p em. Notice the space between the two elements. This is important; this space is known as a descendant combinator.
4. Ensure that the external.css style sheet is selected.
5. Click OK.
6. Select the Type category in the CSS Style Definition dialog box that opens.
7. Enter #990000 in the Color text box.
8. Click OK. Your newly created descendant selector appears in the external.css file.
9. Select File > Save to save the external.css file.

The descendant selector has been added to the external.css tree in the CSS Styles panel.

Redefining a Selector

Review the Defining the h1 Type Selector demo and then create a new rule in your external.css file. Redefine the p element and give one property and value pair. Set the property to font-size and set the value to 80% (see Listing 6).

p {
    font-size: 80%; 
}

Listing 6. Redefined p rule

Conclusion

If you were totally new to CSS at the beginning of this tutorial, you have come far. You have seen how you can use Dreamweaver MX 2004 to create an external style sheet and link that style sheet to documents within your website. You have learned about selectors and how to create them.

Specifically, you have looked at:

• Redefining elements with the Type selector
• Creating ID selectors
• Creating class selectors
• Creating descendant selectors
• Zeroing off your body element

In Part 2 you will explore CSS further and look at how your document interacts with the relevant CSS Styles panel to make editing CSS a breeze in the Design view. You will look at avoiding a common pitfall or two and lay the foundations further to create your first CSS positioning layout, which I cover in Part 3.

The CSS rules you have created in this tutorial will be put to good use as you work your way through this series. I hope that you now have a good understanding of how to create CSS rules using the Dreamweaver design panels.

Designing with CSS – Part 2: Defining Style Properties and Working with Floats

Page 5 of 5

Previous Page