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 8 and make external.html the active document by clicking its tab.

2. Press Shift+F11 to open the CSS Styles panel.

   

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

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

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 by clicking the Add Property link.

Zeroing off default margin and padding values

Block-level elements carry default margin and padding values, and these default values often gets designers into a difficult spot when creating designs that need to display accurately across a range of browsers and operating systems. The problem is that the default settings used for these properties are not consistent; in fact they can vary wildly from browser to browser and operating system to operating system.

It is good practice to remove these default values (we did this for the body element in part 1 when we set the margin and padding to zero). Although this technique works fine, it can be somewhat laborious to do this to all elements that require zero values. With this in mind, you’ll create a group selector that will handle all the zeroing for you.

Before you do this, you will first take a look at what I mean by grouping selectors and it will be necessary for you to understand inheritance and how inheritance works within our style sheet.

Grouping selectors

If you need to apply the same set of properties and values or a base set of properties and values that are the same for two or more elements then you can group your selectors by separating each selector with a comma. Examine listing 1 below.

Note: Fonts that consist of more than one word are set in quotes.

h1 {
 font-family: "Times New Roman", Times, serif;
 color: #003366;
 } 

Listing 1: Setting the font-family and color for an h1 element

Should you decide that you want all your h elements to be that color and of that font then we can simply group them, as shown in listing 2.

h1, h2, h3, h4, h5, h6 {
 font-family: "Times New Roman", Times, serif;
 color: #003366;
 } 

Listing 1: Setting the font-family and color for all the h elements

That is somewhat quicker than writing out an individual rule for each h element. You now have all your h elements grouped; you have declared each h element within the same rule by separating each selector with a comma.

Inheritance

Inheritance allows you to re-use properties and values on specific elements. Let’s revisit listing 2 and build on that as shown in listing 3.

 h1, h2, h3, h4, h5, h6 {
 font-family: "Times New Roman", Times, serif;
 color: #003366;








} 

 h1 {  } 

Listing 3: The properties and values from your grouped selector will inherit into the h1 type selector;

When rendered in the browser your h1 element will now look like listing 4.

h1 {
 font-family: "Times New Roman", Times, serif;
 color: #003366;  } 

Listing 4: The inherited h1 rule

All the properties and values are brought together by inheritance to be combined as a single rule. The rule closest to the bottom of the style sheet always wins out against one higher in the style sheet when the selectors are the same, it is deemed to be more specific. Let’s revisit listing 3 and make a slight change as shown in listing 4.

h1, h2, h3, h4, h5, h6 {
 font-family: "Times New Roman", Times, serif;
 color: #003366; 
}  h1 {  color: #000000;
 } 

Listing 4: Adding a second color value

As you can see your lower and ungrouped h1 selector now has an added color value of #000000 – black. Because this color value is lower in the style sheet – or closer to the h1 element in the XHTML document – it is deemed to be more specific. For this reason the black color value will win out over the color value set in the grouped selector, which is higher up in the style sheet. From this example you can see how it is possible to override settings within CSS rules with alternate properties and values. This is the basis of the method you will use to create your zeroing rule.

Imagine if you had an embedded h2 rule in the head of your page and you placed it below the link to your external style sheet. In this instance, the h1 rule that is embedded in the head of your page would override the h2 rules in your external style sheet. By the same token, an inline rule (like the one shown below) would override the h2 rule in the head and the h1 rule in the external style sheet:

My h1 font size is now 60%
 

This is all well and good. However, you really do not want to use embedded or inline styles in your XHTML documents. Although it is not incorrect to use CSS in this manner, it does prevent you from having global access to your CSS rules. There is little point in using CSS and then having to open goodness knows how many XHTML pages to change embedded or inline rules. Keep your CSS rules where they give you the most benefit—in an external CSS file.

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, you have already seen how you can do that a little earlier in this tutorial.

Open external.html in design view and click the body rule in the CSS panel. The CSS panel will now update to show the properties and values of the body selector. But, we have no properties in the body rule as we deleted them when the margin and padding settings were moved to our zeroing selector. With that in mind you will not see any property and value settings under the “Properties for body” section when the body tag is selected.

Complete the following steps to set a default set of values against the body rule.

1. Click the Add Property link
2. Select font-family from the select list
3. From the values select list choose the Arial, Helvetica, sans-serif option
4. Click the Add Property link
5. Select the font-size option
6. From the first value select list type: 100.01
7. From the second select list choose % for the unit of measurement
8. Click the Add Property link
9. Select the background-color option
10. Click the color cube and select the white cube
11. Click the Add Property link
12. Select the color option
13. Click the color cube
14. Select the #666666 color cube
15. Save your work

You have now set a series of default values on the body rule that will be inherited throughout your document unless you specifically override them.