CSS Defaults and Resets

When you are styling your web page you do not need to specify every single value for every single tag that HTML supports, not even all of those that you use in your page. This is because browsers supply some default values. These default values provide partial styling to the tags in your web page even before you start to add any CSS at all.

So just exactly what are the default values? Well some of them are obvious ones that you will almost always want to have applied anyway. For example a <b> tag will have font-weight:bold applied by default and a <div> tag will have display:block applied by default. These values are ones that are implied by the choice of tag in the first place and so are ones that you would be unlikely to want to change. So having these set as default means that all sites can make the CSS slightly shorter by not having to apply these values in every single web page.

What about values that are not so obvious that the browser applies as a default? When you have an <h1> tag then browsers apply some default CSS values to that tag too. In this instance the default values are there so that web pages that don't bother to style the tag will still have the content of the tag appear differently to the rest of the content of the page. In the case of the heading tags browser defaults generally change the font size and weight so that there is a visual distinction between the various levels of headings and the rest of the page content. Unlike the first category of defaults, these need not be the same in all browsers. If headings are not styled then the minor variances between how the headings are displayed are not going to significantly affect the layout of the web page and since they will be styled on sites where the exact appearance of the headings is important that they have some defaults doesn't matter.

Where the defaults do matter in for things like margins and padding applied by default to the <body> tag and other tags within the page. Again these defaults are applied in order to ensure that the page will be given an acceptable appearance when there is no CSS at all. Again the exact values applied can differ between browsers. Here there can be issues that can impact on the way the entire page is laid out sine tags can inherit their margin and padding from the tag that contains them and so having the defaults use different values in different browsers means that the one value can have an effect on the entire page. This is where CSS resets come in. A CSS reset is some CSS that you apply to all of your web pages to override some of these default values that can be different in different browsers with your own 'default' values that will be the same across all browsers. This basically gives you a starting point for the rest of your CSS that will be the same for all browsers making it far easier to determine when you need to apply specific styles and when you don't.

CSS resets vary depending on how much of the browser defaults you consider it necessary to override. A most basic reset will simply set the margins and padding for the <html> and <body> tags to zero. Alternatively you might decide to add a lot more to your reset. The following "meyerweb reset" is in the public domain and is intended as a starting point for creating your own reset. This one includes a number of obsolete tags that you can safely remove if you know that you are writing your HTML using current tags (most of the obsolete ones were made obsolete in 1997 so you really shouldn't be still using them anyway). It also contains some resets specifically for newly added tags so that older browsers can understand them properly. These could be removed once those older browsers die out.

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;
}
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 it stands this reset can be used as a starting point for the CSS for all of your sites. To convert it into a reset for a specific site you would add defaults for the colours that the site uses as well as the default fonts you want the site to use.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate