Hit “Reset” on Your CSS

This article is a look at a technique first introduced by Eric Meyer called “CSS Reset”. Please read on for an explanation of what it is and how it works…

A while back, I was building a website when I hit a wall I hadn’t hit in a long time. No matter what I did, I just could not get it to look exactly the way I wanted it to in the browser. Then I remembered “CSS Reset” and it made my life so much easier! Once implemented, it instantly fixed the entire problem, which I had wasted far too much time laboring over in the first place. If I can pass on a little knowledge and save someone else the time and headache, I feel like all the trouble I had wasn’t in vain.

What is CSS Reset?

Did you know that each web browser has its own default stylesheet that creates basic style on otherwise unstyled webpages? The reason is to present the content in a more readable and user-friendly fashion. But what if you have your own custom stylesheet and these default styles are interfering with the appearance of your website? In a nutshell, CSS Reset is a piece of CSS code that communicates to the browser to reset the specified default styles to null. It simply gives you the ability to overwrite the predefined default browser styles.

How does CSS Reset work?

This time I’m not going to include any code snippets. (For the original CSS code, please visit Eric Meyer’s website.) Instead, I’m going to briefly explain how it works, as the concept is simple: CSS Reset works by forcing each browser’s styles to be reset to null. This allows the CSS author to essentially start their page styles from scratch, with no external interference.

CSS Reset can help create a more cohesive, cross-browser & cross-platform compatible, adaptive, responsive web experience. Simply put, it is easier to make a website look virtually the same across a wide variety of web browsers and platforms. This uniformity saves a lot of time and frustration for the designer/developer and aids in branding your company.

By: Danielle Dandridge