Pre-packaged CSS

When we get into building a HTML / CSS prototype there are files that are just flat out needed. Unlike design and strategy, which can be a lot more free-form, there are steps that you must take with development, files that are required. After a while each developer or development team has files that are created, HTML structure, and CSS that are always used. I am going to focus primarily on what I call Pre-packaged CSS – essentially the meat of our CSS that we use in almost every project. Why rewrite all these rules for every single project? That just seems like a waste of time.

Below I will show you what we use and why, if you want to use it please feel free, modify it or whatever. It is not a lot, but it helps more than you can imagine. Do what works for you and helps you work more efficiently, try to remove redundancy and keep it light if possible.

To the thick of it.

The body:

body {
margin:0;
padding:0;
font: normal 62.5%/1.6em Arial, Helvetica, sans-serif;
background:#fff;
}

You can see my post on font sizes with EMs and Pixels here if you are wondering about the 62.5%. We set the margin and padding to 0 and leave the width to a wrapper container. If we need to define a background image here or add any additional styles we will.

Images:

img {
border: none;
}

Setting your images border to none is a helpful way to get rid of the auto addition of borders to linked images. If we want it to have a border we prefer to write a rule for it.

Links:

a, a:link, a:visited {
color:#39c;
text-decoration: none;
}
a:hover {text-decoration:underline;}
a:active, a:focus {
outline:none;
}

Do not forget your pseudo classes, this is a common mistake, and will save you trouble when trying to develop for multiple browsers. Setting the outline to none for the Active and Focus state of links will get rid of that dotted border some of you probably hate.

.button:

a.button, a.button:link, a.button:visited {
display:block;
overflow:hidden;
margin:0;
padding:0;
height:0;
background-position:0 0;
}

We use what are known as sprites or rollovers for our buttons. Stacking the 3-4 states of a button in 1 single image, so you have a single load and no delay between states waiting for an image to load. Typically this consists of an Inactive, Hover, Active and Disabled (this depends on use). We set all the required layout properties and values here so all we have to do is define the background-image, width, and “height”(using padding-top instead), and then background-position of the hover and active states. This is extremely useful, and removes a lot of redundancy in code that would be rewritten for every button.

Headings, Divs and Forms:

h1, h2, h3, h4, h5, h6, div, form {
margin:0;
}

Over time we discovered that many of our layout problems came from margin applied to the above elements. IE in particular handles margin differently at times and the default it applies to some elements like a form can cause a bit of frustration. So we just zero it out, and define it if needed.

.container:

.container {
position:relative;
margin:0;
padding:0;
width:100%;
overflow:hidden;
}

Over time we found that we were writing the same property/value pairs for a lot of elements that were acting as containers for content, or floated elements etc. So we created a class that takes care of everything we would need. Position will be inherited, zero out the margin and padding and define on an ID level if needed. Width ends up being defined for custom elements, but better to overwrite 1 rule than rewrite 5.  overflow:hidden will take care of your floating children issues etc. This solves a lot of problems with cross browser compatibility.

Simple visuals:

.floatL {float:left;}
.floatR {float:right;}
.align_left {text-align:left;}
.align_right {text-align:right;}
.align_center {text-align:center;}

These are just a few simple rules we use to help with some simple layout issues. We can add a class to an element to float it or align it. Usually only used on child elements of .container, this just helps with quick and simple adjustments.

These are what we use as a base. Typically we will quickly add our structure to that as well. But we do not include it in the default since that varies on a per project basis.

If you have any CSS rules that are a must or little tricks that you use please post them. We are always learning and coming up with new and quicker ways of doing things. Find what works for you and helps you work most efficiently.

If you want to use our file: default-css