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.
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
- Designing with Web Standards, Second Edition by Jeffrey Zeldman (2007)
- Bulletproof Web Design by Dan Cederholm (2005)
Websites (Tutorials)
- CSS at Wikipedia
- CSS at the World Wide Web Consortium (W3C)
- CSS Tutorials at W3Schools
- A List Apart (dig through the archive of articles)
Websites (Inspiration)
Training
- I was serious about that offer to teach a workshop. Let me know if you're interested.
Contact The Web Team
Office of Creative Services
107 Communications
Knoxville, TN 37996
Phone: (865) 974-0765
Fax: (865) 974-6435
Email: webteam@utk.edu