If you're into any kind of serious web design,
you need to know how to use Cascading
Style Sheets (CSS). There are resources
all over the web on how to use CSS
in your web page design.

Content vs. Appearance & Layout

CSS allows you to separate the appearance and layout from the content of the page. How do you know the difference? I like to think of a web page as a recipe. The content is the ingredients and the Appearance & Layout are the directions. I.E. - go get this image, move this to the right, indent, skip a line, make this text very large, etc. So...

Content is the actual information on the page presented with text and images. You can develop your content in a word processor, text editor, etc.

Appearance & Layout are the tags that go around the text and images to control how the page looks in your browser. You don't see these tags when you view a web page, but they are there.

Why Use CSS?

CSS gives you the power to make a change to all your pages in one fell swoop. You no longer want red bold fonts for emphasis? You want blue? Change it in your style sheet (CSS), upload the style sheet to your site, and poof!  Now all emphasis is in a blue font. Wish I could do that with my wardrobe. ;)  Basically, your giving instructions to your browser on how to format the tags surrounding the text and images.

What is CSS?

CSS is the acronym for Cascading Style Sheets. It is "cascading" because control cascades from external to internal to local. 

  • External - This is simply a separate text file in which you list all your instructions. The file is then linked to your web page. When someone accesses your page, the browser sees there is an external style sheet attached, pulls it in, reads the directions, and DING!  Your web page is ready to come out of the oven with the proper appearance and layout.
  • Internal - Sometimes you need to add styles just to a particular page. If you know for sure you won't use the style anywhere else, you can place the style within the web page itself, near the top of the file in the <head> section.
  • Local - I rarely use this one; however, if you want to set up a style for one particular place in a page, you can add the style right before the text to be controlled.

So if you have set a style called "Emphasis" in an external style sheet that makes the text red, anytime a tag on the web page has an id of "Emphasis", it will format the text inside of that tag to be red.

However, if you also add a style called "Emphasis" in an internal style (near the top of the page) that makes the text blue, it will OVERRIDE the external style and now the text will be blue.

Then again, if you create a style called "Emphasis" locally, just before the tag, and it makes the font green, it will OVERRIDE both the external style sheet and the internal one and any text inside the tag will be green.

So control "cascades" from external to internal to local.

How Do I Learn CSS?

There are many tutorials and demonstrations of CSS on the web.

  • W3C Cascading Style Sheets - This is considered the authority when it comes to CSS.
  • CSS Zen Garden - My fav!! This is where I really learned how to use style sheets. People are invited to submit their style sheets and graphics for an existing HTML page (which they are not allowed to touch). The results are amazing.
  • CSS Tutorial - Includes examples where you can change the style right online and see the instant result.
  • HTML Goodies Cascading Style Sheets - Fantastic author! If you don't understand CSS after this, well, ..... hmmmmm, check to see if you still have a pulse. ;)