CSS Reset
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…
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.
Thanks: http://www.dave-woods.co.uk/
0 comments:
Post a Comment