There’s plenty of different reset methods already available and I’ve been using Eric Meyer’s method for some time now but have started to realize that in most projects, I only use a fraction of the styles specified and much more often find myself rewriting a whole different set of styles that I use in all my projects.
Therefore, I’ve decided that it’s going to be more worthwhile using Meyer’s CSS as a starting point but putting together my own starter template which I can use for all my projects which I’d like to give you an insight into.
The CSS Reset
The first part of my stylesheet is very similar to Eric’s but is a little simpler. Within my version, all I want to do is remove the margin and padding’s from all elements but I’ve also included the legend and fieldset within the reset (I’ll cover the reasons why, later in this article).
I also like to remove the border from both images and fieldsets so I declare a border of zero for both of these elements.
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
margin: 0;
padding: 0;
}
img, fieldset {
border: 0;
}
Formatting
The next thing that I want to tackle is the font formatting. Now, this is fundamentally different from Meyer’s reset as this is actually dealing with the format of the content whereas Meyer’s method deliberately only deals with creating a baseline to start a page from.
Within this rule, I always specify the font-size and line-height as 100%/1.2 as this gives all browsers consistency. You may want to change the line-height depending on the layout but I find that this gives adequate spacing for all fonts.
In most recent projects, I’ve started using lucida sans but you can obviously change this for the font that is suitable for your project. I also include the form elements within this style so that they don’t need to be explicitly set separately.
body, select, input, textarea {
font: 100%/1.2 "lucida sans", verdana, arial, helvetica, sans-serif;
}
The Container
I always use a container div immediately after my opening body tag and therefore I use the container to control the width of the content and to also adjust the font-size if required.
Again, this may vary from project to project but I always use it and therefore I think it’s worthwhile including within my CSS.
#container {
font-size: 0.8em;
width: 760px;
margin: 0 auto;
}
Headings
Headings are one of the elements that really have no consistency by default and therefore I like to include some settings to start with, even if I plan on changing these later in development.
The first thing I like to do, is to specify some padding on the bottom of all the headings. I use 0.8em as this coupled with the line-height we specified on the body gives us a nice gap underneath the heading which is exactly the same size as the heading text itself.
h1, h2, h3, h4, h5, h6 {
padding-bottom: 0.8em;
}
Next, I’ll give each heading it’s own font-size relative to the base font-size of the body. I start by giving heading6 a font-size of 1em and give each larger heading an increase of 0.2em.
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
Paragraphs
Most of the styles that we need for paragraphs have already been created due to the way that they’ll inherit the font-size, font-family and line-height from their parents but the one thing we do want to setup is some padding on the bottom to create some nice spacing between paragraphs.
I find that 1.2em tends to work well as this is slightly larger than the height of the text contained within the paragraph.
p {
padding-bottom: 1.2em;
}
Reusable CSS classes
I like to include reusable classes within my CSS so that I can easily reference styles that I tend to use across multiple projects.
I’ve included error and confirmation at the moment but this may grow with time. Please note though that this is generic and therefore shouldn’t include site specific classes but instead styles that you’re likely to use across different projects.
.error {
color: #C00;
font-weight: bold;
}
.confirmation {
color: #080;
font-weight: bold;
}
Fieldset and Legend
You might remember earlier in the article that I touched on the subject of fieldsets and legends being something that I like to deal with slightly differently. Currently they’re practically impossible to style consistently across multiple browsers so I like to use John Faulds method which you can read more about on his website in the article Legends of Style.
Just in case you haven’t read John’s article, the HTML that I’d use for the fieldset and legend would look something like this…
<form method="get" action="css-reset.html">
<div class="fieldset">
<fieldset>
<legend><span>Legend</span></legend>
</fieldset>
</div>
</form>
And therefore the CSS that I include within my reset css file is as follows.
div.fieldset {
border: solid 1px #999;
padding: 1em;
margin: 1em 0;
}
legend span {
display: block;
font-weight: bold;
font-size: 1.4em;
color: #000;
}
Summary
Here’s the complete CSS file that you may download and use within your projects.
This CSS is by no means meant to be a finished version but is something that I’ve started using as a step on from Eric Meyer’s version of the reset css file. It may not be suitable to everyone and I’m sure that you may want to change a few parts so that it’s tailored for your own individual project.
What it is meant for though is to be used as a starting point to reset styles to provide a consistent starting point for all browsers along with some basic formatting which can then be built upon to create much more complex and complicated layouts.
Please feel free to comment if there’s anything you think I may have overlooked or any extra styles that this reset css file could benefit from.
Pingback: Dave Woods - HTML, CSS, Web Design » Reset CSS
Pingback: CSS Reset « DELE DURO!!!
IMO for headings (h1 – h6) and paragraphs (p) better using margins instead padding – vertical margins may collapse:
http://www.w3.org/TR/CSS21/box.html
Padding is better, because margin’s collapse its a shitty thing most of the time. for me at least..don’t like it.
It’s best to use collapsing margins, much better control once your using tags.
Pingback: CSS Reset
Thanks for the feedback. I think I’ll change the padding’s on the headings and paragraphs to margin’s instead as it does probably make more sense so that any top margin’s that are applied to following elements can collapse to the 1.2em height that’s been specified on the paragraphs.
Obviously a larger gap can be given if a top margin to subsequent elements is larger than 1.2em so this would provide an extra bit of flexibility.
I may write an article on collapsing margins over the next few days as it can definitely be an area of confusion.
rob: you mean to say collapsing padding, right?
I personally use margins because it does not collapse and it is semantically correct as well. Padding is like extending the boundaries of the container, while margin refers to an empty gap, or a boundary outside of the container. In text containers like headings and paragraphs, this is equivalent to an empty line break.
Hi Dennison, Rob is correct in saying collapsing margins. For example, if you take a paragraph with margin bottom 1.2em and set the top margin on the following element to 1em the gap will collapse and only be 1.2em.
If on the other hand you used padding, then the padding would be added together to give you a space of 2.2em.
Hope that makes more sense, but I will write an article on it shortly.
Also, I wouldn’t say that either padding or margin have any semantic meaning as that really only applies when talking about HTML elements.
Which, for what it’s worth, is exactly what I hoped people would do with my work in that area, and I’m glad to see that happening. Kudos to you, sir!
Thanks for commenting Eric. That was exactly what I was aiming for with my CSS reset and I’ve tried to acknowledge that your method deliberately only deals with creating a base for browser consistency and then leaves the formating for the author to build upon.
Keep up the good work.
I tend to find these ‘reset stylesheets’ rather messy, ugly and totally blotted!
I tend to just use * {
margin:0;
padding:0;
}
and find it works fine for me.
In regards to the use margins or padding argument, I personally try and use margin as I find it is less buggy than padding due to the IE box model problem.
Hi Jermayn, The global reset method works but if you’re dealing with form elements then it can cause lots of problems especially cross browser which is why you may be starting to see developers use it less and less.
Using the method above allows you to remove it only from the elements that you explicitly want to remove it from whilst leaving form elements untouched and it only uses a few extra lines of code so I don’t see any harm.
Also, I’m not sure what you mean with regards to IE’s box model as both margin and padding (and border) effect IE5’s box model (or IE6 and IE7 in quirks) so using margin or padding should have no difference in that regard.
Pingback: Dave Woods - HTML, CSS, Web Design » CSS Margin Collapse
For myself, I tend not to remove padding and margin from inline elements, as I’ve never had a problem with them except when displaying as blocks; if that happens, I add them to the reset.
I also set the font-size on html to 62.5%, as this gives a default em size of 10px, which makes it much easier to calculate heights and widths in em-based layouts.
Jermayn – I read somewhere that the global reset “may” but extra strain on the rendering of the page. Not sure if it’s true, just something I read.
Dave – great post, cheers!
Pingback: Dave Woods - HTML, CSS, Web Design » CSS Fixed Layouts Starter Kit
Pingback: Reset.css | IнTересности
Hey Dave,
I dig what you have done here, but feel that there are a number of elements that get reset to margin:0;padding:0 that do not need to be reset. Basically it’s the in-line formatting elements and tags
i.e. , , , , , , , , , &
From all the browsers I’ve used and the W3C recommendations, these tags always start life as margin:0;padding:0; without any CSS.
Do they really need to be reset?
as it did not show the elements as they became HTML, i’ll write them again….
i.e. a, span, abbr, acronym, b, i, strong, sup, sub, em, tbody, thead, tfoot….. etc
Good point Andy and you’re probably right in that you could actually leave those out of the reset.
The main reason that I’ve had these in is because in the past not all browsers have followed the W3C recommendations and therefore it’s been more of a safety net to ensure compatibility and consistency but as we move closer to a standards compliant web, you should be ok to leave these out.
Hope that makes sense.
Pingback: Dave Woods - Freelance Web Designer UK » 10 CSS Tips Every Web Developer Should Know
thank you
why not reset with *{margin:0;padding:0}
Hi doc, using the star selector resets form elements as well which can present difficulties when trying to style these elements with CSS so is best to only reset the elements that you can control.
I always use *{margin:0;padding:0} and have not had any problems with form elements (like textboxes and buttons?), I’m not sure what you mean. Can’t you just then set your own margin and padding to form elements anyway?
Pingback: 網站製作學習誌 » [Web] 連結分享
cool thanks a lot for sharing another css reset was looking for something a little less & basic but link is down for the download just to let you know.
@Dotker, thanks for letting me know. A couple of the files from some of the articles went missing when I redesigned the site… that should now be working again
@Tony B, in some browsers yes that’s fine but Safari in particular can be a bit funny when it comes to form elements so it’s best in my experience not to use the * selector for the reset.
Pingback: Save Time and Energy with Eric Meyer's CSS Reset | FaceTime Strategy