One of the first things that you need to do when designing a website is called a CSS reset.
A CSS reset is also one of the first things you will learn as a web designer dabbling in CSS, as this will have to be done on every new project, unless you use some sort of CSS framework.
Through the years, I’ve noticed that even more experienced web designers aren’t doing a CSS reset the proper way.
Today, you will learn what a CSS reset is, and how to do a CSS reset in a better way.
What is a CSS reset?
You may notice some weird behavior with your design when you first start designing your website.
This is because your web browser has default design settings that it automatically applies to the HTML tags, which change the look of your site. Things like spacing around the outside, dots on lists, font sizes, colors, and more. The browser does this to make any unstyled websites more legible.
This is good if the .css file doesn’t load for some reason, but we don’t need these styles if we want to show our own design.
We can overwrite these styles with our own (usually setting the styles to what they should be without the browser’s styles), thus “resetting” the design.
Now, if your browser loads your .css file, your design will be completely unstyled, and if it doesn’t load, your site will still be readable with the browser’s default styles.
The easy, but worse, CSS reset
The easiest way to do a CSS reset is to use the universal selector.
stylesheet.css
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
The universal selector makes sure that every element on the page has this style applied.
The upside to this is that it’s easy to do. In just a few lines, you can reset everything, but the downside is eventually you will be making your own CSS classes, and you might not need to have the CSS reset styles applied to them.
It gets even more complicated the more CSS classes you create. Since the CSS reset will be applied to every class, it may apply the reset style to 50, 100, or even 1000 classes on a page.
This is no good in terms of the speed of the website.
So, this works, but there is a better way.
The best way to do a CSS reset
That way you only apply the reset styles when they are needed, instead of on each element.
Now, unless the element is on the page, you won’t have to worry about styles being applied.
When loading your page, it’ll be a lot smoother and quicker.
Which elements require a CSS reset?
There are quite a few elements that require a CSS reset.
stylesheet.css
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display: block;
}
nav ul {
list-style :none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input, select {
vertical-align :middle;
}
You can remove elements that you do not use in your website.
Summarize
You have to use a CSS reset when you style a website because the browser has its own default styles.
A CSS reset is adding styles to elements to return them to their “default” style.
Add elements to your CSS reset as you need them.
