Introduction

It took me years to realize how much time I would save by setting up a default type styles sheet for my web design work. It wasn’t until I read an introduction to Ruby on Rails in 2005 that I got the whack on the side of my head that woke me up. The concept that broke through my time wasting behavior was DRY. Yes, technical writing is usually dry, but in this case it is an acronym for don’t repeat yourself.

Obvious, you say; and you’re absolutely right. Perhaps it was simple laziness that stopped me from seeing the light. It doesn’t matter. I finally realized that it was time to write out some the common CSS selectors and some standard values. Now at least I am being smart lazy buy using a standard type styles sheet instead of stupid lazy by needing to recreate the same content over and over.

What follows is my default CSS style for HTML with many and probably excessive comments. Most of the less than obvious additions are intended to handle Internet Explorer’s (IE) less that stellar handling of CSS. I won’t include any outright hacks but you will definately see some kludges, starting with html.

Technorati Tags: puppy

html {
font-size: 100%
} /* this may not be necessary anymore but it handles an old IE problem with displaying combinations of percent and em sized fonts correctly. */

* {
margin: 0; padding: 0;
} /* This sets the default margin and padding of all page elements to 0 giving nice control over every page element. I can eliminate a lot of head scratching when trying to figure out why things don’t line up. Zero it all and start from scratch. */

body {
color: #333;
/* Dark gray text against a white background. It’s readable without the starkness of pure black on white. Chances are this will be different on every site but this starts us out. These are the shorthand color notations. */
background: #fff;
font-size: 62.5%;
} /*This is a clever idea that sets the basic font size in modern browsers to something approximating 10 pixels. From now on all font measurements will be specified in em’s, a relative measurement that equals the size of a capital M. All page elements (almost) should now be 1em and will need to be individually specified. This allows us to over-ride the default browser style sheet and replace it with our own. */

th, td {
font-size: 1.2em;
} /* Another IE kludge. It doesn’t inheret font sizes from the body as it should. Ideally you would include all text within table cells in a p tag. Practically, I forget sometimes, especially when I’m populating a table dynamically. */

th {
font-weight: bold;
text-align: center;
} /* This is probably redundant but explicitly setting all values is what this style sheet is about */

