Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Use CSS Reset

DZone's Guide to

How to Use CSS Reset

In this post, we take a look at this CSS property, when it is best to use this property, and give some example CSS of Reset in use.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

Reset in code presents a short set of rules that resets styling of all elements to a consistent baseline. It is needed because the styling isn't consistent across browsers. You don't want something like pre-styling of, e.g. table element, to mess with you when you're on.

Practice

When I was starting with CSS it is said to me that on the beginning you should always write:

 *{
    margin:0;
    padding:0;
 }

This was the basic CSS Reset.

Some of the most common elements that are styled differently among different browsers are hyperlinks (<a>), images (<img>), headings (<h1> through <h6>), and the margins given to various elements. It is a well-known fact that browsers add a certain amount of padding to almost everything.

The example of the different styling of the checkout button between browsers:

The example of the different styling of the different elements (headline, link, span, code, blockquote):

Every browser has a default HTML formatting and you can see it under "user agent stylesheet" in inspect mode. If style is added for the specific element, its default browser formatting is overwritten.

Reset Scripts

My favorite CSS reset script is one from http://html5doctor.com:

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;
 }

 /* change colors to suit your needs */
 ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
 }

 /* change colors to suit your needs */
 mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
 }

 del {
    text-decoration: line-through;
 }

 abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
 }

 table {
    border-collapse:collapse;
    border-spacing:0;
 }

 /* change border color to suit your needs */
 hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
 }

 input, select {
    vertical-align:middle;
 }

Some of defined styles are pretty standard (ones for <a> and for <ul>), some are added to help accessibility (ones for <abbr> and <dfn>) and some are added extra (<hr>).

There is a list of more reset scripts that you can use:

Instead of CSS reset, some developers use CSS normalize (and some refer to it as "the new reset"). While reset is used for wiping everything out and making your project "tabula rasa," normalize keeps good practices while neutralizing cross-browser style inconsistency. I will write about CSS normalize in the future for sure. Until then, check this post.

Conclusion

It is not necessary to Reset your CSS, but it is to be aware of pre-styling of browsers and CSS reset existence.

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:
web dev ,css ,front-end development

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}