Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
{
speaking in styles
}
FUNDAMENTALS OF CSS
fo
r
WEB DESIGNERS
jason cranford teague
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Speaking in Styles
Fundamentals of CSS for Web Designers
Jason Cranford Teague
New Riders
1249 Eighth Street
Berkeley, CA 94710
510/524-2178
Find us on the Web at www.newriders.com
To report errors, please send a note to
New Riders is an imprint of Peachpit, a division of Pearson Education
Copyright © 2009 Jason Cranford Teague
Notice of Rights
All rights reserved. No part of this book may be reproduced or transmitted in any
form by any means, electronic, mechanical, photocopying, recording, or other-
wise, without the prior written permission of the publisher. For information on
getting permission for reprints and excerpts, contact
Notice of Liability
 e information in this book is distributed on an “As Is” basis without warranty.
While every precaution has been taken in the preparation of the book, neither the
author nor Peachpit shall have any liability to any person or entity with respect
to any loss or damage caused or alleged to be caused directly or indirectly by the

Marketing Manager:
Glenn Bisignani
Indexer: Emily
Glossbrenner
Cover and Interior
Designer:
Jason Cranford Teague
Cover Production:
Andreas DeDanaan
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
In Memory of
Mossie Stone Teague
&
Oscar Brantley Teague
Thanks…
Tara
Dashiel & Jocelyn
Dad & Nancy
Johnny
Pat & Red
Boyd, Dr. G, & Judy
Thomas, Archer, & David
Charles Dodgson & John Tenniel
Douglas Adams & Carl Sagan
Neil Gaimen & Dave McKean
The noise that kept me going…
NPR, Ted Talks, Skepticality, Slice of Sci-fi ,
The Craig Charles Funk & Soul Show, Bat for
Lashes, Amanda Palmer (AFP), Wilson Pickett,
Carbon/Silicon, Scissor Sisters, Kate Bush,

Firefox (FF) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Safari (Sa). . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Opera (Op) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Test Internet Explorer 6 on the Mac with Crossover. . 22
Firefox Add-Ons
. . . . . . . . . . . . . . . . . . . . . . . .
24
Firebug . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Colorzilla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Palette Grabber . . . . . . . . . . . . . . . . . . . . . . . . . 26
MeasureIt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Pixel Perfect. . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Code Editors
. . . . . . . . . . . . . . . . . . . . . . . . . .
28
Coda. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
TopStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
CSSEdit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Online Tools
. . . . . . . . . . . . . . . . . . . . . . . . . . .
30
ColorJack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Adobe Kuler. . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Typetester . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
SUMO Paint. . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Contents
1
2
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

ID Selector . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Styles in Context
. . . . . . . . . . . . . . . . . . . . . . .
70
Styles Based on Where Something Is . . . . . . . . . . 72
Styles for Children . . . . . . . . . . . . . . . . . . . . . . . 76
Styles for Siblings. . . . . . . . . . . . . . . . . . . . . . . . 78
Styles for Special Cases
. . . . . . . . . . . . . . . . .
80
Link States . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Styles for Link Actions. . . . . . . . . . . . . . . . . . . . . 82
Styles for Dynamic Actions . . . . . . . . . . . . . . . . . 84
Styles for Parts of a Paragraph . . . . . . . . . . . . . . . 86
Semantics:
Making Sense of Styles
. .
89
Where to Put Style Rules
. . . . . . . . . . . . . . . .
90
Inline Styles for an HTML Tag . . . . . . . . . . . . . . . . 92
Embed Styles in a Web Page . . . . . . . . . . . . . . . . 94
External Styles in a Web Site . . . . . . . . . . . . . . . . 96
Adding Notes to CSS
. . . . . . . . . . . . . . . . . . .
104
Inheritance
. . . . . . . . . . . . . . . . . . . . . . . . . . .
106

