CSS Starter File
CSS Starter File Example
Margin & Padding
The following css will undo browser defaults for margin and padding. An example of this would be the form element in Internet Explorer. IE gives the form tag extra padding above and below it. Below I try to fix many of the quirks set by different browsers.
Also you may want to redefine or remove the following tags so that they still act like they should: p,ul,li since they tags are expected to have some padding.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
Lists
This is useful for designers who use css menus.
ul,ol { list-style: none }
Headings
Browsers tend to render heading tags differently than each other. There are two ways to handle this. One way is to set the size of all your heading tags the same. The other way is to set each heading tag individually. Further down you will see an example of how to set each heading tag individually. I would probably suggest setting each tag individually and then using it on your site rather than using custom css classes for various sized text.
h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em; }
Anchors and Images
This removes the blue color and border for all anchors and images. This is generally useful for images. You will probably set you anchors specific colors later on.
a img, img { border: none; }
a { text-decoration: none; }
Tables
This gives your data tables a default border. Border-collapse also removes the need to put nbsp's into empty cells. No longer will you need to define cellpadding, cellspacing, and bordercolor in your table tags.
table
{
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
}
th, td
{
border: 1px solid black;
margin: 0px;
padding: 0px;
}
I would also recommend creating styling for table headings
th { }
It is also a good idea to give your table cells a default background color as well as an alternate color. This helps imensely during a redesign as you can change your table colors quickly without having to touch all your form pages.
td.def { background-color: #ffffff; }
td.alt { background-color: #ececec; }
Body
It's best to set a lot of defaults on the body element. I almost always change the spacing between letters and lines. It's also a good idea to give a default color and background color for your entire site.
body
{
font-family:;
font-size:;
letter-spacing:;
word-spacing:;
line-height:;
color: #000000;
background: #ffffff;
}
Headings
Here we set the style for individual headings. This is very important for accessibility and makes your life easier in the end. Almost all designers use custom css classes for various headings. The problem is when you disable css all the heading look exactly the same. By using html headings the headings are still different once css is disabled. This helps screen readers and also search engines.
/* Banner */
h1 {}
h1 span { text-indent: -9999px; }
/* Pagetitle */
h2 {}
/* Head */
h3 {}
/* Subhead/Bold */
h4 {}
Form Elements
While form element styling isn't completely supported by any browsers it is a good idea to make css definitions for all of them. A common mistake many designers do is use the input tag for text boxes and buttons. Later down the road when they want to set custom styles to their buttons, they have to open each page and add a class the the input buttons. A better way to do this is to use the html button tag from the beginning. You can then reference buttons differently than input boxes.
Fieldsets and legends are also coming back into style. Browsers tend to render these differently from each other so it is a good idea to set your own default border and color to these in the beginning stages of your site.
It is also important to use label tags, not just for accessibility but for styling. You can then down the road set different colors and or make them bold. This is a better approach than creating a whole new class just for labels.
I would also suggest setting font sizes to your form elements. Textareas by default will have monotype font unless you set it to the same font you use elsewhere on your site. Select boxes tend to use their own fonts as well. It's a good idea to use a single line css reference and set all your form elements to one font type and size.
form { }
fieldset { border: 1px solid #cccccc; }
legend { color: #000000; }
label { }
select { }
option { }
textarea { }
input[type="button"] { }
input[type="checkbox"] { }
input[type="file"] { }
input[type="hidden"] { }
input[type="image"] { }
input[type="password"] { }
input[type="radio"] { }
input[type="reset"] { }
input[type="submit"] { }
input[type="text"] { }
button { }
Common html Tags
There are also some common html tags that you may wish to use down the road. Why not style them from the beginning? Also this eliminates the chance for you to create a new class for them and forces you to use html tags making it more accessible.
address { font-style: normal; }
acronym, abbr { border-bottom: #000 1px dashed; cursor: help; }
blockquote, q {}
code {}
hr {}
Common Classes
Many people might argue here that instead of using 40 single style classes, it would be wiser to create a whole new class. I personally disagree. While new classes help, with site redesigns the names you assign your classes often loose their meaning in the redesign. Also rather than wrapping text in several html tags you can use multiple css classes in one line.
Example:
<font size="+2"><center><i><b>Text</b></i></center></font>
You can do this instead:
<span class="fifteen center i b">Text</span>
.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }
.sup { vertical-align: super; }
.sub { vertical-align: sub; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.justify { text-align: justify; }
.eleven { font-size: 11px; }
.twelve { font-size: 12px; }
.thirteen { font-size: 13px; }
.fourteen { font-size: 14px; }
.fifteen { font-size: 15px; }
.b { font-weight: bold; }
.i { font-style: italic; }
.u { text-decoration: underline; }
.o { text-decoration: overline; }
.s { text-decoration: line-through; }
.lowercase { text-transform: lowercase; }
.uppercase { text-transform: uppercase; }
.camelcase { text-transform: capitalize; }
.smallcaps { font-variant: small-caps; }
.slant { font-style: oblique; }
.indent { text-indent: 10px; }
.wrap { word-wrap: break-word; white-space: normal; }
.pre { white-space: pre; }
.block { display: block; }
.inline { display: inline; }
.none { display: none; }
.visible { visibility: visible; }
.hidden { visibility: hidden; }
.collapse { visibility: collapse; }
.circle { list-style-type: circle; }
.disc { list-style-type: disc;}
.clear { clear: both;}
ul.collapse { list-style-type: none; }
ul.collapse li { list-style-type: none; display: inline; }
Once you have finished defining global css styles, you will want to define elements found only in you content area.
If for some reason you will be using these styles outside your content area place them somewhere else without #content in
front of them. This is probably most helpful with links as you will use various styles for different spots in your template.
#content
{
letter-spacing:;
word-spacing:;
line-height:;
}
#content a:link {}
#content a:hover {}
#content a:active {}
#content a:visited {}
#content ul, ol {}
#content li {}
Download the complete starter.css file
Props go to:
http://green-beast.com/blog/?p=109
http://tantek.com/log/2004/undohtml.css
http://usabletype.com/css/font/styles/