How to Reset CSS Styles

  • google plus

In Brief...

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.

Take our Advanced CSS Training course for free.

See the Course Outline and Register

Instructions

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 following screenshot shows a web page that uses the default browser styles without the CSS reset:
without reset

The following screenshot shows the same web page with a CSS reset applied:
with reset

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss