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

Andrew
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.

sunil sk
Mar 11 2007

good one for those peoples who using single stylesheet for multiple browsers

Niko
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

Chris
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

visible225064
Mar 29 2007

مرحباً بكم

vinodvv
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

Nick van der Linde
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.

Yogi Mccaw
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.

kerberoS
Apr 8 2007

Very good! I will translate for my blog

Wolf
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;
}

jamaicamama
Apr 13 2007

Great article.  This will really help!

Piyal
Apr 17 2007

Very good article. Will help a lot.

aljuk
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.

fuzzmop
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 :)

aljuk
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!

mowgli
Aug 18 2007

very helpful and nice article....!!

a.fraile
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.

a.fraile
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/

Ben Rosen
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; }

lewis litanzios
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!

Have your say

Post details

6th March 2007

20 Comments

What's this?

This is a journal entry written by George Ornbo, a web designer who lives and works in London, England.

Subscribe

Journal articles by RSS

Journal articles by Email

Recommended Links by RSS

Participating / Attending

Inclusive New Media Design

dConstruct 2008 - Designing the Social Web

Member of the 9 Rules Network Media Temple