Why <font> is bad and easy intro for Cascading Style Sheets

I embarrassed to admit I hadn't used CSS before. I googled it, this tutorial came up, I found it quick and helpful, so I wanted to pass it along. It's a great, concise, easy-to-follow, tutorial about why the <font> tag in HTML is bad and how to use Cascading Style Sheets (CSS) instead: http://www.htmlcodetutorial.com/character_famsupp_92.html. If you want a basic understanding of CSS in 30 minutes, check it out.
If you ever work with raw HTML but don't know what a Cascading Style Sheet is, you should read a tutorial like this on.  On the other hand, if you're an HTML / CSS super guru, the rest of this post is going to bore you.

Super fast summary:
My super quick takeaway is that <font> is bad because it forces you to incorporate specific styles directly into the HTML. CSS lets you create "styles", and then the HTML only refers to the style and you can have a separate "style-sheet" to describe what the style actually is. CSS also lets you override the styles of existing tags so you can describe exactly what font,color,size,etc the <h1> tag should become. It's like abstracting implementation from the interface ... but for HTML instead of real code.

Simple example:
Here's a simple example to demo my new found understanding of CSS. The CSS specific portions of HTML are in red.

File: x.html:

<link rel="stylesheet" href="x.css" type="text/css" media="screen" />
This is true: <span class='pass'>1+2=3</span><br>
This is false: <span class='fail'>4+5=1 million</span><br>
This is <em>emphasis in blue</em>!


/* define 'pass' and 'fail' styles */
.pass { color: green;}
.fail { font-weight: bold; color: red; }

/* Redine what the <em> tag should look like */
em { color: blue }

And here's what it looks like:

This is true: 1+2=3
This is false: 4+5=1 million
This is emphasis in blue!

An FYI: Blogs.msdn.com uses CSS to customize the looks:
The webpages for the different blogs on http://blogs.msdn.com  are customized by having different CSS files.
For example, my blog uses this CSS: http://blogs.msdn.com/Themes/Blogs/marvin3/style/style.csshttp://blogs.msdn.com/Themes/Blogs/marvin3/style/green.css
Chris Brumme's blog is current the default, which is using this CSS: http://blogs.msdn.com/Themes/Blogs/default/style/style.css
If you're bored, you can compare the appearance of the two blogs, and try to map those differences back to the differences in the style sheets.

Comments (3)

  1. Keith Farmer says:

    Ironically, VS, Word, avoid using stylesheets. They’ll put in style tags all over the place, rather than collating them into a dynamically-generated CSS file, and referencing that.

  2. The style tags all throughout the doc, and then the style declarations are at the top of the HTML file in the header in a <style> tag.

    I’m guessing the choice to use embedded <style> tags instead of a separate style sheet is a dependency issue so that users only need to have a single file.

  3. lor3 says:

    He means inline styles like This is <em style="color:blue;">emphasis in blue</em>

Skip to main content