Adding Default Properties to the Body Rule

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.

1. Open the three files from Part 1 in Dreamweaver MX 2004 and make external.html the active document by clicking its tab.
2. Press Shift+F11 to open the CSS Styles panel.

3. Press F9 to open the Tag inspector. When external.html is the active document, the CSS Styles panel should appear as in Figure 1.

   

   Figure 1. CSS Styles panel displaying the external.css file

4. Select the body tag. You will see the Tag inspector update to show the CSS properties for the body element.

5. Expand the Box section. You will see the margin and padding values you set in Part 1 (see Figure 2).

   

   

   Figure 2. CSS Properties tab showing the Box section expanded

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

The 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—h1, h2, or 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.

With your 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:

1. Expand the Font list.

2. Click to the far right of the font-family line to open the font-family pop-up menu (see Figure 3).

   

   Figure 3. Changing the font in the CSS Properties tab

3. Select the font-family option that begins with “Verdana…”.
4. For font-size, type 100 and select the % sign.

5. Click the color selector and select #666666 as the value. The font section of your body tag should now look like Figure 4.

   

   Figure 4. CSS Properties tab showing the font settings

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.

Figure 5. New body rule in the Code view

In the next section, I discuss inheritance, specificity, and grouping selectors.