Designing with CSS – Part 2: Defining style properties and working with floats

Removing default properties and values

Browsers apply default values to block level elements; unfortunately these default values are not consistent. These default values can, and do, vary greatly from browser to browser. With this in mind, we will create a CSS rule in our style sheet that will remove all the default values. This is an important first step, because without removing the default margin and padding values, the layout of the XHTML page will not display the same when viewed in different browsers. It is a best practice to always use this rule to "zero out" the default values, so that your page design is based on a standardized view, no matter which browser is used to view it. As you begin developing web pages with Dreamweaver CS3 that are formatted using CSS, remember to add this rule to every new page you create, because it may not be included in the default style sheet that is generated with your selected layout. As a general rule, removing the default properties and values inherent in the various browsers is not absolutely mandatory, although adding this rule does provide greater control. However, you must remember to specifically set margin and padding values for any page elements that require them.

To remove the default properties using the most efficient code, we will group selectors together. This is a new concept that is described in detail in the demo below. By grouping the selectors, we can create a single CSS rule that uses the wildcard selector to zero off all the default values. The wildcard selector is denoted with the asterisk symbol: *. The wildcard means "all"—which is a powerful way to refer to all page elements (body, etc.) at once. Remember that the order in which you list the rules in your style sheet is very important. The rule to remove the default values and start your design from a "zeroed out" space should always be the first rule in your CSS page. You could encounter odd display issues if the rule was placed below other rules, because when the browser "reads" the rule it would zero out all of the padding and margin values that were set in the rules that preceded it in the style sheet.

• Play the demo: Zeroing out browser default values

Here are the steps reviewed in the demo:

1. Download the sample files provided in the first page of this tutorial
2. Open the following files in Dreamweaver CS3: twoColElsLtHdr.css (which is located in the CssFiles folder) and index.html
3. Make sure you are working with the CSS style sheet: twoColElsLtHdr.css
4. Place your cursor at the top of your style sheet, directly below the utf-8 declaration, and press Enter twice to make room for the new CSS rule
5. Type the wildcard selector and the opening curly brace, then press Enter: * {
6. Type the following line of code, then press Enter: margin: 0;
7. Type the following line of code, then press Enter: padding: 0;
8. Type the following line of code, then press Enter: border: 0;
9. Type the closing curly brace to complete the CSS rule: }
10. This rule deletes the margin and padding values that already exist in some browsers, ensuring that the page is displayed using only the values set in the CSS rules that follow this rule
11. Save the CSS page

In the steps above, we used the wildcard selector to remove all the default values from all page elements. It is highly recommended that you add this rule to any new CSS page you create, because it is very helpful in eliminating issues that you may encounter when troubleshooting the display of your page layouts. Now that we’ve removed the default values and reset every element to zero, we can begin the next task: adding specific values for the margin and padding for each element, to set the desired spacing.

To achieve this goal, we’ll use the interface within Dreamweaver CS3, specifically the CSS Panel and we’ll edit the index.html page while working in Design view in the Document window.

• Play the demo: Setting margins on the P element

Here are the steps reviewed in the demo:

1. In Dreamweaver CS3, make sure the file index.html is active in the Design view of the Document window
2. Select Window > CSS Styles to open the CSS Styles panel
3. Click the New CSS Rule button
4. In the New CSS Rule dialog box, select Tag as the Selector Type
5. Select P from the drop-down menu to the right of the Tag field to select the <p> tag
6. Ensure that twoColElstHdr.css is the file selected to define the <p> tag rule
7. Click OK
8. In the Category column, select Type (if it is not already selected)
9. In the Size field, enter the value: 80
10. In the drop-down menu immediately to the right of the Size field, select %
11. Click OK
12. Review the content of index.html and notice that the text size has adjusted to the new size setting
13. Return to the CSS Styles panel. The style created for the p is selected. Close the Font option and select the Box option
14. In the Box option, in the margin field, enter the value: 1.5em 0
15. Be sure to include a space between the values as you type them
16. These are pair values; 1.5em will be applied to the top and bottom margins, and 0 will be applied to the left and right margins of all <p> tags
17. Click on the index.html file to refresh the display in Design view
18. Notice how the page updates to reflect the new margin settings

19. If you’d like to see the CSS rule generated by the changes made to the CSS Styles panel, look at the code in the twoColElsLtHdr.css file to see the new CSS rule for the <p> tag. It will look like this:

    p {	
    font-size: 80%;
    margin: 1.5em 0;
    }
    

20. Save the twoColElsLtHdr.css file

In the instructions above, we entered a value of 1.5em for margin setting for the <p> tag element. You may be wondering why the "em" measurement value was used rather than another form of measurement, such as %. The em measurement is a relative value, and it is a good practice to use the em measurement setting to ensure that the various elements on your page scale proportionately. If you’d like to see how this works, experiment with changing the font-size value, and notice how the top and bottom margins on the p element increase proportionally with the size of the text.

Page 2 of 7

Previous Page

Next Page