CSS tutorial for Blogger users: CSS reset

The CSS reset technique deals with browser default styles. Each browser has its own default styles used to handle HTML elements when no other styles are provided. Sometimes these default styles can actually interfere with the design that you want to get. So it's better to reset them by normalizing all HTML elements. However, you have to make a choice: if you want to perform a global reset, just use one of many CSS reset templates that you can find with a Google search, otherwise you have to select which elements you want to normalize. Here's a basic example:

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, dd, blockquote, pre, address, form, fieldset, legend {
    font-size: 100%;
    margin: 0;
    padding: 0;
    border: none;
    font-style: normal;

As you can see, we've chosen some elements that we know as affected by the default styles of browsers. Of course you can add even more elements to the list, for example by including table elements. The choice is up to you. Bear in mind, however, that sometimes relying on default styles is useful. For example, paragraphs have all top and bottom margins set to 1em. If you reset them at the very beginning of your CSS file, you have to specify these margins later in the source if you want to achieve the effect of some white space above and below them.

Leave a Reply

Note: Only a member of this blog may post a comment.