Even though browsers have default sizes, say for H1 and H2, and default looks for how a list should be displayed, as the web designers, we want to control how our site is going to look. We choose a specific color because we don’t want the browser default to decide for us what blue is going to look like on their site. There are so many different shades of blue. We want to be in control to try to get our site to look the same no matter where it’s displayed, or at least displayed how we choose to have it seen.
One way we do that is by getting rid of browser defaults. We do that with a reset CSS code. Here’s the reset code I use. What do you think it’s doing?
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;}
It’s getting rid of the browser’s default CSS so that you can work with a blank slate.
Copy this code into a reset.css file and keep it in your project’s directory. Add it to every project by copying the file into your CSS directory for the project and using a link tag in the head of your html.
Make sure that the reset link goes BEFORE the style link in your HTML. You want the browser to reset and then style, not the other way around.
Try and add it now to your project. What changed? Do you need to add some more padding?
You can watch this lesson.