My standard CSS resets for default element properties
Published | 16.01, 30th of March 2009, by Jay Vincent | Technical
Whenever I start a new CSS build, I use a pre-made stylesheet and add to it, rather than create one from scratch. There are a few reasons for this:
- HTML elements have default browser-inherited properties: for example, unstyled text usually display as 16px times new roman.
- Different browsers may apply slightly different default values. In interner explorer, the h1 tag displays at 300% in relation to its parent element font-size, where as firefox displays at 200%.
- Re-declaring these values ensures all browsers are using the correct styles and are displaying uniformly and as intended.
Good practise for font-size declarations is to set the size in the body tag using em's or a percentage (not pixels), so a user can over-ride the values using the browser's 'increase text-size' functions. All other font-size declarations should then be made relative to this.
Example:
We want to have a font-size of 12px for the body text and h1 tags of 24px:
note: The browser's default font-size setting is 16px, so 75% amounts to 12px.
body
{
font-size: 75%;
font-family: arial, helvetica, sans-serif;
color: #000;
background: #fff;
}
h1
{
font-size: 200%;
}
There are other values and properties which require attention, most notably element margins of block elements, but the best way to find out what CSS works best for you is thorough mulit-browser testing and a passion for web design and self-improvement :)
No comments | Make a comment
(Average rating |
4.67 / 5)
RSS Feed
