Default Styles for CSS
Coding CSS can quickly run into difficulties with different browsers interpreting code in different ways. Designs will never look the same in every browser but you can help yourself by using a default style set when you start coding.
Comment your code
To start with it is important that you document your code. I like Andy Budd's approach of writing the version number and adding your email and website address before applying any rules. You can ease maintenance by noting changes, or at least saying where the log of amends is kept.
}
/*-----------------------------------------------------------------------------
[client] Screen Stylesheet
version: 1.0
date: 01/03/07
author: [your email]
email: [you at domain dot com]
website: [your domain]
version history: [location of file]
-----------------------------------------------------------------------------*/
Decide how you want to divide your stylesheets
I find that most of the time I can get away with one stylesheet. Sometimes though a site will become large enough to warrant more than one stylesheet. Indeed some CSS authors prefer to split them up. It is a matter of personal choice. So next in my default stylesheet I have a section where any other stylesheets can be pulled in to the main one.
}
/* Import other stylesheets
-----------------------------------------------------------------------------*/
@import url("typography.css");
Remove default styles
Tantek Celik wrote a stylesheet to remove default styles from elements. This might suit you so have a look. Personally I find that one universal rule is enough to rebase elements. I haven't experience any performance issues using this on many different projects.
}
/* Remove padding and margin */
*
{
margin: 0;
padding: 0;
border: 0;
}
Why do this? Browsers apply different styles to different elements. So it makes sense for me to know where I am starting from. This simple rule allows me to know that all elements will start by having no margin, padding or border.
Have classes for floating and clearing
Next I have a class for clearing, again something I learnt from Andy Budd and his excellent book. Clearing floated elements is a common task so it is well worth it. Also you will probably want to float elements left and right so I like to have these too. I use these for images quite a lot.
}
.clear
{
clear:both;
}
.right
{
float: right;
}
.left
{
float: left;
}
Set the document up
I have found that a good framework for setting up a document is to set font size and colour on the body tag. I apply any background image here to act as wallpaper. I use Richard Rutter's approach to sizing text using ems which I really recommend for maximum control over typography.
Then I have a wrapper div to hold the content and set the width of the page. This also centres the content and applies a white background.
}
body
{
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align:center;
}
#wrapper
{
width:980px;
text-align:left;
margin-left:auto;
margin-right:auto;
background-color: #FFFFFF;
}
Handling typography
Then I like to set up the default font sizes. Using Richard Rutter's method we know the default size is 10pt so we can create accurate sizings.
h1
{
font-size: 2.2em;
}
h2
{
font-size: 2.0em;
}
h3
{
font-size: 1.8em;
}
h4
{
font-size: 1.6em;
}
h5
{
font-size: 1.4em;
}
p
{
font-size: 1.2em;
}
Create sections
Large CSS documents are diffiuclt to manage. I like to divide mine up using sections of the page or even templates. Each project will vary but I like put some sections in by default and then change it if necessary:
}
/* Header
-----------------------------------------------------------------------------*/
/* Navigation
-----------------------------------------------------------------------------*/
/* Footer
-----------------------------------------------------------------------------*/
/* Homepage
-----------------------------------------------------------------------------*/
/* Your template
-----------------------------------------------------------------------------*/
Forms
By default on forms I like to give text input boxes a little padding to move the text away from the edge of the box and give it a grey border.
}
/* Forms
-----------------------------------------------------------------------------*/
input.text
{
padding: 3px;
border: 1px solid #999999;
}
Tables
Finally for tables I again use Andy Budd's default to know where I am in tables - I've found it works well.
}
/* Tables
-----------------------------------------------------------------------------*/
table
{
border-spacing: 0;
border-collapse: collapse;
}
td
{
text-align: left;
font-weight: normal;
}
Default XHTML
My default XTHML is as follows. Normally I add in print stylesheets, icons and RSS feeds as the project progresses.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page title here</title>
<style type="text/css" media="screen">@import "/css/screen.css";</style>
<meta name="DC.title" content="Title here" />
<meta name="DC.subject" content="Keywords here" />
<meta name="DC.description" content="Description here" />
<meta name="DC.format" content="text/html" />
<meta name="DC.publisher" content="Publisher here" />
<meta name="DC.language" content="en" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
A matter of personal choice
Of course I am not saying this is the best way to have a default template to begin coding templates. But it works for me. I'd be interested to hear what others do so please do leave a comment if there is anything you strongly agree or disagree with.
If you'd like to download a copy of my default files you can get them here.
Update: Juan Manuel Lemus has translated this article into Spanish. Thanks Juan!
Comments
What's this?
This is a journal entry written by George Ornbo, a web designer who lives and works in London, England.
Subscribe
Participating / Attending
Possibly related
Mar 7 2007
Great post. I was just thinking how I always start out with the best of intentions and end up with a mess of CSS at the end.
This is a really nice way to do things from the start and you may well have converted me.
Mar 11 2007
good one for those peoples who using single stylesheet for multiple browsers
Mar 28 2007
Nice post, but I think it is cooler to split the css in multiple files for example:
navi.css
main.css
form.css
and last but not least
ie.css
in combination with php includes you can hold your sites realy clean
Mar 28 2007
Thanks for sharing this great post. I will use this kind of technique in the future. Even great if you build tool-collections with styling for different sites. I could imagine something like standard.css, typo.css and effects.css
Mar 29 2007
مرØباً بكم
Mar 29 2007
Nice post on maintaining CSS. Most of the time we have create multiple child className in order to hack browsers.
When we were working on a project. we look at the CSS code and found most of the lines to be repetitive because of browser hacks
Mar 29 2007
Some nice guidelines you have here. I also have a set of default styles that I use in my own projects and they are very similar to these. One thing I always do, regardless of the amount of css, is split up my css files into something like content.css, navigation.css and layout.css. By the way, you might want to use shorthand property “margin:0 auto;” instead of declaring both left and right margins separately.
Apr 7 2007
Thanks. For those of us who need our own websites but whose primary profession is not web coding - we need easily self-teachable and quick ways to get things done.
Apr 8 2007
Very good! I will translate for my blog
Apr 11 2007
Well… the reason not to use the star selector to set the default margin and padding to 0 for every element is simple. It messes up form inputs (for example select)… therefor, it’s better to use this rule to standarize margin and padding:
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0pt;
padding:0pt;
}
Apr 13 2007
Great article. This will really help!
Apr 17 2007
Very good article. Will help a lot.
Jun 30 2007
Here’s a useful one:
a {outline: none;} - removes (in compliant browsers) the annoying dotted box that appears around links when you click them.
A good article, ‘though I go with Tantek’s approach to zeroing out global padding/margins. There are too many issues with the star selector for it to be viable.
Jul 2 2007
“a {outline: none;} - removes (in compliant browsers) the annoying dotted box that appears around links when you click them.”;
I used that happily too, until I found out it was an accessibility issue for those who are use tab on their keyboard… It may be annoying when you click the link, but it’s even more annoying trying to find what link your on with the keyboard…
It’s probably not as much of an issue anymore though… because most computers come with a mouse AND a keyboard :)
Jul 2 2007
@fuzzmop - yeah I was aware of that, but to be honest it’s not an issue that bothers me. I should do more research from a screenreader point of view ‘though, as being accessible to the hard of sight is something I’m concerned about, but I don’t see that a visual indicator would matter in that situation either way, unless switching off the outline causes some other effect? I just hate those dotted link boxes!
Aug 18 2007
very helpful and nice article....!!
Oct 26 2007
Very helpful article - thank you.
While searching for more info on how to code CSS better, I came across the following related articles:
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch/
http://www.slideshare.net/maxdesign/modular-css
http://fadtastic.net/2007/10/20/branding-your-css-stylesheets/
Might be of use to front-end coders that read your article.
Oct 26 2007
Along the lines of producing clean, well formatted CSS, I think it is helpful to use tools to format and optimise your CSS code. A list of these CSS tools are given in the following article, under section ‘Formatters and Optimizers’:
http://www.smashingmagazine.com/2006/09/02/list-of-css-tools/
Jan 20 2008
Eric Meyer made another post recently regarding CSS resets: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
His reset is much better than * { padding: 0; margin: 0; }
Jan 28 2008
excellent post. just what i was looking for (despite having budd’s book in front of me - which is excellent too everyone!)
big up!