Fonts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
126
Text
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
130
Background
. . . . . . . . . . . . . . . . . . . . . . . . . .
134
Image Repeat . . . . . . . . . . . . . . . . . . . . . . . . . 136
Image Position . . . . . . . . . . . . . . . . . . . . . . . . . 138
Box
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
140
Display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Visibility. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Width and Height . . . . . . . . . . . . . . . . . . . . . . . 148
Border. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Padding. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
Margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Fixing IE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Position
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
160
Position Type . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Setting the 2-D Position . . . . . . . . . . . . . . . . . . 162
Setting the 3-D Position . . . . . . . . . . . . . . . . . . 164
Tables
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Visual Comps. . . . . . . . . . . . . . . . . . . . . . . . . . 190
Build
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
192
Cutting Chrome . . . . . . . . . . . . . . . . . . . . . . . . 192
The Style Guide . . . . . . . . . . . . . . . . . . . . . . . . 194
Prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Deploy
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
204
Alpha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Beta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Launch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Iterate
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
206
Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . .
209
Structure
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
210
Head and Body . . . . . . . . . . . . . . . . . . . . . . . . 210
The HTML Framework for CSS . . . . . . . . . . . . . . 212
Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Default Styles
. . . . . . . . . . . . . . . . . . . . . . . .
216
Resetting Browser Default Styles . . . . . . . . . . . . 216
Setting Your Default Styles . . . . . . . . . . . . . . . . 216

. . . . . . . . . . . . . . . . . . . . . .
243
CSS Sprites
. . . . . . . . . . . . . . . . . . . . . . . . . .
244
Links
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
246
Menus
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
248
Buttons
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
252
Chrome
. . . . . . . . . . . . . . . . . . . . . . . . . .
257
Using Transparent Images
. . . . . . . . . . . . . .
258
Fixing Transparent PNGs in IE6 . . . . . . . . . . . . . 260
Defi ning the Grid
. . . . . . . . . . . . . . . . . . . . . .
262
Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Logos and Forms
. . . . . . . . . . . . . . . . . . . . .
266
Logos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266

11
12
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
APPENDIXES
A: voxLibris Code
. . . . . . . . . . . . . .
291
index.html
. . . . . . . . . . . . . . . . . . . . . . . . . . .
292
main.css
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
295
default.css
. . . . . . . . . . . . . . . . . . . . . . . . . . .
296
layout.css
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
297
layout.css
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
297
navigation.css
. . . . . . . . . . . . . . . . . . . . . . . .
298
chrome.css
. . . . . . . . . . . . . . . . . . . . . . . . . .
300
B: CSS Values
. . . . . . . . . . . . . . . . . .

Common IE6 Issues
. . . . . . . . . . . . . . . . . . .
322
Index
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
324
A
B
C
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
This page intentionally left blank
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
I
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
To design is to
communicate clearly by
whatever means you can
control or master.
— Milton Glaser
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Introduction
Design is a way to communicate ideas visually. Unlike speaking or
writing, however, visual communication happens almost instanta-
neously on a visceral level. Within seconds of seeing something,
we should be able to understand its visual message. Obviously
some designs such as illustrations may take additional decipher-
ing, but when we look at something we can’t help trying to inter-
pret its meaning.
Although Web design is a visual medium, it is created using writ-
ten code—a style language known as CSS. While you can use

lating what the person giving the directions is actually thinking.
We  ll in missing details, such as that all four lines should touch
at their ends.
As good as they are becoming at understanding humans, comput-
ers still require that we communicate explicitly when we describe
something, especially when that something is a visual design. A
computer will not  ll in the details.
What is needed is a language that you can use to quickly and pre-
cisely describe your designs in such a way that the computer will
understand them without fault.  at language is called Cascading
Style Sheets (CSS), and it is a language you need to master to be
a successful Web designer.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Why CSS?
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:
01 Control over how your designs look online. If something
is the wrong color or is not lining up right, you will know
what is wrong and how to  x it.
02  e ability to create better Web designs. Knowing how
CSS works means knowing how to get the best results from
what is possible.
 e good news is that speaking CSS is not that di erent from

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:
 Part 1: A Web Primer
De nes what makes a Web page, introduces some tools you
will need to build one, and dispels some popular myths
about designers and CSS.
 Part 2: CSS Grammar
Covers the nuts and bolts of how to create style sheets and
apply them to a Web page, including the important vocabu-
lary designers need to know.
 Part 3: Speaking Like a Native
Follows the creation of a simple Web page design, emphasiz-
ing the best practices you should use.
 Appendixes
Includes all of the code for Part 3; the length, font, and color
values you use with CSS; and a list of common  xes for deal-
ing with the bugs in Internet Explorer.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Reading the Code
I have tried to simplify the examples as much as possible, keeping
code and the results of that code as close as possible on the page.
 is o en means that the full context of the code is not given.
 e code is colored based on use:
Content in code
HTML code
CSS code
JavaScript code