Resetting Your CSS


Reset your CSS

As long as there have been browsers, there have been browser quirks. Much like Androids and iPhones don't always play nicely, neither do browsers. The last few years has seen browsers try to standardize the simple things like default padding and margin. While most modern browsers do have these set somewhat the same, older browses don't and we are forced to reset their styles.

The act of resetting browser styles is a littler controversial. Some developers feel we should let the browsers display content the way it was meant to. Websites are content driven, so it shouldn't matter how the content looks, as long as it exists and is easily seen by the user.

But Whatever, I Like Resetting Styles Anyway

Resetting your CSS is fairly easy and can be done with the universal (*) selector. First we will use a simple bit of HTML and then we will add the selector.

As you can see, there is some padding and margin around it. This is done by both the <p> tag, and the surrounding <body> and<html> tags. Now let's see what happens when we reset their padding and margin.

Since we are just using a paragraph, this would be overkill. It wouldn't be too hard to just select those three elements (paragraph, body and html) and change their styles. Once your website has hundreds of tags though, it can get very complicated.

Let's Ask An Expert

Every developer has their own reset styles they use. Sometimes they use the universal selector, or sometimes they style each tag independently. Prominent web developer Eric Meyer does the following:

Chris Coyier, one of my biggest web developer inspirations, who I have had the pleasure of meeting in a bar in Florida a number of years ago and had an embarrassing fan-girl moment when I did, did a survey about CSS resets. Meyer's reset was popular, but so was custom ones and "hard" ones like what I do. It really shows there is a wide variety of different ways people reset browser styles.

How I do it

Unlike Meyer, I have a much simpler approach:

While Meyer's is much longer than mine, it targets elements specifically and styles them accordingly, instead of just targeting everything like I do. Some might say this is a better approach, but that's developer preference.

Another difference between our two resets is that I used box-sizing, which he didn't. This could be his own personal preference but I feel it makes styling websites a thousand times easier.

Do you reset your CSS? Do you use Meyer's reset, a custom one or nothing at all? Let me know in the comments!

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close

Sign-up for inside tips for making
your website more beautiful!

* indicates required

Close