Designing with CSS in Dreamweaver MX 2004 – Part 2: Adding Default Properties to the Body Rule
Adding Default Properties to the
Let’s begin by building on the
body rule you created in Part 1. There you created three files that you were working with: external.html, external2.html, and external.css.
- Open the three files from Part 1 in Dreamweaver MX 2004 and make external.html the active document by clicking its tab.
- Press Shift+F11 to open the CSS Styles panel.
Press F9 to open the Tag inspector. When external.html is the active document, the CSS Styles panel should appear as in Figure 1.
- Select the
bodytag. You will see the Tag inspector update to show the CSS properties for the
Expand the Box section. You will see the margin and padding values you set in Part 1 (see Figure 2).
Neat! As you can see, by simply selecting the CSS rule in the CSS Styles panel, you can quickly and easily gain access to the properties you have already set—and others you may want to use.
Setting the Font Properties
body element provides you with an excellent opportunity to set some default settings. Take this opportunity to set your font properties and values and allow the rest of your document to inherit the settings you set here.
For instance, if you declare a color on the
body element, then that color will be the color used for all text, no matter what element—
p—in which the text is contained. The color is set by inheritance from the
body element. You can change the text from the default properties and values easily if you wish, and you will learn about overriding the default values later in this article. For now, implement a set of defaults that you can use throughout your document.
body rule still selected in the CSS Styles panel, click the Plus (+) button next to the Box listing in the Tag Inspector panel and complete the following steps:
- Expand the Font list.
Click to the far right of the font-family line to open the font-family pop-up menu (see Figure 3).
- Select the font-family option that begins with “Verdana…”.
- For font-size, type 100 and select the % sign.
Click the color selector and select #666666 as the value. The font section of your
bodytag should now look like Figure 4.
Setting the Background Color
Access the Box list of the
body rule and set background-color to white (#FFFFFF). If you have done it correctly, your
body rule should look like Figure 5.
In the next section, I discuss inheritance, specificity, and grouping selectors.