The best way to do a CSS reset
A lot of new web designers ask, “what is a CSS reset?” A CSS reset just happens to be one of the most basic steps of designing a website.
If you want to start a stylesheet from scratch, instead of using a CSS framework, the very first thing you will want to do is perform a CSS reset.
The browser, for example, Google Chrome, will style your brand new website for you. Isn’t that nice?! It really is, because if your CSS file doesn’t load, your site will still be somewhat legible. Your CSS file might not load due to poor internet, an error in the server, or sometimes just the HTML loads in after a refresh.
So, we should thank Google (and all the other web browsers out there) for giving us a design “safety net”. The thing is, we want to create our own website design, and these browser styles are really killing that vibe.
That’s when a CSS reset comes in handy. A CSS reset is when you apply styles to certain HTML tags to bring their values back to the default. Think of a CSS reset as overriding the browser’s default styles.
We have two main ways to do a CSS reset. We are going to teach you both ways, but one is definitely better than the other.
CSS reset #1
The first way to reset your CSS involves using the universal selector ( * ). First, you apply the CSS properties to the universal selector, and those properties will be on each HTML tag and CSS class on the page.
Here’s a basic example of a working CSS reset:
* { margin: 0; padding: 0; list-style: none; }
Ok, so you’ve got a basic CSS reset, but there’s a big problem here.
What’s the problem?
Well, since we are using a universal selector and that means that each HTML tag and CSS class on the page is getting those reset styles, which is not that good for website performance. A slow website is definitely not something you want. After a solid session of web design, you could create tens or hundreds of CSS classes that don’t even need those styles applied to them. Not to mention, you have to work around those reset properties when creating a new CSS class.
CSS reset #2
Instead, we should just apply the CSS reset to the HTML tags that need it, and nothing else. This sounds like a lot of annoying work, but it’s actually super easy, and more beneficial to you in the long run.
There are plenty of HTML tags that you need to add your CSS reset properties to. Here’s a list of the main ones:
html, body, div, span, a, h1, h2, h3, h4, h5, h6, p, blockquote, img, ol, ul, li, input, label, select, table, tbody, tfoot, thead, tr, th, td, footer, header, menu, nav, section, video
And the main CSS properties are:
margin: 0;
padding: 0;
font-size: 100%;
list-style: none;
border: 0;
The best thing to do is to look at the HTML tags that you plan on using, applying the CSS reset, and then adding or changing tags and properties as you design. You don’t have to use all the HTML in the CSS reset.
Now, we have the best CSS reset that will help with performance and be a lot cleaner overall.
So, what have we learned?
Unless you use a framework, every project is going to need a CSS reset. We have to override the browser’s default styling.
You can do it with a universal selector, or just by adding the CSS properties to the HTML tags that need a CSS reset. The choice is yours.
Sources:
