Designing with CSS - Use of Wild Card

Removing Default Values and Properties

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.