By: Adrian Senior
Page 5 of 5
Setting The Defaults
Earlier in this article we looked at getting rid of the browsers' default settings, we did this by zeroing off the margins, padding and borders with a single selector. In this section we are going to talk about doing the complete opposite — setting a group of custom default values that will be applied throughout our web site. A good place to set these defaults is on the body tag. Take a look at Listing 16:
font-family: Arial, Verdana, Helvetica, sans-serif;
Listing 16: Setting up some default values
This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current "best" suggestion is to use the 100.01% value for this property.
In Listing 16 we have added a default font-size of 100.01%. Once we have set this base size it is easy to make adjustments by scaling off it for each of our individual elements. We might declare a p element to have a font size of 80%, this would be 80% of the value declared on the body element. Similarly we may declare a font size of 135% for an h1 element, this would again scale off the default setting on the body.
Some designs dynamically reset the entire page text size by controlling font-size on the body, but we can't do that if it must remain set to 100.01%. As an alternative, you may enclose all the elements in a wrapper div, and dynamically set a font-size value in ems on that wrapper, which achieves the same thing as controlling the body font-size.
Next we have the font-family. Once we have declared a font-family value on the body, we have no need to declare it again unless we want to change the font-family for perhaps an h1 element that we might want to have display in a different font such as "Georgia". The same can be said for our color and background-color values. All text in our document will be black and the page will have a plain white background, unless we specifically override the body settings in following rules.
By creating a set of defaults like this, it prevents us having to declare such values over and over again throughout our style sheet. We would now only need to declare values when we want to change something away from the default settings.
In this article we have explored methods of deploying CSS that will make our lives a little easier. I would hesitate to call them best practices, as everyone's version of "best practice" will vary, but I would say they are good coding habits to get into.
I hope you found this article a worthwhile read, if you have any comments I'll see you in the forums.
Until next time :~)
Approximate download size: 104k