Updated date:

How to Do the Best CSS Reset When Designing a Website

Author:

I've designed hundreds of websites from scratch. Now, I want to teach people web design, so they can create their own websites from scratch.

If you're designing a website, you'll likely want to use a CSS reset to override the browser's default styles.

If you're designing a website, you'll likely want to use a CSS reset to override the browser's default styles.

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 a poor internet connection or an error in the server. Sometimes, just the HTML loads in after a refresh.

So, we should thank Google (and all of 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 why CSS resets are so handy. A CSS reset allows you to apply styles to certain HTML tags to bring their values back to the default. Think of a CSS reset as a way to override a browser’s default styles.

There are two main ways to do a CSS reset. I am going to teach you both ways, but the second one is definitely better than the first.

CSS Reset Option 1

The first way to reset your CSS involves using the universal selector (*). If you apply the CSS properties to the universal selector, 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, 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'll have to work around those reset properties when creating a new CSS class. Let's take a look at a better method . . .

CSS Reset Option 2 (Preferred Method)

Instead, we will use the preferred method of the CSS reset.

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, apply the CSS reset, and then add or change tags and properties as you design. You don’t have to use all of 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 since 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.

This article is accurate and true to the best of the author’s knowledge. Content is for informational or entertainment purposes only and does not substitute for personal counsel or professional advice in business, financial, legal, or technical matters.

Comments

Umesh Chandra Bhatt from Kharghar, Navi Mumbai, India on December 31, 2020:

Useful information.

Related Articles