CSS Reset
Maybe this post should be the first of the firsts because it's about how to start your CSS. Then again, you should be able to understand what exactly it is you're doing so I'm not too much late with this.
Maybe this post should be the first of all, because it's about how to start your CSS. Then again, you should be able to understand what exactly it is you're doing so I'm not too much late with this.
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 the defined styles are pretty standard (ones for <a> and for <ul>), some are added to help accesability (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 to wipe everything out and make your project "tabula rasa", normalization maintains good practices while it neutralizes 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 the pre-styling of browsers and CSS reset existence.
If you’re wondering what to do after adding Reset to CSS, subscribe to our newsletter.
Creating
software solutions
that work
