• google plus

How to Reset CSS 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 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.
About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.