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.
by
Join the DZone community and get the full member experience.
Join For FreeReset 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.
Published at DZone with permission of Tijana Dedic, DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments