Archive for 'CSS/XHTML'

Master Stylesheet: The Most Useful CSS Technique

One of the most common mistakes I see beginners and intermediates fall victim to when it comes to CSS is not removing the default browser styling. This leads to inconsistencies in the appearance of your design across browsers, and ultimately leaves a lot of designers blaming the browser. It is a misplaced blame, of course. Before you do anything else when coding a website, you should reset the styling.

Below is a basic master stylesheet, some styling from elements has been removed to keep it simple, like colors, but once you give it your own touch, you’ll have a stylesheet that will help with the majority of your CSS nightmares:

/***** Global Settings *****/
html, body {
border:0;
margin:0;
padding:0;
}

body {
font:100%/1.25 arial, helvetica, sans-serif;
}
/***** Common Formatting *****/
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}

h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font:2em arial, helvetica, sans-serif;
}

h2 {
padding:20px 0;
letter-spacing:-1px;
font:1.5em arial, helvetica, sans-serif;
}

h3 {
font:1em arial, helvetica, sans-serif;
font-weight:bold;
}

p, ul, ol {
margin:0;
padding:0 0 18px 0;
}

ul, ol {
list-style:none;
padding:0 0 18px 40px;
}

blockquote {
margin:22px 40px;
padding:0;
}

small {
font-size:0.85em;
}

img {
border:0;
}

sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}

sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}

acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
/***** Links *****/
a, a:visited {
text-decoration:none;
}
/***** Forms *****/
form {
margin:0;
padding:0;
display:inline;
}

input, select, textarea {
font:1em arial, helvetica, sans-serif;
}

textarea {
line-height:1.25;
}

label {
cursor:pointer;
}
/***** Tables *****/
table {
border:0;
margin:0 0 18px 0;
padding:0;
}

table tr td {
padding:2px;
}
/***** Wrapper *****/
#wrap {
width:960px;
margin:0 auto;
}
/***** Global Classes *****/
.clear { clear:both; }

.float-left { float:left; }
.float-right { float:right; }

.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }

.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }

.wrap { width:960px;margin:0 auto; }

.img-left { float:left;margin:4px 10px 4px 0; }
.img-right { float:right;margin:4px 0 4px 10px; }

.nopadding { padding:0; }
.noindent { margin-left:0;padding-left:0; }
.nobullet { list-style:none;list-style-image:none; }

You’ll notice the global classes at the bottom, which cover basic styling, and will remove styling that we intially set. For example, the .nobullet and .noindent work great on an unordered or ordered list. You can add your own classes there that you use a lot.