Main Navigation:

A (Very) Brief Introduction to CSS

Until fairly recently, most web developers treated CSS as "that thing you use when you want better looking fonts and rollover effects on links." In a sense, cascading style sheets were reduced to a more robust version of the dreaded <font> tag. But CSS, properly used, allows a fundamental reconceptualization of web design:

Designing with CSS means separating a document's content (the stuff you're displaying in your HTML) from the document's presentation (how you want that stuff displayed in a browser).

For example, here's what the front page of this site looks like when the primary and secondary style sheets are turned off. All you're left with is the content, neatly organized hierarchically with greatest prominence given to the name of the page, "UT Knoxville Web Templates" (the only H1). You'll also notice that menus are appropriately labeled and organized as unordered lists. All of the formatting -- the selection of fonts and colors, the placement of items on the page, the calling of background images -- is handled by the CSS. You'll also notice that you are seeing some content -- like the words "Frequently Used Tools:" -- for the first time. While this content is invisible to normal sighted users when the page calls the CSS, those labels (and other "hidden" navigation) greatly assist visually impaired users who may be visiting our pages using browsers that read the pages aloud.

There are many advantages to this style of design:

  • Smaller file sizes and faster downloads -- no more <font> and <table> tags to fatten up the code
  • Vastly improved accessibility -- that unformatted front page you just looked at is essentially what seeing-impaired users encounter when they browse the page with a text reader
  • Improved indexing -- search engines are on the lookout for H1 and H2 tags
  • Display flexibility -- every day, more and more users browse your site with a handheld device
  • Design impact -- CSS not only allows more design options, it allows us to implement them site-wide.

How do I learn CSS?

Assuming you're a native English speaker, think of CSS as Spanish. Like all new languages, it can't be learned overnight or in a "(Very) Brief Introduction." But CSS and HTML do share several cognates. Font names, padding, background color, margins -- all are used in CSS, but with a slightly different accent. Or something like that.

The following is a short list of highly recommended resources.

Books

Websites (Tutorials)

Websites (Inspiration)

 


css image

Contact The Web Team

Office of Creative Services
107 Communications
Knoxville, TN 37996
Phone: (865) 974-5920
Fax: (865) 974-6435
Email: webteam@utk.edu