I want you to think of a shape. It can be any shape you want—a circle, a square, a triangle, an eight-pointed star, or an ameboid glob—but keep it to a single continuous shape. I want you to hold that shape in your mind, or, if you need to, scratch it out on a piece of paper (or, if you are really far gone) on a computer.

Now I want you to think about how you would describe the shape without making reference to any shape. You can use “line,” but not any shape names.

Let’s say you draw a simple square. You might describe a square like this:

Draw four lines the same length that touch, two horizontally and two vertically.

This sounds accurate. If I were drawing the shape as you described it, I might draw a square:

However, following the same directions, I might draw something completely different:

I’ve been teaching CSS for several years now, and every time I perform this exercise with students, they are amused (and frustrated) when I follow their directions but end up with a shape that looks nothing like what they are trying to describe. The problem isn’t with them, however; the problem is that humans make a lot of assumptions when it comes to communication. We are not just following the stated directions; we are also calculating what the person giving the directions is actually thinking. We fill in missing details, such as that all four lines should touch at their ends.

As good as they are becoming at understanding humans, computers still require that we communicate explicitly when we describe something, especially when that something is a visual design. A computer will not fill in the details.

What is needed is a language that you can use to quickly and precisely describe your designs in such a way that the computer will understand them without fault. That language is called Cascading Style Sheets (CSS), and it is a language you need to master to be a successful Web designer.

Cascading Style Sheets (CSS) is the language you use to tell computers how you want your designs to look on the Web. With CSS, you can specify details including widths, heights, colors, margins, padding, borders, backgrounds, and type styles. Understanding this language, then, becomes critical to achieving the best online designs.

One of the constant complaints I hear from designers is that developers never execute their design correctly. Learning CSS gives you two important advantages as a designer:

The good news is that speaking CSS is not that different from speaking in English or any other “human” language—it just takes a little adjustment to get used to its particular syntax (how things are said), semantics (what things mean), and vocabulary (what to say).

For example, consider this simple design:

To describe this design in English, you might say something like:

The border is solid red and 5 pixels thick; the background is pink; there is a 25 pixel padding around the content; the font is Arial at 8 pixels; and the text is double spaced.

The same description in CSS isn’t actually that different:

Notice that most of the words (vocabulary) are almost identical. It’s primarily the structure (syntax) that’s different, but it’s really not that hard to decipher.

The goal of this book is to teach you to be able to describe your Web designs as easily in CSS as you do in English.

I wrote this book for designers of all stripes—visual, interactive, user experience, information architecture. However, it is really for anyone who wants to learn how to use CSS.

Speaking in Styles is split into three sections and includes three appendixes:

01  <style type="text/css" media="all">
02  h1 { color: red; }
03  </style>