Tech Speak: Reset Your Styles

You are starting a new project and want to start with a blank canvas. So you create your file structure, build out the html, create the functionality of your website using your preferred programming language and lastly style your web app. As you are styling your web app you notice you are having issues styling your app. You are having to add styles to portions of your website that shouldn't need styling and at times you are having to get creative with styling your page because certain attributes are not responding as they should. Why is that?

Every web browser has it's own set of predefined styles. You can create an html skeleton using just html attribute tags and when you look at it in a browser it will be "styled". Attribute tags such as body, h1 - h6, p, ol, table and ul all have predefined display, margin, padding, borders and font-size styles. You can check out the overview of styles inherited from the browser HERE. While you can override these styles in your css file, what if you don't want padding where the browser put padding? You have to go into your css file and change that value. This can be time consuming and you may have to do this multiple times, which can clutter your code and make it less readable. So how do we solve this issue?

We add a secondary css file to our web app. This css file resets all styles that are inherited from the browser, this file is generally named reset.css. You may be wondering how we know what all to reset. If you want to create your own reset.css file you would have to go through and figure out all the styles that have been inherited from the browser, but this can time consuming as there are many browsers and they all have slightly different default styles. The easiest and quickest way to do this is simple search in your favorite search engine...

Here's a fun tutorial for searching on google.

Now you may be wondering which one to use since there are so many results. That's up to you. Try them out and find the one that works best for you. They all do pretty much the same thing. I prefer to use the meyerweb reset file. It is the first result is widely used by developers.

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

As you can see, there are a lot of styles that have to be reset. The meyerweb reset file also takes into account older browsers that are no longer updated (cough, cough, internet explorer). This file sets everything that is inherited from the browser to 0 or none.

Now that you have added your reset.css file you are free to style your app as you wish without worrying about inherited styles.

Happy Styling and until next time :)