h1, h2, h3, h4, h5 {
font-weight: bold;
font-family: Georgia, Times, serif;
/* Obviously this is arbitrary but if I put it in to start with I won’t forget to set the font family. Change to suit. A shorthand version would be font : bold georgia, times, serif;*/
margin: .1em 0 .5em 0;
/* a tiny top margin and a smaller bottom margin than default. 0 margins for left and right *}

h1 { font-size: 2.4 em; } /* Twice the size we’ll use for paragraphs. Remember that all font sizes have been reset to about 10 px. This makes the h1 element about 24 pixels large. */

h2 { font-size: 2em; }

h3 { font-size: 1.7em; }

h4 { font-size: 1.4em; }

h5 {font-size: 1.2em; }

p {
font-size:1.2em
/* This makes the default font size about 12 pixels, which is a good compromise between compactness and readability
font-family: verdana, helvetica, sans-serif;
/* Again, this is arbitrary, but sans-serif fonts tend to be easier to read on screen than serif ones. It also stands out nicely against the serif Georgia */
line-height: 1.5em;
/ * to create some breathing space between lines in print design this is called leading. 1.4em is also nice. */
margin: .1em 0 .7em 0;
/* top margin very small , left and right margins 0, bottom margin a little less than browser default */
}

li, li li, li li li, {
font-size: 1.2em;
line-height: 1em;
margin-bottom: .5em } /* All the li selectors are included to keep list elements from becoming progressively smaller as they are nested. That’s a gotcha when using relative sizes for font display. Three levels are all that you would practically encounter and I didn’t use the li * selector because I sometimes include other HTML inside of lists */

ul {
margin-left: 1.8em;
} /* Remember that we zeroed out all margins and have to specify them for each element. This is a good average value */

ol {
margin-left: 2.1em;
} /*Ordered lists need just a bit more margin */

blockquote {
margin-left: 2.2em;
padding: .2em;
background: #efefef;
border-left: 1px dotted #ccc;
} /* First, the left margin. That’s all that’s really needed here. The other selectors are one common way to set blockquotes off from the rest of the text. This gives them a very slight background color and left dotted border. Obviously this is a great place to set your own styles. Again, I include a default to so I don’t forget. */

dl {
font-size: 1.2em;
} /* New element. Need to set font size */

dt {
font-weight: bold;
margin-bottom: .4em;
} /* I like definition terms to stand out, hence the bold font-weight. The bottom margin is to separate the term from its definition.(The dt margin is not additive with the top dd margin. It will be .4em not .6em) */

dd {
margin: .2em .5em .4em 2em;
line-height: 1.3em;
} /* just setting the breathing space around the definitions */

input, select {
font-size: 1em;
} /* This is my personal preference. Your milage may vary */

label {
font-size: 1.2em;
}
/* You are using labels for your form elements, aren’t you? */

hr {
margin: .2em .1em .6em;
}
/* Just a little breathing room for the horizontal rule */

cite {
font-style: italic;
}
/* Probably redundant. Here for completeness */

abbr, acronym, .help {
border-bottom: 1px dotted #333; cursor: help;
}
/* A little touch that sets acronyms and abbreviations a little dotted underline and possibly a tool tip. I’ve added the class help for times when I want to define something. is used in conjunction with the TITLE attribute on an ABBR or ACRONYM tag, or a SPAN with class=”help”, to create an underline effect that is different from the hyperlink underline. Changing the cursor to “help” implies that the word is not clickable, and the TITLE attribute expands the abbreviation or acronym.*/

img {
border: 0;
}
/* Older browsers will place a border, in your link color, around a linked image. Just say no. */

a:link {
color: #036;
text-decoration: underline;
}

a:visited {
color: #603;
text-decoration: underline;
}

a:hover {
color: #900;
text-decoration: underline;
}

a:active {
color: #c66;
text-decoration: underline;
}
/* These link attributes will almost always end up being changed. If they are here I’ll always know where to find them. BTW use them in this order. Having everything in the same place every time makes things simple. I guess the complete instruction would be KISS; DRY. (keep things simple stupid; don’t repeat yourself) */

/* This concludes the default HTML section. Not that many elements, are there? Below are selectors and classes that I usually throw in for completeness. */

.imageleft {
float: left;
margin: 2px 4px;
}

.imageright {
float: right;
margin: 2px 4px;
}
/* With strict XHTML we aren’t supposed to use the img align attribute. Creating a couple if classes that float the images left or right lets us achieve the same effect and validate. The margin setting replaces v-space and h-space. These classes are only used for image placed in the document flow, not design elements, so I will assume they need the space. */

.floatleft {
float: left;
width: 200px;
padding: 5px;
border: 1px solid #ccc;
text-align: center;
}

.floatright {
float: rigcht;
width: 200px;
padding: 5px;
text-align: center;
}
/* What’s the difference between these and the .imageleft/right classes? These floats are intended for callouts or images with captions. Notice the explicit width, border, text centering and padding. The widths and borders are arbitrary and will be adjusted for each layout, or not. They are there. */

.clearing {
clear: both;
height: .1%
}
/* Once we start using floats or even right and left aligned images it becomes useful to be able to clear text below the floats or images. Depending on your layout you may also or need to use clear-left or clear-right. */

td { padding: 3px; }
/* Again, this is using CSS to replace a depreciated attribute, in this case cellpadding. If you want cellspacing use margin instead of padding, or both if you want both. I’m assuming here that you are only using tables for data. If you’re still laying out your site with tables, obviously you would want to set margin: 0; padding 0; for table, th and td. This should inherit from the body * selector, but isn’t reliable in all versions of IE. It’s also usually best to give each table a unique id or at least a class for setting width in CSS instead of HTML. */

.red {
color: red;
}

.green {
color: green;
}

.smaller {
font-size: smaller;
}

.larger {
font-size: larger;
}
/* It is often useful to have a couple, or more, font sizes and colors pre-defined. Some people use .warning or .caution for the .red class and .success for .green. It is supposed to be express the meaning in the code. Whatever. Colors for warnings should be supplemental information, not something you rely on.
With a good friend who is an avid web user and who is quite color blind, I’ve learned to not rely on color for warnings. Color is good information for most of us but shouldn’t be the only indicator of problems. But still colors can be helpful supplements, or just fun. We all know that red shoes make us run faster, don’t we? My boss’ 10 year old daughter told me that recently. It’s helpful to define a couple of color classes that compliment your design and include them in the style sheet.

I have set up content management systems for a number of client, and have clients who use Adobe’s Contribute. With a little extra work I can disable all their font size and color changing ability and only leave them with my choices of color and size. Never trust a client’s good taste or sense. Give them a couple of customization choices and they will normally be happy and won’t cry for more control.

/* ************************* */

That’s pretty much it for text display. CSS layout is another subject, as is CSS for forms. Fortunately the parts are additive. Start with text display. Customize your own text stylesheet and save hours on upcoming projects. And having a pre-defined stylesheet will help insure that you don’t forget something that will need fixing later.

I’m using Yahoo’s Grids for my basic CSS layout. Their system is a little verbose but seems pretty bulletproof. The Grid templates will give you a solid page layout but you will still need to style them. That could take some hours the first time out. Still, it seems the best generic CSS implementation around. You might want to check that out.

Possibly related:

This entry was posted on Thursday, February 8th, 2007 at 12:21 am and is filed under Best Practices, CSS, Tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.