CSS typography styles

In my last blog post, "CSS Reset - What is it?" I covered and explained exactly what a CSS Reset is, I gave you some CSS code to make it happen, and showed you where to put it in your CSS file.

If you haven't read that post, go read it now because this post picks up where that one left off.

So...now that you have the CSS reset code incorporated in your CSS file, your going to have to do a little work styling the HTML elements.

Remember, the CSS reset removes default padding, margins, bullets from UL lists, and makes many other changes to your HTML. So what we have to do now, is to style the HTML elements and "bring them back" to how they are most commonly rendered.

When I explain this to our HTML coders, they commonly ask me this question: "But Tim...how do I know what HTML tags I need to style?"

My response is usually... "Well, I don't know exactly what HTML tags you are going to use throughout the project, so...you should style every single HTML tag that could possibly be used."

Whoa!!! Every tag? Yes. Every tag.

Seems like a lot of work? Nah...not really, see below - we've done it for you.

/*-- typography
---------------------------------------------*/
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1em;line-height:1;margin-bottom:1em;}
h4 {font-size:1em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em 0;}
p img {float:left;margin:1.5em 1.5em 0em 0;padding:0;}
p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
a:focus, a:hover {color:#666;}
a {color:#000;text-decoration:underline;}
blockquote {margin:1.5em;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
del {color:#666;}
pre, code {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
th, td {padding:4px 0px 4px 5px;}
tfoot {font-style:italic;}
caption {padding:5px; font-size:.8em;}
hr {clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}

Ok, there you have it. Now you have all of the HTML tags covered, and they should render pretty nicely. You may have to go back and individually tweak some of these styles to meet your needs, such as adding colors or maybe adding a little more padding or margins here and there.

And since we're putting this into a "Cascading" style sheet, you'll want to put this CSS code immediately after your CSS reset code.

In the next post, I'll share some more CSS tips and tricks that all ASP.NET developers can benefit from.

Thanks for reading!