What is a CSS reset and the proper way to do it
What is a CSS reset and the proper way to do it
4 minutes to read | 10.04.2020
TL;DR The browser has its own styles applied by default in case the CSS doesn't load. These styles need to set back to zero by using a CSS reset. You can reset everything at once using a universal selector (*). A better way is to apply the CSS reset only to the classes that require it. A few CSS properties that need to be reset are margin, padding, and list-style. Some HTML tags that need to be reset are body, h1, and ul.
Sign up for free to share your own content!
*
*
*
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. A CSS reset is needed because your web browser has default design settings that it automatically applies to the HTML tags. - 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 The best way to do a CSS reset is to add the reset styles to each element individually. - 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. Here’s a list of elements and their reset styles that you can copy and paste into your own stylesheet file. -
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. Instead of using a universal CSS reset, only use reset styles on elements that require it. - Add elements to your CSS reset as you need them.
Share this with your friends
Recent Posts
What is the best word count for a blog post to rank high in Google?
What is the best word count for a blog post to rank high in Google?
Internet Marketing | 2 minutes to read | 01.08.2021
Part of SEO and ranking high in the search engine results is word count. Should your blog posts be short? Medium? Long? What's the optimal word count for blog posts?
Creating basic hover animations for links, buttons, and gradients in CSS
Creating basic hover animations for links, buttons, and gradients in CSS
Web Design | 8 minutes to read | 12.22.2020
Animations can bring your website to life, as well as give your design a touch of flair, but we don't want them to be crazy. Here's how to make basic hover animations with CSS.
View all posts