Resetting Styles

Contact Us or call 1-877-932-8228
Resetting Styles

Resetting Styles

Web browsers make certain assumptions that can sometimes interfere with layouts. Designers often have to undo or override these defaults. It has become a common practice to do so from the outset. This practice has come to be known as "resetting" styles.

A very simple reset that affects page layout is shown below:

* { margin: 0; padding: 0; border: 0; }

Note the universal selector. This effectively does away with all margin, padding and border for every element including the body, headings, lists, and list items. It then becomes the designers responsibility (freedom?) to assign margin, padding and border.

The screenshots below illustrate the impact of this reset:

Default Styles Reset Styles

Resets can get much more sophisticated. CSS Guru Eric Meyer provides a freely downloadable detailed reset style sheet at

Using the simple reset, we have shown above gives us a blank slate on which to lay out our page. Now we have to make some decisions:

  • Will our design use a fixed width or the full width of the browser?
  • How many "rows" and "columns" will we have?
  • What sort of positioning should we use: absolute, relative, fixed, or static?

We address these questions in the sections below by looking at specific layouts. For all layouts, we'll assume we want a header and a footer.