Chapter 1. Understanding CSS

Let's face it: HTML is not exactly a designer's dream come true. It is imprecise, unpredictable, and not terribly versatile when it comes to presenting the diverse kinds of content that Web designers have come to demand.

Then again, HTML was never intended to deliver high-concept graphic content and multimedia. In fact, it was never really intended to be anything more than a glorified universal word processing language delivered over the Internetand a pretty limited one at that.

HTML is a markup language that was created to allow authors to define the structure of a document for distribution on a network such as the Web. That is, rather than being designed to set the styles of what is being displayed, it is intended only to show how the page should be organized.

Over time, new tags and technologies have been added to HTML that allow greater control of both the structure and appearance of documentsthings such as tables, frames, justification controls, and JavaScriptbut what Web designers can't do with fast-loading HTML, they have had to hack together using slow-loading graphics.

It's not a very elegant system. However, rather than just adding more and more tags to HTML, the W3C (see the sidebar "What is the World Wide Web Consortium?" later in this chapter) introduced Cascading Style Sheets (CSS) to fill the design void of straight HTML (Figure 1.1).

Figure 1.1. Say it loud and say it proud with the CSS button (http://www.w3.org/Style/CSS/Buttons/).

Now, you're probably thinking, "Oh, greatjust when I learn HTML, they go and change everything." But never fear: CSS is as easy to use as HTML. In fact, in many ways it's easier, because rather than introducing more HTML tags to learn, it works directly with existing HTML tags to tell them how to behave.

Take the humble bold tag, <b>…</b>, for example. In HTML, it does one thing and one thing only: It makes text "stronger," usually by making it thicker. However, using CSS you can "redefine" the bold tag so that it not only makes text thicker, but also displays text in all caps and in a particular font to really add emphasis. You could even make the bold tag not make text bold.

This chapter presents some of the concepts and principles behind CSS for those who are new to the technology. However, for those eager beavers among you, you may want to skip to Chapter 2 to learn the basics of creating style sheets or to Chapters 3 through 10 to learn all of the many styles you can include in your design arsenal.