(menu created with Tigra Menu Gold)

HTML and CSS - How They Interact

Background: When HTML first evolved, it's purpose was to display information. Over the years, HTML evolved into attempting to format that information, a purpose for which it was not very well suited for!

So along came the W3C (the organization that establishes HTML and other internet standards). They decided to migrate all the formatting stuff from HTML into stylesheets. That makes your HTML web pages a lot smaller!

If you look at the source code of an HTML document, you'll most likely see a line:

<link type="text/css" rel="stylesheet" href="filename.css">

That is a link to an external stylesheet.

OK, so what is a "stylesheet" and what does it have to do with your web page?

As mentioned in the background statement (above), HTML is designed to display information, not format it. The stylesheet is just that - it contains information about the styles you are using on your web pages. Styles can be bold, underline, and italic.

In lieu of cluttering your HTML document with all this formatting stuff, you place all of it in your stylesheet. This leaves you to place emphasis in two documents: So now you've placed all your formatting information (styles) in your HTML documents and you decide you want to change some of the styles. You have two choices:
  1. Change all your HTML documents

    OR

  2. Change one document (by placing all your formatting in an external stylesheet)
Why external??? By making the style sheet external, you only have to change one file when you decide you want something that appears on all pages to be changed! For example, let's say the titles on all your pages are green bold arial 10 point. So what happens as you progress you decide it would be better to be red bold italic times new roman 12 point? You have to change every page!

With the external style sheet, you only change one file and upload it! Now every page's title now becomes red bold italic times new roman 12 point! In the old method, you had to change each page - a very time consuming effort!

And by making it external, as opposed to putting it into each web page, all your attributes only need to be loaded once, not with each page someone looks at! Makes your web pages load a bit faster!

Hopefully this page has explained the advantages of using stylesheets and further the advantage of using external stylesheets.

If you want some self-help in understanding HTML and cascading stylesheets (css), check out the following books, both published by O'Reilly: Both books are part of their "The Definitive Guide" series of books. And don't worry if this all sounds intimidating! These two books will step you through the process of learning HTML and CSS. They even include an extensive listing of all the HTML and CSS codes in the back of each book!

gray bar

Questions?

This page last updated: January 11, 2009