12.2. Defining Style Rules for Specific Elements You can divide the elements of a web page into two broad categories: layout elements, like table cells and layers; and content elements, like text and images. Both types can receive appearance attributes from a Cascading Style Sheet, which may lead you to wonder when to apply a style rule to a layout element and when to apply the rule to the content. Applying style rules directly to the elements of your layoutthat is, your table cells or layersmakes good sense in situations like these: You want to set the background color of an area of your layout. You want to control the amount of padding in the main content area or sidebar. You want to add margins to the main content area or sidebar. You want to draw a visible border around an area of your layout.
| BEST BET | Create a style rule for a layout element specifically when you want to control the appearance of the layout itself, not the content that goes inside the layout. |
Notice that, in all of the above, you're defining the appearance of the layout itself, not the appearance of the content that goes into the layout. These appearance attributes remain the same, in other words, no matter what type of content you happen to place inside the table cell or layer. By contrast, whenever you want to control the look of the content itself and not its container, you're usually better off creating style rules specifically for the content element. In other words, if the style rule stays the same no matter where the content happens to appear in the layout, then you should attach the style rule to the content element. | BEST BET | Create a style rule for a content element specifically when you want to control the look of the content, no matter where it happens to appear in your layout. |
Content-type styles are more common overall. However, right now, most of the elements in your Dreamweaver template fall into the layout category. You may have a few content elements, like the list of secondary nav links at the bottom of the main content area, but not many. Rest assured, this number will increase dramatically when you get into Part 3 of this book. For now, you'll look at one example of a content-type style in "Creating a Style for a Content Element" a little further on in this chapter, just so you see how it's done. You'll go on to create styles for other types of content elements throughout the rest of this book. 12.2.1. Creating a Style for a Layout Element Assume that you want to add some padding to the main content area to prevent the content from sitting snugly against the borders. You experiment with your layout sketch, and you decide upon the following values: Along the top and bottom of the main content area, 20 pixels of padding Down the left side of the main content area, 60 pixels of padding Down the right side of the main content area, 0 pixels of padding
To do this, follow these steps: In the template's document window, click anywhere inside the main content area. Go to the Tag Selector at the bottom of the document window, and select the tag of the appropriate layout element. For a tables-based layout, you want the <td> tag, as selected in Figure 12-5. For a layers-based layout, you want the <div> tag. Clicking this tag selects the layout element itself, not the content inside it. Figure 12-5. The <td> tag is selected in the Tag Selector | TIP | To edit the attributes of the page itself, such as the background color or the default font for the entire page, choose the <body> tag from the Tag Selector. |
With the table cell or layer selected, go to the CSS Styles panel, and click the New CSS Rule button. (This is the one with the page icon.) Dreamweaver opens the New CSS Rule dialog box, as Figure 12-6 shows. Figure 12-6. Use the New CSS Rule dialog box to add a style rule to your external CSS file | TIP | In the New CSS Rule dialog box, under Define In, make sure that you select the option for your external stylesheet. Otherwise, Dreamweaver embeds the CSS code. |
If you want your style rule to apply to all table cells on the page, choose Tag under Selector Type, and then choose td or div from the Selector menu, but rarely is this the case. You probably don't want the nav area or the banner area to have the same amount of padding as the content area. Choose Advanced instead, and in the Selector field, type the name of the tag (either td or div), a period (.), and then a brief but descriptive name for the style. Since you're building this style for the main content area, content is as good a name as any, so type td.content or div.content. Click OK. The New CSS Rule dialog box closes, and the CSS Rule Definition dialog box in Figure 12-7 opens. Table 12-1 lists the types of attributes that appear under each category in this dialog box. Figure 12-7. Define new style rules in the CSS Rule Definition dialog Table 12-1. Appearance attributes by category in the CSS Rule Definition dialog boxCategory | Includes |
|---|
Type | Typeface, type size, font weight (bold), font style (italic), font variant (small caps), line height, type casing, type color, type decorations (underline, strike-through, etc.) | Background | Background color, background image | Block | Word spacing, letter spacing, text alignment, indents | Box | Width, height, padding, margins | Border | Border style, border width, border color | List | List type, leading character | Positioning (These attributes apply primarily to the layers of a layers-based design.) | Position on screen, clipping regions, stacking order, visibility, overflow behavior | Extensions (These attributes apply to Internet Explorer version 4.0 or later, although many of them aren't supported by any version of any browser.) | Page break, visual effects |
You want to add padding to the main content area, so you consult Table 12-1 and find that padding is in the Box category. Click the Box category in the CSS Rule Definition dialog box. Under Padding, uncheck the Same For All checkbox. Then type 20 in the Top field, 0 in the Right field, 20 in the Bottom field, and 60 in the Left field. Make sure all the units menus are set to pixels, as shown in Figure 12-8. Figure 12-8. Define the padding of the main content area under the Box category Click OK. Dreamweaver opens the CSS file as a separate document window and adds the new style rule to it. Click its tab, and choose File Save from the main menu to save your changes to the stylesheet. Now switch back to the template's document window, and apply the new style rule to the layout element. With the table cell or layer still selected, go to the Property Inspector, and choose the name of your style from the Style menu. Dreamweaver applies the style to the layout element, as Figure 12-9 shows. Figure 12-9. Applying the style to the selected layout element Choose File Save from the main menu, and update the pages of your site.
12.2.2. Creating a Style for a Content Element Try another style definition, only this time, set the appearance of a content element, like the secondary nav links at the bottom of the main content area. You look back over your notes from Chapter 6, and you decide upon these specifications: | TIP | Avoid using the menus and buttons on the Property Inspector to set the appearance attributes of text, because Dreamweaver embeds this CSS code into the page. |
Here's what you do: In the template's document window, click anywhere inside the paragraph that holds the secondary nav links. Go to the Tag Selector, and click the <p> tag to select the entire paragraph. Go to the CSS Styles panel, and click the New CSS Rule button. The New CSS Rule dialog box opens. Again, you probably don't want this style to apply to all paragraphs on your page, so choose the Advanced option, and type p.secondarynav or something to that effect in the Name field. Click OK. The New CSS Rule dialog box closes, and the CSS Rule Definition dialog box opens. You see from Table 12-1 that various type attributes appear under the Type category, so choose the Type category from the CSS Rule Definition dialog box if it isn't already selected. From the Font menu, choose the font list that reads Verdana, Helvetica, sans-serif. | BEHIND THE SCENES | You may recall from Chapter 6 that you specify a list of fonts rather than a single font for the typeface. The fonts appear in order of preference. Take a font list that reads Verdana, Helvetica, sans-serif. To the browser, this says, "The preferred font for the element is Verdana, but if Verdana isn't available on the visitor's system, then try Helvetica. If Helvetica isn't available either, then just go with the visitor's default sans-serif font." Dreamweaver comes prebuilt with several common and reliable font lists, but if you want to create your own, choose Edit Font List from the Font menu, and start choosing fonts. Be sure to conclude your list with serif, sans-serif, or monospaced. These are generic placeholders that correspond to the visitor's default serif, sans-serif, and monospaced font, whatever they happen to be. This way, if all else fails, the browser picks the default system font in the style of your choosing, and your page looks something like the way you intended it. |
From the Size menu, set the type size to 12 pixels. From the Weight menu, choose Bold. Your dialog box looks like the one in Figure 12-10. Figure 12-10. Now build a style rule for the secondary navigation text Click OK to add the style rule to the stylesheet. Switch to the stylesheet's document window, and choose File Save from the main menu. Switch back to the template's document window, and, with the paragraph still selected, choose the name of the style that you just created from the Style menu on the Property Inspector. Dreamweaver applies the style to the selected paragraph, as Figure 12-11 shows. Figure 12-11. Apply the new style rule to the selected paragraph Choose File Save from the main menu, and update the pages of your site.
|