{ speaking in styles }

FUN D A M E N TA L S O F CS S for WE B DESIGNERS

jason cranford teague

 Speaking in Styles
Fundamentals of CSS for Web Designers
Jason Cranford Teague

Project Editor: New Riders

Nancy Peterson 1249 Eighth Street
Development Editor: Berkeley, CA 94710
Brenda McLaughlin
510/524-2178
Technical Editor:
Dave Artz
Production Find us on the Web at www.newriders.com
Coordinator:
Cory Borman To report errors, please send a note to errata@peachpit.com
Copy Editors: New Riders is an imprint of Peachpit, a division of Pearson Education
Dan Foster,
Darren Meiss Copyright © 2009 Jason Cranford Teague

Compositor:
Jason Cranford Teague Notice of Rights
Marketing Manager: All rights reserved. No part of this book may be reproduced or transmitted in any
Glenn Bisignani form by any means, electronic, mechanical, photocopying, recording, or other-
wise, without the prior written permission of the publisher. For information on
Indexer: Emily getting permission for reprints and excerpts, contact permissions@peachpit.com.
Glossbrenner
Cover and Interior
Designer: Notice of Liability
Jason Cranford Teague The information in this book is distributed on an “As Is” basis without warranty.
Cover Production: While every precaution has been taken in the preparation of the book, neither the
Andreas DeDanaan 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
instructions contained in this book or by the computer software and hardware
products described in it.

Trademarks
Many of the designations used by manufacturers and sellers to distinguish their
products are claimed as trademarks. Where those designations appear in this
book, and Peachpit was aware of a trademark claim, the designations appear as
requested by the owner of the trademark. All other product names and services
identified throughout this book are used in editorial fashion only and for the
benefit of such companies with no intention of infringement of the trademark.
No such use, or the use of any trade name, is intended to convey endorsement or
other affiliation with this book.
Printed and bound in the United States of America
ISBN 13: 978-0-321-57416-9
ISBN 10: 0-321-57416-8
987654321
Printed and bound in the United States of America
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,

Bryan Ferry, The Fixx, Jonathan Coulton,

Cranes, Johnny Cash, Cocteau Twins, Ladytron,

Marvin Gaye, Client, Cracker, Corduroy, Al

Green, The Wombats, Electric Six, World Party,

Skinny Puppy, The Cramps, Poprocket, Franz

Ferdinand, The Long Blondes, Gogol Bordello,

Mojo Nixon, Beck, and The Specials.

Contents
Int roduc tion . . . . . . . . . . . . . . . . . . . . . . ix

PART 1 A Web Primer

What is a Web Page? ........... 1
1 HTML, JavaScript, and CSS ............... 2
What Is the DOM? . . . . . . . . . . . . . . . . . . . . . . . . 4
HTML and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 6
JavaScript and CSS . . . . . . . . . . . . . . . . . . . . . . 10
Flash and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2 Web Des igner’ s Toolbox ......

Web Browsers . . . . . . . . . . . . . . . . . . . . . . . . . 18
17

Internet Explorer (IE) . . . . . . . . . . . . . . . . . . . . . . 20

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
 T he M yth s of CSS 35
3 ..............
Myth 1: CSS Is for Developers, Not Designers. . . . . 36
Myth 2: CSS Can’t Handle the Designs I Need . . . . 40
Myth 3: CSS Has Too Many Browser Inconsistencies . 44

PART 2 CSS Grammer

4 Syn ta x: Creating Meaning . . . . . . . . . . . 49

The Rules of Style . . . . . . . . . . . . . . . . . . . . . . 50
Parts of a Style Rule . . . . . . . . . . . . . . . . . . . . . . 52
A Basic Style Rule . . . . . . . . . . . . . . . . . . . . . . . 54
Declaring More Styles . . . . . . . . . . . . . . . . . . . . . 56
Combining Rules . . . . . . . . . . . . . . . . . . . . . . . . 58
Types of Selectors . . . . . . . . . . . . . . . . . . . . . . 60
HTML Selector . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Class Selector . . . . . . . . . . . . . . . . . . . . . . . . . . 62
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

5 Sem a n tics: 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
Overriding Inheritance . . . . . . . . . . . . . . . . . . . . 108
 Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Determining a CSS Rule’s Weight. . . . . . . . . . . . 114
Importance . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The Cascade . . . . . . . . . . . . . . . . . . . . . . . . . 120

Vocabular y: Talking the Talk. . . . . . . 123

6 Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Keywords. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
Design Enhancements . . . . . . . . . . . . . . . . . 172
Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
Rounded Corners . . . . . . . . . . . . . . . . . . . . . . . 174
Outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
PART 3 Speaking Like a Native
Design in g with CS S . . . . . . . . . . . 179
7 The Process: An Overview . . . . . . . . . . . . . . 180
Plan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Sketches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Page Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Wire Frames . . . . . . . . . . . . . . . . . . . . . . . . . . 186
Mood Boards . . . . . . . . . . . . . . . . . . . . . . . . . . 188
Visual Comps. . . . . . . . . . . . . . . . . . . . . . . . . . 190
Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Cutting Chrome . . . . . . . . . . . . . . . . . . . . . . . . 192
The Style Guide . . . . . . . . . . . . . . . . . . . . . . . . 194
Prototype. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196
Deploy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Alpha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Beta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Launch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Iterate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206

8 L ayou t . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
The Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

Typ ogra p hy . . . . . . . . . . . . . . . . . . . . . 225

9 Font Choices . . . . . . . . . . . . . . . . . . . . . . . . . 226
Core Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . 226
Web-Safe Fonts . . . . . . . . . . . . . . . . . . . . . . . . 228
Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . 230
 Fluid Typography . . . . . . . . . . . . . . . . . . . . . . 232
Choosing Typefaces . . . . . . . . . . . . . . . . . . . . . 234
Styling Text . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Paragraph and Block Quotes . . . . . . . . . . . . . . . 240
Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240

Nav igation . . . . . . . . . . . . . . . . . . . . . . 243

10 CSS Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252

11 C hrome . . . . . . . . . . . . . . . . . . . . . . . . . . 257
Using Transparent Images . . . . . . . . . . . . . . 258
Fixing Transparent PNGs in IE6 . . . . . . . . . . . . . 260
Defining the Grid. . . . . . . . . . . . . . . . . . . . . . 262
Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Logos and Forms . . . . . . . . . . . . . . . . . . . . . 266
Logos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Defining Sections . . . . . . . . . . . . . . . . . . . . . 268
Alternate Version for Ads. . . . . . . . . . . . . . . . . . 268
Final Flourishes . . . . . . . . . . . . . . . . . . . . . . . . 270

12 T he Last Word . . . . . . . . . . . . . . . . . 273

CSS Validation . . . . . . . . . . . . . . . . . . . . . . . . 274
Designing for Web Standards?. . . . . . . . . . . . . . 275
CSS Frameworks. . . . . . . . . . . . . . . . . . . . . . 278
Creating Your Own CSS Frameworks. . . . . . . . . . 279
CSS for Other Media. . . . . . . . . . . . . . . . . . . 280
Mobile Devices . . . . . . . . . . . . . . . . . . . . . . . . 280
Print . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
CSS Best Practices . . . . . . . . . . . . . . . . . . . . 282
General . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
Optimizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
APPENDIXES
A : voxLib ris Code . . . . . . . . . . . . . .291
A index.html . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
main.css. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
default.css . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
layout.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
layout.css . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
navigation.css . . . . . . . . . . . . . . . . . . . . . . . . 298
chrome.css . . . . . . . . . . . . . . . . . . . . . . . . . . 300

B B : CSS Va lu es . . . . . . . . . . . . . . . . . .303
Lengths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Pixels or Ems? . . . . . . . . . . . . . . . . . . . . . . . . . 304
Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Color Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . 310

C: Fixing Internet Explorer . . . .317

C Understanding Quirks . . . . . . . . . . . . . . . . . 318
Fix 1: Doctype Switching . . . . . . . . . . . . . . . 319
Fix 2: Conditional Styles . . . . . . . . . . . . . . . 320
Fix 3: Underscore Hack . . . . . . . . . . . . . . . . 321
Common IE6 Issues . . . . . . . . . . . . . . . . . . . 322

In d ex . . . . . . . . . . . . . . . . . . . . . . . . . . . .324
This page intentionally left blank
Introduction
To design is to
communicate clearly by
whatever means you can
control or master.
— Milton Glaser
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
programs like Adobe Photoshop or Dreamweaver to take a design
and output the code, this rarely produces desirable results. To get
the best results for your designs, you need to learn how to speak
in styles.

Introduction
Verbalizing the Visual
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 frus-
trated) 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 calcu-
lating 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, comput-

ers 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 pre-
cisely 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.
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 fix it.

02 The ability to create better Web designs. Knowing how

CSS works means knowing how to get the best results from
what is possible.

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:

One thing was certain, that the WHITE

kitten had had nothing to do with it:—it

was the black kitten’s fault entirely. For

the white kitten had been having its face

washed by the old cat for the last quarter

of an hour (and bearing it pretty well, con-

sidering); so you see that it COULDN’T

have had any hand in the mischief.

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:

border: 5px solid red;

background-color: pink;
padding: 25px;
font: 8px/2 arial;

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.
Reading This Book
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

Defines 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 fixes for deal-
ing with the bugs in Internet Explorer.
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.
This often means that the full context of the code is not given.

The code is colored based on use:

Content in code
HTML code
CSS code
JavaScript code

Where I have included longer blocks of code, I have numbered

the individual lines:

01 <style type="text/css" media="all">

02 h1 { color: red; }
03 </style>

Code references in the text will look like (01-03), and the refer-
enced code will always be on the same page or on the page imme-
diately to the right.

Browser Abbreviations and Versions

ACTIVE
NAME A B B R E V I AT I O N VERSIONS
Internet Explorer IE 6, 7, 8
Firefox FF 3, 4

Safari Sa 3, 4

Opera Op 8, 9, 10

Chrome Ch 1, 2
PART 1
In which the reader will learn about the three core components of a Web page,

discover the tools needed to construct one, and uncover the truth about many

Web page myths.

1 Wha t Is a Web Pag e ?

17 Web De s ig ne r ’s To o lb ox

35 T he My t hs of CSS
A Web Primer
Take a look behind a Web page, any Web page, and you’ll find
that it’s a combination of just three types of code: HTML, CSS,
and JavaScript. Regardless of what happens between your com-
puter (the client) and the computer that is holding the informa-
tion about that page (the server), those three technologies are
what the browser combines to get the job done and deliver the
content to the screen (text, images, video, or animation).

Web pages are a little closer to the code than most designers are
used to. Unlike Photoshop and Illustrator, where the code is
never seen, with a Web page we can get in and play around with
it, which is exactly what we will need to do if we want to get the
exact visual results we desire.

CHAPTER 1
What is a web page?
A WE B PR IM ER
WHAT IS A W EB PAG E ?

HTML, JavaScript, and CSS

It doesn’t matter whether your Web pages are created using .ASP,
PHP, MySQL, Python, Java, or any other of a multitude of avail-
able server-side technologies; when the pixel hits the screen on
the browser side, you can be guaranteed that the browser is using
one or all of these three core Web technologies to show it to you:

HTML provides structure, telling the browser what each ele-

ment on the page is. HTML “tags” each piece of content, specify-
ing whether it’s a headline, a paragraph of text, an image, a table,
a list, and so on. HTML does not actually tell the browser how
those elements should look; it only defines what they are.

CSS provides presentation, telling the browser how each ele-

ment should appear on the screen. CSS provides control over
color, typography, sizes, and layout—whether an element is blue
or brown, helvetica or arial—everything that goes into visually
displaying the page.

JavaScript provides functionality, allowing the page to interact

with the user and change after it has loaded. JavaScript lets you
program the page, allowing everything from simple drop-down
menus to full-blown Web-enabled apps.

Speaking in Styles

s pe a k i ng - i n- s ty l e s . c om

Speaking in styles is more than just a book.

Use the Web site to find updates, new ideas,

and news about Web design.

2
HTML CSS
Structure Presentation

DOCUMENT

Functionality

JavaScript

3
A WE B PR IM ER
WHAT IS A W EB PAG E ?

HTML, JavaScript, and CSS continued

What Is the DOM?

A Web page document is a collection of different objects cre-
ated using HTML and represented by something called the
Document Object Model (DOM). DOM sounds kind of “techy,”
but really a model is simply a representation of something, an
object is a part of that something, and the document is the some-
thing being represented. So, the DOM is a model of all the ele-
ments that make up your Web page, like a map to all the different
pieces. Like a map, the DOM is not the page itself, but a way of
representing the page so that we can think about its structure.

Each of the three core Web technologies has its own role to play
in that map:

HTML defines objects, with each HTML tag creating a new

unique object on the page that CSS can then style and JavaScript
can change. For example, a header is an object, a paragraph is an
object, and an image is an object.

What About Flash?

CSS styles the objects, hooking into the
HTML tags to style them individually or
There is one other technology that a lot of
as a group and give each object a unique
Web pages use to render content, and that’s
name called an ID.
Adobe Flash. Pages built with Flash use a
JavaScript changes the objects, allowing
browser plug-in to render .fla files. Behind
you to make style and other changes to any
the scenes, though, Flash files are inserted
object created with an HTML tag. For
into a page using HTML and can use CSS for
example, we can show an object, hide an
style. We will talk about Flash throughout the
object, or change the color of an object.
book, and how it can play nicely with CSS,

but primarily we will focus on the other core

Web technologies.

4
 HTML CSS
De nes Objects Styles Objects

DOM
Document Object Model

Changes Objects

JavaScript

5
A WE B PR IM ER
WHAT IS A W EB PAG E ?

HTML and CSS

The Hypertext Markup Language (HTML) structures your Web
page by placing tags—small bits of code—around the different
elements to tell the browser what a particular chunk of content
is. CSS can then tell the browser what each of those chunks of
content look like.

The different elements in the page are simply tagged to indicate

their function: paragraphs are tagged with <p>…</p>, tables
with <table>…</table>, list elements with <li>…</li>, and
page headers with <h1>…</h1>. Most HTML code will tag the
beginning of an element with an open tag and the end of an ele-
ment with a close tag. So, a typical header will look like this:

<h1>Welcome</h1>

As you would expect, a header puts a hard

Browser-Inherent Styles return above and below to set itself apart
from other elements on the page. This is
Although CSS should be used to add styles
called a block element. Now that an ele-
to the page, you will notice that HTML tags
ment has been defined on the page, CSS
also add their own styles. For example, the
can come along and tell the header exactly
level-1 header tag not only adds returns
what it should look like: what font family
above and below, but also makes the text
to use, what color the text should be, its
bolder and larger. There is no mystical law of margins, border, padding, size, and other
the universe that says that header tags will attributes. If we wanted the text to be a
be bolder and larger. No, it was the browser red, we might add code like this:
maker who programmed those styles to be
h1 { color: red; }
inherently associated with that tag. Most

HTML tags have some inherent or default

We could even tell the header to suppress
the hard return above and below, turning
styles associated with them. However, CSS
it into an inline element.
allows you to change any of those browser-

inherent styles with styles of your own.

6
 HTML
<h1> Welcome</h1>

h1 { color : red; }

CSS

7
A WE B PR IM ER
WHAT IS A W EB PAG E ?

CSS Genesis

In the early 1990s, a man named Tim Berners-Lee developed the

Hypertext Markup Language (HTML), which let him display his research

papers on the Internet with basic styles, such as underline, bold, and italic,

and link these documents into a kind of “web” of documents. At first, all he

wanted was to be able to display text and link relevant content together,

but it quickly became necessary to show charts, graphs, and photos, so

the ability to embed images in the page was added in the first graphics-

based browser, Mosaic.

Originally, tags were used in HTML documents not only to structure the

document, but to add the styles—so you had bold tags (<b>…</b>) and

italics tags (<i>…</i>) and so forth. This meant the styles were locked into

the structure, making design changes difficult.

More and more tags were added to deal with styling documents, but it

was quickly realized that having the styles and the structure together was

unworkable. Håkon Wium Lie and Bert Bos proposed using an existing

technology called style sheets to allow designers to control how the HTML

tags are styled. Thus CSS was born.

8
AllofUs

a l l ofu s . c om

Design consultants AllofUs use HTML with a

little CSS to create a simple but elegant design

for their portfolio.

9
A WE B PR IM ER
WHAT IS A W EB PAG E ?

JavaScript and CSS

JavaScript adds interactivity to your Web page, through a script
that tells the browser what to do when a particular action takes
place. CSS sets the initial appearances on the page, which
JavaScript can then change.

The scripts are used mostly to control elements on the page as the
user interacts with them—showing menus, checking that form
data has been entered correctly, and that sort of thing. But the
capabilities of JavaScript have grown over the years so that it is
now possible to create full-blown Web-enabled applications.

JavaScript works through the DOM to control the elements on

the screen (created by the HTML tags) by changing the CSS
values. For example, we might set the color of level-1 headers
(<h1>…</h1>) to be a red:

h1 { color: rgb(255,0,0);}

Many sites allow users to choose the color scheme they see
while at the site. One way to make this change would be to use
JavaScript to dynamically change the color property:

object.style.color=rgb(153,51,41);

In this code, the variable object stands in for the object we want
to make style changes to. It is derived from the DOM path to the
<h1> tags. The full JavaScript code for finding the object would
be something like:

object=document.getElementByTagName('h1');

This tells the JavaScript to find the header level-1 tags in the
document so that we can make changes to their styles. There are
many ways to find the objects on the page to make changes to
them, but this is a book about CSS, not JavaScript, so we’ll leave
it at that for now.

10
 CSS
h1 { color: rgb(255,0,0); }

object.style.color=rgb(153,51,41)

JavaScript

11
A WE B PR IM ER
WHAT I S A WE B PAG E ?

K n o w Yo u r C o d e : J a v a S c r i p t

Generally speaking, designers rarely have to look at, much less create,

JavaScript. That said, it will be extremely useful to have at least a passing

knowledge of what JavaScript is capable of doing, as well as knowing the

names of some of JavaScript’s popular offshoots and flavors, especially if

you plan on doing any type of user experience work:

Dynamic HTML, or DHTML, refers to JavaScript used to control HTML

and CSS after the page has loaded. This can include making style

changes, dynamic elements like menus and pop-ups, and special effects

such as fades and slides.

Asynchronous JavaScript and XML, or Ajax, uses JavaScript to pass infor-

mation back and forth between the loaded Web page and the server

without having to reload the entire page. This allows the user to interact

with large amounts of data without having to load it all up front.

JavaScript Object Notation, or JSON (yes, it’s pronounced like my name, but

I had nothing to do with it) is a quick and easy way for JavaScript to trans-

fer data that’s easier to use and understand than alternatives like XML.

MooTools, jQuery, and Dojo Toolkit are all popular JavaScript libraries that

provide ready-built functionality that takes a lot of the grunt work out of

creating controls and effects such as dynamic menus, calendars, fades,

and animations. Although there is some overlap, each library has its own
strengths and weaknesses, and each has its loyal followers in the Web

dev community. Another benefit to these libraries is that they eliminate

a lot of cross-browser headaches associated with JavaScript. If you are

developing your own Web site, I recommend checking these libraries out

and putting them to use.

12
Krista’s Creations at Letter-
Photo

letter-photo.com

Using a simple drag-and-drop interface

created with JavaScript and CSS, Krista’s

Creations allows you to create cool signs

out of photographed letters and letter-like

shapes and then order prints.

13
A WE B PR IM ER
WHAT IS A W EB PAG E ?

Flash and CSS

Although no one seems to talk about it much, CSS can be
applied to Flash files to control their appearance. So, there are a
mess of caveats— for example, it’s only used for styling text and
you have to use ActionScript to load the external CSS file—but
it is doable.

Just like CSS with HTML, using CSS with Flash can save you a
lot of time when your client tells you two days before the site is
supposed to launch that they don’t want to use green hypertext
links because green is an unlucky color (yes, this has happened to
me). Without CSS, Flash will embed styles directly into the .swf
file, making them difficult to change on a large scale. Imagine try-
ing to change all of your link colors if you had to open dozens of
individual Flash files! With CSS, you can change a single line of
code to update your entire site to the new color.

Where the CSS/Flash partnership will really shine, though, is

when you style XML formatted data. Since XML allows you to, in
effect, create your own “tags,” CSS is a natural to style these tags.

Causecast

c a u s ec a s t. c om

The Social-networking site Causecast uses

Flash to both deliver its video and for the inter-

face to interact with that video. However, the

rest of the site uses HTML, CSS, and JavaScript.

14
15
All artists have a tool set that they know and rely upon. Sculptors
choose the best chisels; painters choose the best brushes; cal-
ligraphers choose the best pens. Likewise, Web designers need to
choose the best tools at their disposal not only to visualize their
designs but to also create them in their medium of choice, the
Web browser. The tools you choose will not make you a better
designer, but they can help you make better designs.

CHAPTER 2
Web Designer’s
Toolbox
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Web Browsers
What browser do you use to surf the Web? Some people have a
favorite browser. Some choose based on their job. Others simply
use the default browser on their machine and may never be aware
that other options exist. Regardless of your personal preference,
however, your designs will need to work on all of the most com-
mon browsers. To compound the issue, when a new version of a
browser is released, older versions do not magically disappear (IF
ONLY!), so you also have to test on legacy browsers.

Microsoft’s Internet Explorer is inarguably the most commonly

used Web browser, with a market share of about 70% of the Web
viewing public. The exact number will vary depending on loca-
tion and audience, though. For example, designers have a higher
percentage of Mac users than other audiences, and the Mac does
not include a recent version of Internet Explorer. So, that audi-
ence tends more toward Safari or Firefox.

All modern browsers support CSS; however, not all browsers do

so equally. Throughout this book, I’ll point out where browsers
do not have or are deficient in the particular features I’m discuss-
ing. First, let’s get a quick overview of the four most common
browsers you will encounter.

Panic Software

p a n i c. c om

Panic Software is a purveyor of fine

Web tools.

18
Browser
Differences

The same Web page

displayed in four dif-

ferent browsers: IE6,

FF3, Sa4, and Op9.

The obvious stand out

is IE6, which will take

some rethinking of the

code to get it work-

ing properly. The good

news is that IE7 fixes

many of these issues.

19
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Web Browsers continued

Internet Explorer (IE)

Windows
m i cros of t. c om / i e

For a while, Internet Explorer overwhelmingly dominated the

Web browser market, rising to as high as a 90% market share at
times. Unfortunately, IE6 had several flaws when its came to it
implementation of CSS, including the exclusion of several impor-
tant features and the misinterpretation of others. Although IE7
has gone a long way in adopting CSS standards, it still has several
issues, and, of course, IE6 is still out there. The good news is that
the IE6 market share has rapidly fallen and is now at around
15–20% globally, and IE8 fully embraces the current version of
CSS (v2.1).

Firefox (FF)
Mac, Windows, and Unix/Linux
fi re fox . co m

In general, I recommend starting your development by testing

in Firefox. It has a strong implementation of the current CSS
standards (v2.1), includes many future CSS standards (v3.0), is
the second most widely used Web browser (22% of market share),
and it allows you to install add-ons that help with coding CSS. If
your design works in Firefox, then it will work almost the same
in both Safari and Opera, and most likely in IE7 and IE8. IE6, on
the other hand, will take a bit of work.

20
Safari (Sa)
Mac and Windows
apple. co m/ saf a r i

Many designers will develop in Safari, since it is the default

browser on all Macs. Sa4 has, arguably, the best implementa-
tion of the CSS standards so far. This implementation not only
includes all current standards (v2.1), but also many still in devel-
opment (v3.0) and a few styles of its own. This is a mixed blessing,
since it can mean you are using styles or features that are not
currently available in other browsers.

Opera (Op)
Mac, Windows, and Unix
o pera. co m

Often overlooked, Opera is more popular than you might realize.

It is used in many European mobile devices as well as on Sony’s
PlayStation gaming system. Op9 equals Sa3 in CSS standards
compliance but does not have some of the advanced features. If
you don’t have the most recent version of Opera, get with the
downloading. Like all of the best things in life, it’s free!

21
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Web Browsers continued

Test Internet Explorer 6 on the

Mac with Crossover
c od ewe aver s. c om / p rod u ct s/ c xm a c

One of the hardest issues to deal with on the Mac is how to test
your designs in IE6, which is still very popular and only available
for Windows. One great and inexpensive solution is a program
called Crossover, which allows you to run many Windows appli-
cations directly on your Mac desktop without having to own or
install Windows on your machine. Currently, it does not support
IE 7 or 8, which is a shame, but these two browsers have fewer
page-rendering inconsistencies than their predecessor.

Other Browsers Do Exist!

Although more than 99.3% of people surf-

ing the Web today are using one of the four

browsers listed here, dozens of other brows-

ers are often popular with niche markets. But

don’t panic! Almost all of them are based on

the same layout engines as Internet Explorer,

Firefox, Safari, or Opera, so they should render

your pages the same way. Check the layout

engines table on the next page to see which

of the more popular alternative browsers are

roughly equivalent.

22
 Layout Engines:
The Power Under the Browser Hood

Think of a browser like it’s a car: What you see is just the shell around the

engine, which is what makes the car move. You can take the engine out

of one car and put it in another—even a different model. Browsers have

layout engines (also called rendering engines) that drive how the browser

displays Web pages. Although there are different layout engines, many

browsers use the same engine, but with a different interface around it.

For example, Firefox uses the open-source rendering engine Gecko, and

so does Camino, Netscape, and Flock. They each add their own user

interface on top, though. All browsers using the same rendering engine

will all display Web pages about the same way. There may be slight varia-

tions, depending on which version of the rendering engine was used and

whether any tweaks were made to it—just like a car engine that has been

tuned for a particular car.

Engine Name Browsers

Gecko Firefox, Camino, Netscape, Flock

Trident Internet Explorer, AOL Explorer, MSN Explorer, RealPlayer

KHTML and WebKit Safari, Google Chrome, Shiira, OmniWeb, iCab, Konquerer

Presto Opera, Nintendo DS Browser, Internet Channel (Wii)

Java Lobo, Opera Mini

23
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Firefox Add-Ons
Firefox makes a great development browser, not only because it
has strong standards compliance, is available for Mac, Windows,
and Unix/Linux, and is the second most commonly used
browser, but also because you can install a variety of add-ons,
small programs that run within the browser, to enhance its capa-
bilities. Here are a few of my favorites:

Firebug
a ddo ns . moz illa . o rg / fi re fox / 1 8 4 3

Firebug is an indispensable tool for anyone creating a Web site in

Firefox. It enables you to:
» View and edit the HTML, CSS, and JavaScript code of the
page being displayed and edit it on the fly.
» Identify any element on the page, showing you all of its full
context and any styles applied to it.
» View the Web page as it loads to see how long each element
takes to download, letting you identify any bottlenecks in
your design.

Colorzilla
a ddo ns . moz illa . o rg / fi re fox / 271

Allows you to sample the color of any pixels in the Web browser,
displaying the value in both hex and RGB values. Simply choose
the eyedropper, then click a pixel. You can then copy and paste
the color code into another application as needed.

24
 Selected element

HTML code CSS code

Firebug for Firefox

With Firebug, you can inspect the HTML and

CSS code used to create any element on the

page, and even edit the code on the fly to test

out different ideas.

25
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Firefox Add-Ons continued

Palette Grabber
a ddo ns . moz illa . o rg / fi re fox / 2 2 9 0

Grab all of the color values out of a Web site’s CSS and turn
them into a working color palette for Photoshop and other pro-
grams with Palette Grabber. All it takes is a single click to save
a palette, then you can load it into your favorite image editing
software to start working.

MeasureIt
a ddo ns . moz illa . o rg / fi re fox / 5 3 9

Have you ever had something on the screen and you needed to
find its size? Or noticed that the alignment of two objects wasn’t
quite right but weren’t sure by how much? Then MeasureIt is
the tool for you. You click an icon, select the area width and
height you want to measure, and MeasureIt displays the dimen-
sions in pixels, taking out a lot of the guesswork when precision
is your goal.

Pixel Perfect
a ddo ns . moz illa . o rg / fi re fox / 7 9 4 3

If you like your sites to look exactly like your visual comps, you’ll
need Pixel Perfect. This is actually an add-on to Firebug (an add-
on to an add-on) that allows you to load a a JPEG version of your
visual comp as an onion skin over the top of the live version to
compare your vision to the reality on the Web.

26
Firefox Add-Ons
a d don s . m oz i l l a . or g

You can spend hours surfing around and trying

out different Firefox add-ons. If you need some-

thing, there’s probably an add-on for it.

27
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Code Editors
Just as you have a word processor for writing or an illustration
program for drawing, you need a Web development program for
coding. A good code editor will:
» Organize and edit documents, providing suggestions where
needed.
» Preview documents without having to jump between mul-
tiple browsers.
» Download and upload documents as you work on them.
» Analyze and optimize your code.

Coda
Mac
p ani c. c om/ c od a /

Coda is my program of choice whenever I edit code. Coda

(Panic Software) includes integrated FTP, making uploading and
downloading files a breeze. Its CSS editing tools allow you to
get straight at the code or to use a more designer-friendly visual
interface.

TopStyle
Windows
n ew sg ato r. co m / i nd i vi d u a l s / top st y l e

Although I generally recommend designing on a Mac, if you are

using a PC running Windows, TopStyle is similar to Coda.

28
CSSEdit
Mac
macrabbit . co m / cs se di t /

If you are a designer who is only interested in working with CSS

code (and not HTML or JavaScript), CSSEdit has everything
you need. It includes some impressive tools for analyzing the CSS
of an existing Web site.

Dreamweaver
Windows and Mac
ado be. co m/ dr e a mwe aver

Dreamweaver, which comes with many Adobe software packages,

is often the default choice for designers. Of all of the code edi-
tors, Dreamweaver is possibly the most feature rich, but it is also
the most expensive, and more features also means it’s harder to
learn to use.

29
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Online Tools
We typically think of an application as something that you get
on a disk or download and then install onto your computer.
Increasingly, applications are being delivered through the Web,
without requiring you to install or download the specific applica-
tion. Some of the best tools in my arsenal aren’t on my desktop;
they’re online. The line between Web site and Web application (or
just Web app) is gradually being blurred. Like you do with a Web
site, you get to a Web app by using a Web browser and URL, but
Web apps provide functionality like you would expect from
a traditional application.

ColorJack Adobe Kuler

colorjack.com ku l e r. a d o b e . c o m

Every designer has to deal with color. It can be difficult to define

a palette of colors that work well together but provide the spec-
trum needed. ColorJack and Adobe Kuler are Web apps that
allow you to put together a color palette, helping you choose
the best combinations based on color theory. You can then save
the results for use in common image editing software such as
Photoshop and Illustrator.

30
31
A WE B P RI ME R
WE B D ESI GNER’ S TO O L B OX

Online Tools continued

Typetester
t ypete ste r. or g

Good typography on the Web seems like an oxymoron, but it’s

getting better. Typetester allows you to preview how different
font families will look at various sizes, weights, and styles. Just
choose from an extensive list of Web-safe fonts or from a list of
fonts installed on your computer, and the results are instantly
displayed underneath.

SUMO Paint
s u mo pain t. c om

If you are a designer, you likely already have an image editor of

choice like Photoshop, Fireworks, or Illustrator. These applica-
tions can be costly, but free alternatives are available on the Web.
SUMO Paint allows you to create and edit layered bitmap images
in a familiar Photoshop-like interface. If you are strapped for
cash, it may just be what youare looking for. Although limited in
its feature set, it has all of the basic tools you would need to put
together simple Web graphics.

32
33
Over the years, many different myths and misconceptions have grown
up around Cascading Style Sheets—some good and some bad. You may
have heard some of these myths and may still believe them: CSS is com-
puter code; CSS is buggy; CSS is only for styling type and color. Some
of these myths were never true, others are no longer true, and some have
a grain of truth. Before we go any further into learning how to speak in
styles, let’s clear the air about three of the most persistent CSS myths.

CHAPTER 3
The Myths of CSS
A WE B PR IM ER
THE M Y T H S O F CS S

Myth 1:
CSS Is for Developers, Not Designers

False: Many designers coming to CSS for the first time think
that it’s just for the “coders” and not for “real” designers. I hear
this a lot from designers: “I don’t want to learn to program a
computer.” Designers who buy this line of reasoning have three
basic arguments:

Argument 1: If the developers understand it, then I don’t need

to. I started my design life as a print designer, and I had to under-
stand the print process from beginning to end. I had to know
about CMYK, paper weights, register marks, and how to create
files for output. I had to understand these things, not because
I was going to run one of those massive Koenig & Bauer print-
ing presses, but because I wanted to get the best results from my
designs in my selected medium. At the very least, even if you
never plan to touch the code yourself, understanding how CSS
works will make you a better Web designer.

Argument 2: CSS is too hard to learn. CSS was actually devel-

oped with designers in mind. Natural language terms are used
wherever possible to make it easy to understand and remember.

Argument 3: I’m a designer, damn it, not a programmer. CSS

is a style sheet language, not a programming language. What’s
the difference? Style sheet languages are used to simply tell the
computer how the different objects in a document should be pre-
sented, using simple style rules that humans can easily understand
rather than logic-based functions. CSS is
WebDesignerWall used to describe how the content should
we bde sign er wall .c om appear, not how it should work.

If you are looking for innovative Web design

ideas from designers, using CSS, take a look at

the Web Designer Wall.

36
CSS is for Web Developers, Not Web Designers

CSS is a
style language
anyone can learn to
read and write.

TRUTH

37
A WE B PR IM ER
THE M Y T H S O F CS S

Design Shack’s CSS Gallery

designshack.co.uk/gallery/

Numerous Web sites highlight great designer

portfolios created using CSS.

38
Web Designer Michela Chiucini

c o l a z i o n e d a m i c hy. i t

Designer Michela Chiucini uses CSS with

WordPress to create her own portfolio and gives

away a few templates for you to start using.

39
A WE B PR IM ER
THE M Y T H S O F CS S

Myth 2:
CSS Can’t Handle the Designs I Need

False: Design is about overcoming the limits of your medium. All

media have different strengths and weaknesses, and Web design
with CSS is no different. CSS can handle a wide variety of dif-
ferent designs, and the more you know about its limitations, the
better you can design to its strengths.

Most designers who believe the myth that CSS can’t handle a
variety of layouts are usually from the old school of Web design,
when the only option for creating a grid-based layout was by
using HTML tables. Yes, tables can do some things that CSS still
cannot do—like creating balanced column heights, although that
will be possible in the future— but the advantages of designing
with CSS far outweigh the advantages of table-based layout. The
techniques that designers use today are vastly different from those
we used just a few years ago. As we’ve had a chance to explore the
capabilities of CSS, new ideas and new methods are constantly
being explored.

There is no better example of the versatility of CSS than the CSS

Zen Garden. This simple site is a single Web page, which you can
download the HTML code for and create your own CSS design
solution. Over 200 designers have taken the challenge, with more
coming all the time. Each design is completely different from
the others, but all use the exact same HTML code as their basis.
With tables, which lock the structure directly into the HTML,
this versatility is lost.

40
CSS
CS
CSS Can’t
Can
an’’tt Handle
Hand
an
nddlle the
the Designs
D
Des
Dee iiggn
nss I N
Need
ee
ee

TRUTH

41
A WE B PR IM ER
THE M Y T H S O F CS S

42
CSS Zen Garden

c ss z e n g a r d e n . c om

CSS Zen Garden has a simple mission: Prove that CSS can

handle any layout. Each of these designs was created from the

same HTML code but with different CSS styling it.

43
A WE B PR IM ER
THE M Y T H S O F CS S

Myth 3:
CSS Has Too Many Browser Inconsistencies

Mostly False: OK, so there’s some truth to this particular myth,

but it’s not as bad as you might think. CSS is a standard, which
means that an organization—the World Wide Web Consortium
(W3C)—has set up some very specific instructions on how it
should work. The problem is, like all human communication,
instructions are open to interpretation (or can just be ignored) by
the browser makers. Mozilla, Opera, Apple, and Microsoft are the
main players in the field.

Every browser has its own quirks when it comes to CSS, but it’s
Microsoft’s Internet Explorer that deviates the most from the
straight and narrow path of Web standards.

For many years, most of the problems were with Internet

Explorer—specifically IE6. The issues with IE6 are legendary,
and I will highlight them throughout this book with tips on
overcoming them. While it used to be that a good quarter of your
development time would be spent just trying to get your Web
pages to look roughly the same in IE6 as in other browsers, most
of the inconsistencies are now gone or easily circumvented. IE7,
while far from perfect, is much closer to standards compliance
than previous versions, and on the horizon is IE8, which prom-
ises even closer CSS adoption. IE 7 is now the most popular Web
browser in use, while IE6 quickly evaporates in popularity.

That doesn’t mean you can ignore the older versions, but you do
not always have to provide the same experience. Instead, designers
will create a usable but stripped-down design for IE6. The design
still works just fine; it just may not have all of the design bells
and whistles.

44
CSS Still
tillll Has
ti Has Too
Tooo Many
T Maan
ny Browser
Bro
rwwse
seer Inconsistancies
Incon
In on
nsi
siissta
tan

7
6
TRUTH

45
PART 2
In which the reader learns the syntax (how the language is put together),

semantics (how the language is understood), and vocabulary (the words

used in the language) that make up the grammar of CSS.

49 Synt a x

89 Sema nt ic s

123 Vo cabu l a r y
CSS Grammar
Syntax is how you put words together to create meaning:
Punctuation and parts of speech are placed in a specific order
to describe something. How you combine these elements has a
direct effect on the meaning of what you are trying to communi-
cate. To describe your Web designs, you need to understand the
syntax of CSS.

Although CSS syntax is relatively simple compared to the syntax

of a language such as English, it is also less forgiving of mistakes.
A misplaced comma or semicolon might change your styles
completely or might even turn your styles into incomprehensible
gibberish, at least to the browser. But once you get the hang of it,
you’ll be speaking in CSS in no time.

CHAPTER 4
Syntax
Creating Meaning
CSS G RAM MA R
SYN TAX

The Rules of Style

Web pages are created using HTML tags to add structure to the
page. Most of these tags have inherent styles—that is, styles that
the browser manufacturer has set as the default. If we left it to the
browser to style our pages, they would all look pretty much the
same, and none too interesting. CSS acts on the HTML tags tell-
ing them how they should appear when rendered on the screen.
To change a tag’s style, you create CSS rules that bind styles to
particular elements on the screen, either directly to a specific
HTML tag or using a class or ID that can then be applied to any
HTML tag you desire.

Let’s keep it simple for now, and start by looking at how we cre-
ate a basic style for the header level 1 HTML tag <h1>. CSS
rules begin with a selector, which is what is being defined, fol-
lowed by a declaration or list of declarations between curly brack-
ets to define the selector’s style.

UGSMAG

u g sm a g . co m

Independent Canadian hip hop magazine

UGSMAG speaks to its audience with a

unique visual voice created with CSS.

50
Selector Declaration

h1 { color: red; }
Curly Brackets

51
CSS G RAM MA R
SYN TAX

The Rules of Style continued

Parts of a Style Rule

A CSS rule has the equivalents of the subject, object, verb,
and adjective that you would find in any English sentence:

 The subject (what we are describing) is the selector.

 The object (what is being described about the subject) is

the property.

 The verb (always the verb “to be” in CSS) is represented by

a colon.

 The adjective (the description) is the value.

52
 Subject
Verb

Sentence The level 1 header's text color is red.

Adjective

Object

Selector Colon

Rule h1 { color: red }

Value

Property

53
CSS G RAM MA R
SYN TAX

The Rules of Style continued

A Basic Style Rule

To tell another person that you want a level 1 header to be red,
you might say something like:

The level 1 header’s text color is red.

In CSS, to communicate the exact same thing, you could say:

h1 { color: red }

In this case, color refers to the text color and red is a predefined
keyword that the browser translates into an actual color value.
We could also use the RGB scale:

h1 { color: rgb(255,0,0) }

Or the hexadecimal color scale:

h1 { color: #ff0000 }

These all say the same thing: The first-level header’s text color is
red. In English this is called a declarative sentence. In CSS this is
called a CSS rule or selector declaration.

You are declaring style properties for the selector, in this case
the h1 selector, which effects the <h1> tag. There are three types
of selectors in CSS. The one shown here is an HTML selector
because it corresponds to a specific HTML tag. We will learn
about class and ID selectors a bit later in this chapter.

54
 The level 1 header's text color is red.

<h1> Through the Looking-Glass</h1>

h1 { color : red }
h1 { color : rgb(255,0,0) }
h1 { color : #ff0000}

55
CSS G RAM MA R
SYN TAX

The Rules of Style continued

Declaring More Styles

To add multiple declarations to your rule, separate each by a
semicolon. You can have one, two, ten, one hundred, or how-
ever many declarations you want in a single rule, as long as you
separate each by a semicolon, just like you might use a comma or
semicolon to separate the items in a sentence:

The level 1 header’s color is red, the font family is Georgia, and
the font size is 24px.

To say the same thing in CSS, you list the declarations:

h1 { color: red; font-family: Georgia; font-size: 24px; }

Notice that I’ve put a semicolon after each declaration, including

the last one. In the previous example, where there was only one
declaration, I didn’t add a semicolon because you don’t have to
put a semicolon after the last declaration in a list; you could just
leave it off. Now, forget you ever read that:

Always put a semicolon after every declaration in your list,

even the last one.

Why? Because one day you will make a change to that CSS rule.
You will add another declaration at the end of the list and you
will forget to add the semicolon to the previous line, and your
style will simply stop working. You will spend hours trying to
figure out why your styles are not working only to discover it was
because you forgot to add one stupid semicolon. How do I know
this? I have spent far too many hours of my life banging my head
against my keyboard trying to figure out why my styles aren’t
working, all because of a missing semicolon. Learn from my mis-
takes: Always include the semicolon after every declaration.

56
The level 1 header's text color is red, the font
family is Georgia, and the font size is 24px.

<h1>Through the Looking-Glass</h1>

h1 {
color : red;
font-family: Georgia; Semicolons
font-size: 24px;
}

57
CSS G RAM MA R
SYN TAX

The Rules of Style continued

Combining Rules
What happens when the same styles are being applied to different
selectors? For example, what if you want all of your headers to
be red? You could create three different style rules, one for each
header level:

h1 { color: red; } h2 { color: red; } h3 { color: red; }

When speaking, though, you wouldn’t say:

The level 1 header’s text color is red.

The level 2 header’s text color is red.

The level 3 header’s text color is red.

Instead, you would combine these into a single sentence using

commas:

The level 1, level 2, and level 3 header’s text color is red.

Similarly, you can apply the same style declarations to multiple

selectors in the same rule by putting them into a comma sepa-
rated list:

h1, h2, h3 { color: red; }

Now the first three header levels will be red. Besides saving a lot
of space, which is important once your CSS files start getting
large, this also has the advantage of putting all of the selectors
that use this value into a single place, making it easier to change
later. For example, if your boss or client decides they want green
headers instead of red, rather than changing the value in three
places, you only have to change it once:

h1, h2, h3 { color: green; }

58
The level 1, level 2, and level 3 header's text
color is red.

<h1> Through the Looking-Glass</h1>

<h3>By Lewis Carroll</h3>
<h2>CHAPTER I…</h2>

h1, h2, h3 { color : red; }

Commas

59
CSS G RAM MA R
SYN TAX

Types of Selectors
So far, you’ve only seen one kind of selector: the HTML selec-
tor. This allows you to specify how any HTML tag on the page
should be styled. If all you could do was style HTML tags and all
of the paragraphs looked the same, and all of the level 2 headers
looked the same, and all of the lists looked the same, and so forth,
your designs would look pretty boring. You need ways to selec-
tively style HTML tags with CSS.

For example, you might have your level 2 headers look one way
when in the main text of an article, another in the sidebar, and
yet a third when used as the caption for a photo.

CSS provides three distinct selector types that enable you to tai-
lor your design to appear exactly the way you want.

HTML Selector
To define how a particular HTML tag should be styled indis-
criminately across your Web page, use its HTML selector. For
example, if you say that all header level 2 tags should be red:

The level 2 header’s text color is red.

h2 { color: red; }

The styles will be applied to any content tagged with:

<h2>…</h2>

All header level 2 tags on the page will be red, unless you override
its declarations with other declarations. More about that later.

60
 The level 2 header's text color is red.

HTML Selector

h2 { color : red; }

<h2> Chapter I…</h2>

<h2> Chapter II…</h2>
<h2> Chapter III…</h2>

<h2> Chapter I</h2>

h2 { color : red; } <h2>Chapter II</h2>

<h2>Chapter III</h2>

61
CSS G RAM MA R
SYN TAX

Types of Selectors continued

Class Selector
If you don’t want all of your tags to appear exactly the same, you
need a “free agent” selector that can be applied to any HTML
tag. This is the class selector. When defining a class rule, you place
a period immediately before the class name to let the browser
know, “Hey, this is a class selector, not an HTML or ID selector”:

.hilight { background-color: yellow;}

This says:

The hilight class text background color is yellow.

To apply this class (and thus its styles) to an HTML tag, add
the class attribute to a tag with the class name in quotes. You can
apply the same class to any HTML tag you choose, as many times
as you want:

<h2 class="hilight">Chapter I…</h2>

Notice though that you do not add the period with the class
name when it’s in the HTML tag. The period is only included
when you are setting up the class rule.

62
 The hilight class text background color is yellow.

Class Selector

.hilight { background-color: yellow; }

Period

<h2 class="hilight"> Chapter I…</h2>

NO Periods

<p class="hilight"> 'I should…</p>

<h2 class="hilight">
Chapter I…</h2>

.hilight {color : red; }

<p class="hilight">
'I should...</p>

63
CSS G RAM MA R
SYN TAX

Types of Selectors continued

Class Selector: Dependent Class
A dependent class allows you to specify the styles a class should
have if the class is applied to a particular HTML tag. This allows
you to create a general style for a class, but then specify more
styles for a specific HTML tag within that class. For example,
you might set up a general class to make the background color
yellow, and then set up a dependent class so that when that
class is applied to a particular tag, the background color is
green instead:

If the hilight class is used with a level 2 header, then its back-
ground color is green.

h2.hilight { background-color: green; }

64
 If the hilight class is used with a level 2 header,
then its background color is green.

Class Selector

h2.hilight { background-color: green; }

HTML
Selector

<h2 class="hilight"> Chapter I…</h2>

<p class="hilight"> 'I should…</p>

h2.hilight { background-color : green; }

<h2 class="hilight">
Chapter I…</h2>

.hilight { background-color : yellow; }

<p class="hilight">
'I should...</p>

65
CSS G RAM MA R
SYN TAX

Types of Selectors continued

Class Selector: Mix and Match Classes
As if being able to add a single class to an HTML tag wasn’t
enough, you can also add multiple classes to a single HTML tag,
mixing and matching styles as needed. Simply list all of the classes
you want applied to a particular HTML tag in the class attribute,
separated by spaces:

<p class="hilight smallprint">'I should…</p>

When applied to an HTML tag, that tag picks up the styles of all
of the classes applied to it.

N a m i n g Yo u r C l a s s e s a n d I D s

You can call your classes or IDs anything you want as long as you follow

these basic rules:

 It can start with a letter or a number.

 It can contain any letter, number, hyphen (“-”), or underscore (“_”).

 Both classes and IDs are case sensitive. So, “myClassName” is

different from “myclassname”.

Class or ID names could be “bob”, “3423_jyt”, or “9-8-2009”, but

you should always try to name them something meaningful according

to what the class or ID is for, rather than what styles it applies. For

example, I might call a class “redText” to hilight certain text. But what

happens if later I want to make the hilighted text yellow? The yellow text

is now created using a class called redText. A better choice would be to

call the class something like “hilight” or “smallprint,” which describes

what it is for and allows for different versions.

66
 The highlight class background color is yellow.
The smallprint class font size is extra small.

.hilight { background-color: yellow; }

.smallprint { font-size: x-small; }

<p class="hilight smallprint"> 'I should…</p>

Space

h2.hilight {color : yellow; }

<h2 class="hilight">
Chapter I…</h2>
.smallprint { font-size: x-small; }

<p class="hilight smallprint">

'I should...</p>

67
CSS G RAM MA R
SYN TAX

Types of Selectors continued

ID Selector
The first thing to know about the ID selector is that, on the sur-
face at least, it looks and acts exactly like the class selector. The
only obvious difference is that you use a hash mark at the begin-
ning, to declare it, rather than a period:

#title01 { color: green; }

To apply the ID (and thus its styles) to an HTML tag, add

the ID attribute to the tag with the name of the ID you want
to apply:

<div id="title01">Chapter I…</div>

Similar to the class selector, you do not add the hash mark with
the ID name when it’s in the HTML tag. The hash mark is only
included when you are setting up the ID rule.

W h a t I D ’s A r e G o o d F o r

So what’s the difference between a class and an ID? It isn’t so much

in how these selectors work, but in what you use them for:

 Identifying major page sections (for example, header, content,

footer)

 Identifying unique content or modules (for example, search,

navigation, ad)

 Identifying an element to be used with Javascript

 Specificity, which we will talk about more in the next chapter

68
 The title01 ID text color is green.

ID Selector

#title01 { color: green; }

Hash Mark

<h2 id="title01"> Chapter I…</h2>

NO Hash Mark

<h2 id="title01">
Chapter I…</h2>

#title01 { color : green; }

69
CSS G RAM MA R
SYN TAX

Styles in Context
When speaking, context can radically alter the meaning of a
statement. Take the phrase:

“I’m going to kill you!”

If someone said that while whacking you on the head with a pil-
low, it would mean something very different than if they said it
while whacking you on the head with a baseball bat. The context
in which those words are spoken is the difference between the
phrase being a playful euphemism or a menacing threat.

Likewise, in CSS, the context of a particular element can deter-

mine its style. For example, if you want headers in a sidebar to
look different from headers in the main body, you can easily
give each a different look by defining how the level 1 header tag
should look in the body and a different rule for how it should
look in a sidebar.

70
Headline
Variety

UGSMAG uses the

<h2> tag in both their

top article headline

and in secondary

headlines as well,

using CSS to give the

headlines a differ-

ent size depending

on which spot they

appear in.

71
CSS G RAM MA R
SYN TAX

Styles in Context continued

Styles Based on Where

Something Is
The most frequent way to use context is to style an element
based on the HTML tags, classes, or IDs of its parent elements.
Remember that an element is created anytime you put HTML
tags around content. You can nest one element inside of another,
and the surrounding tags are called parent elements. We can then
write our CSS to style a tag based on the HTML tags, classes, or
IDs that the element is within to style the descendent selectors.

A Simple Example of Descendent

Selector Context
For example, you might style the text color <cite> tag—which is
used to indicate that a block of text is a citation, such as a book
title like Through the Looking-Glass—green, but make it red if it’s
in a level 1 header. To do this, we list each of the selectors that
define the context, with a space in between:

A citation’s text color is green.

cite { color: green; }

If a citation is in a level 1 header, its text color is red.

h1 cite { color: red; }

72
 If a citation is in a level 1 header, its text color
is red.

h1 cite { color: red; }

Space

<h1><cite>Through the Looking-Glass</cite></h1>

<h1><cite>
Through the Looking-Glass
</cite></h1>

h1 cite { color: red; }

73
CSS G RAM MA R
SYN TAX

Styles in Context continued

A More Complex Example of Descendent

Selector Context
Context is not just for HTML tags. You can get as specific as
you want about the context using classes and IDs as well. For
example, we might create a rule for a <cite> tag if it’s in the intro-
duction of the article section of the page:

If a citation is in a paragraph with the intro class that is within

the article ID, its text color is red.

#article p.intro cite { color: red; }

You can create contexts as specific as you like, but keep in mind it
is always the last selector in the list that gets the actual styling.

The above CSS would apply its styles to the following content:

<div id="article"><p class="intro"><cite>

Through the Looking-Glass
</cite></p></div>

But not to:

<div id="article"><h1><cite>
Through the Looking-Glass
</cite></h1><div>

Because it doesn’t have the intro class in a paragraph.

74
 If a citation is in a paragraph with the intro class
that is within the article ID, its text color is red.

#article p.intro cite { color: red; }

Space

<div id="article"><p class="intro"><cite>

Through the Looking-Glass
</cite></p></div>

<div id="article"><h1><cite>
Through the Looking-Glass
</cite></h1></div>
<div id="article"><p class="intro"><cite>
Through the Looking-Glass
</cite></p></div>

#article p.intro cite { color: red; }

75
CSS G RAM MA R
SYN TAX

Styles In Context continued

Styles for Children

Styles can also discriminate between an element that is a direct
child of its parent or an element that is a “grandchild,” allowing
you to style child selectors. For example, you can create a rule to
make the text red only when it’s the direct child (not a grand-
child) of a paragraph tag.

If the emphasis tag is in a paragraph, and does not have any

other parent tags, its color is red.

p>em { color: red; }

If we applied these two rules to the following HTML code:

<p><em>the white kitten</em><p>

Here, “the white kitten” will be red because the emphasis tag is a
directly within the paragraph. However, if we applied it to this
HTML code:

<p><strong><em>the old cat</em></strong></p>

In this case, “old cat” would not get the red styling because
the strong text is the emphasized text’s direct parent, not the
paragraph.

IE6: Not Always in Context

Although IE7 and above rectifies the situation, IE6 does not support

styling of child and sibling selectors. Make sure when using these

contextual selector types that they are only used as a design enhance-

ment or include a work-around for IE6 as described in Chapter 12,

“The Last Word: Dealing with Browser Inconsistencies.”

76
 If the emphasis tag is in a paragraph, and does
not have any other parent tags, its color is red.

p>em{ color: red; }

Chevron

<p><em> the white kitten</em></p>

<p><em>
p>em{ color : red; } the white kitten
</em></p>
<p><strong><em>
the old cat
</em></strong></p>

77
CSS G RAM MA R
SYN TAX

Styles In Context continued

Styles for Siblings

If elements are next to each other (not nested inside of each
other), they are called adjacent or sibling selectors. You can set a
style based on an element’s sibling. For example, let’s say you want
any citation that’s next to emphasized text to be red:

If a citation is next to emphasized text, its text color is red.

em+cite { color: red; }

If we applied this to the following HTML:

<em>Quotes</em> from <cite>Through the Looking-Glass</cite>

The words “Thorough the Looking-Glass” would be red, because

the <em> and <cite> tags are next to each other (despite the
intervening text).

However, with the following HTML:

<em>Quotes</em> <strong>from</strong>
<cite>Through the Looking-Glass</cite>

The words “Through the Looking-Glass” would not get the red
styling because the <strong> tag is in the way.

78
 If a citation is directly next to emphasized text,
its color is red.

em+cite{ color: red; }

Plus Sign

<em> Quotes</em> from

<cite>Through the Looking-Glass</cite>

<em> Quotes/em> from

<cite>Through the Looking-Glass</cite>

em+cite{ color: red; }

79
CSS G RAM MA R
SYN TAX

Styles for Special Cases

Although primarily intended to add styles to particular elements
created using HTML tags, there are several cases where we can
use CSS to style content on the page that is not specifically set off
by HTML tags or to create a dynamic style in reaction to some-
thing that your Web site visitor is doing on the screen. These are
known as pseudo-elements and pseudo-classes:

 Link pseudo-classes: Used to style hypertext links.

Although primarily associated with color, you can actually
use any CSS property to set off links and provide user feed-
back during interaction.

 Dynamic pseudo-classes: Used to style any element on the

screen depending on how the user is interacting with it.

 Pseudo-elements: Used to style the first letter or first line in

a block of text.

Link States
All hypertext links have four “states” that can be styled in reac-
tion to a user action:

 a link state when there has been no action

 a hover state when the mouse cursor is over it

 an active state when the user clicks it

 a visited state when the user returns after having visited the
linked-to page

80
Link Hover

Active Visited

81
CSS G RAM MA R
SYN TAX

Styles for Special Cases continued

Styles for Link Actions

Although the link tag can be styled just like any other HTML
tag, it is a special case, because people visiting your site can inter-
act with it. It’s a good practice to create different styles to react to
what the visitor is doing. To that end, CSS includes four different
pseudo-classes for each of the four interaction states: link, visited,
hover, and active:

The default link text color is red.

a:link { color: red; }

If the link is in the browser history, its text color is dark red.

a:visited { color: darkred; }

When the visitor hovers over a link, its text color is hot pink.

a:hover { color: hotpink; }

When the visitor clicks a link, its text color

Designing Interaction
is fuchsia.
In Chapter 10, “Navigation” we’ll dou-
a:active { color: fuchsia; }
ble down on how to use the link and
dynamic pseudo-classes to create a
Collectively, these are known as the link pseudo-
classes. They need to be in the above order—link,
variety of interactive styles for but-
visited, hover, active—to function properly, due
tons and other controls. It’s important
to the cascade order, which we’ll learn more
for you to expand your notion of Web
about in the next chapter. It’s also important to
site design to include the interactive
remember that, while links are typically associ-
elements. Often I see visual comps
ated with color, any style can be applied to a link.
from designers that look great but

are static. Don’t ignore the fact that

people are using your site.

82
 The default link text color is
red.
If the link is in the browser history, its text color is
dark red.
When the visitor hovers over a link, its text color is
hot pink.
When the visitor clicks a link, its text color is
fuchsia.

a:link { color: red; }

a:visited { color: darkred; }
a:hover { color: hotpink; }
a:active { color: fuchsia; }

<a href="index.html">Welcome…</p>

83
CSS G RAM MA R
SYN TAX

Styles for Special Cases continued

Styles for Dynamic Actions

The hover and active states are not just for links. You can actually
place your cursor over and click on any element on the screen and
style elements for those actions. The third action state is when the
user selects an element on the screen (usually a form field) and
that element is in focus and it is ready for user input.

The default text color for the class formField in an input box
is gray.

input.formField { color: gray; }

When the user hovers over an input field with the formField
class, its text color is green.

input.formField:hover { color: green; }

When the user clicks an input field with the formField class, its
text color is red.

input.formField:active { color: red; }

While the user is typing in an input field with the formField

class, its text color is black.

input.formField:focus { color: black; }

Collectively these are called the dynamic pseudo-classes, which

allow you to provide interactive feedback to the user. Dynamic
pseudo-classes can be applied to any element on the screen but
are chiefly used to add dynamic interaction to form fields and
buttons, which we will look at in Chapter 10, “Navigation & UI”

One drawback: IE7 does not support active and focus, and IE6
supports none of these.

84
 The default text color for the class formField in
an input box is gray.
When the user hovers over an input field
with the formField class, its text color is green.
When the user clicks an input field with the
formField class, its text color is red.
While the user is typing in an input field with
the formField class, its text color is black.

input.formField { color: gray; }

input.formField:hover { color: green; }
input.formField:active { color: red; }
input.formField:focus{ color: black; }

<input class="formField" type="text" />

85
CSS G RAM MA R
SYN TAX

Styles for Special Cases continued

Styles for Parts of a Paragraph

To draw attention to an introduction or opening statement, one
common practice is to make the first letter or first line of text in
a paragraph stand out from the rest of the text on the page. A
paragraph is a block of text, so it has a first letter and a first line
of characters, but they do not have specific HTML tags around
them. To style these you can use pseudo-elements for the first-
letter and first line:

The first letter of each paragraph is red.

p:first-letter { color: red; }

The first line of each paragraph is blue

p:first-line { color: blue }

Keep in mind, though, that this applies the style indiscriminately

to all paragraph tags on the page. If we want to style only the first
letter or line of the first paragraph in our content, we would need
to style it based on its context as the first child of a particular ele-
ment (let’s ID it as content).

The first letter in a paragraph within any tag with the content
ID has a color of red.

#content+p:first-letter { color: red; }

<div id="content"><p>One thing was certain…</p></div>

The only drawback to this method is that it will not work in IE6,
which does not recognize the child context.

86
 The first letter of each paragraph is red.
The first line of each paragraph is blue.

p:first-letter { color : red; }

Colon

p:first-line { color : blue; }

Colon

<p>One thing was certain…</p>

<p>One thing was certain…</p>

p:first-letter { color : red; }
p:first-line { color : blue; }
<p>The way Dinah…</p>

87
When we speak to each other, we understand as much from the
context of our words as from the words themselves. To be under-
stood, we need to be clear about the context of our statements.
We use semantics to do this, putting ideas together in a logical
manner. We don’t think about it, it’s an instinct like breathing—
we do it all the time.

In CSS, where you place your styles defines where and how they
will be applied. You need to understand how styles cascade down
the document, and how to apply different styles depending on
the medium. With a bit of practice, the semantics of CSS will
also become as instinctual as speaking or even breathing.

CHAPTER 5
Semantics
Making Sense of St yles
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules

In Chapter 4, I cleverly avoided showing you exactly where to
put your CSS code. Instead I showed it disembodied from the
HTML code it was intended to style. However, where you put
your CSS code in relation to your HTML code has a direct
impact on how it works and what elements it affects. There are
three places to put your CSS code, depending on the scope of ele-
ments you want your styles to define:

01 Inline  Styles placed directly into an HTML tag using the

style attribute.

02 Embedded  Styles placed in an HTML <style> tag and

then applied to that Web page.

03 External  Styles placed in a separate file and made acces-

sible by any Web page using the <link> tag or @import rule.

Threadless

t hr e ad les s. c om

T-shirt styles in a well designed site—that’s

Threadless.

90
91
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules continued

Inline Styles for an HTML Tag

So far, I have shown you examples of a complete CSS rule, con-
sisting of a selector and a declaration:

h1 { color: red; }

However, CSS allows you to use the style attribute to place style
declarations directly into an HTML tag:

<h1 style="color: red;">Through the Looking-Glass</h1>

This is called placing the style inline. It has the same effect on the
style of the level 1 header tag as the full CSS rule, but only affects
that single instance of the tag. All other level 1 headers on the
page remain unaffected.

You can add as many different styles as you want to the style attri-
bute, as long as you separate each declaration by a semicolon:

<h1 style="color: red; font-family: Georgia; text-align: center;">

Through the Looking-Glass</h1>

Although useful for quickly adding styles where they are needed
in a design, inline styles have two major drawbacks that diminish
the flexibility of CSS, so they should be used sparingly if at all:

01 Because inline styles affect only that one tag in that one
instance, you can’t easily make global changes to styles.

02 Inline styles are the final word on what styles are applied to
that element, so they cannot be overridden.

I sometimes use inline styles while developing a site to quickly

test out ideas, but before my Web pages go live, I take inline styles
out of my HTML code and replace them with classes or IDs.

92
 Style Attribute Declaration

<h1 style="color : red;" >

Through the Looking-Glass
HTML Tag
</h1>

Inline Style:
Affects only the tag it is in.

93
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules continued

Embed Styles in a Web Page

Styles that are meant to affect an entire Web page (but not nec-
essarily an entire Web site) are embedded into the HTML code
using the HTML <style> tag, which will contain CSS rules:

<style type="text/css" media="all">

h1 { color: red; }

.hilight { background-color: yellow; }

#slide01 { border: 1px solid blue; }

</style>

Embedded styles will be applied to any relevant elements in the

page. Making a change to any of the rules in this list will affect
all of the elements on the page that
W h e r e t o P l a c e t h e S t y l e Ta g are affected by that rule. The type will
You can place the <style> tag anywhere in the always be “text/css” (yes, there are other
<head> or <body> of your HTML document, but
types; no, no one uses them). We will
discuss media types later in this chap-
I strongly recommended that you place this
ter, but the default is “all,” to tell the
code in the <head> and above any JavaScript
browser the styles should be applied to
you might have on the page. Why? You want
all media types.
these styles to be applied as quickly as pos-

sible, before the content is displayed. If you

place it after JavaScript or in the body of your

HTML, there is a strong chance that the browser

will start displaying the content before it has

deciphered your style rules, and there will be

an annoying flash as the page disappears and

then reappears with the appropriate styling.

94
 Style Tag Style Type Media Type

<style type="text/css" media="all">

h1 { color : red; }
</style> Close Tag

CSS Rule

Embedded Style:
Affects the entire page it is on.

95
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules continued

External Styles in a Web Site

Although inline and embedded styles allow you to add CSS to
Web pages, the real power of CSS comes when you apply styles
to an entire Web site. Instead of changes affecting a single page or
tag, you can change dozens or thousands of pages by switching a
single style. To do this, you need to set up an external style sheet,
and then link it to a Web page or import it into a Web page or
another external style sheet.

For example, say you have a Web page called main.html, with
your content structured using HTML. To style this file, you
would create an external style sheet called default.css, and place
a <link> tag or @import rule in the HTML file pointing to the
external style sheet. Those styles will now be applied to the Web
page just as if the code was embedded in it. However, we could
also link that same file to more files—for example ch01.html or
ch02.html—and get the same styles applied to the content on
those pages.

However, you are not limited to a single external style sheet. If

you need to tailor the design of each page, you can link to or
import additional style sheets to mix and match styles. For exam-
ple, you can have a ch01.css and a ch02.css style sheet to customize
those pages with their own backgrounds (or anything else you
need). To cut down on the number of files you are linking to,
you could import default.css into ch01.css and ch02.css to get the
same results.

96
97
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules continued

External Styles for a Web Site: Creating
an External Style Sheet
Setting up an external CSS file is simple: Start a new file in your
favorite text editor, and start typing in your CSS code. An exter-
nal style sheet is simply a text file with your CSS code. That’s it
and nothing else. No HTML tags or JavaScript, just CSS. In fact,
if you have anything else in the file other than CSS and notes (see
the next section), the CSS will not work.

The code in the CSS text file might look like:

h1 { color: red; }

.hilight { background-color: yellow; }

#slide01 { border: 1px solid blue; }

Notice that there is no <style> tag around the CSS code.

When you are ready, save the file, giving it a meaningful filename
with the extension .css. For example, You might have an external
file called default.css and another one called ch01.css.

Since you may have multiple external

W h i c h Te x t E d i t o r i s B e s t ?
style files for a single site, it’s a good
In Chapter 2, I recommended several different idea to collect them all into one place—
applications that you can use to edit your code. usually a folder called css.
Any of those will work for creating an external

style sheet. You could also use something simple

like TextEdit (Mac) or NotePad (Windows). Avoid

using a word-processor such as Microsoft Word,

since it will add invisible characters that inter-

fere with your code.

98
99
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules continued

External Styles for a Web Site: Linking to
an External Style Sheet
You have two options for adding external styles to your Web
pages: linking or importing. The most common method is to use
the <link> tag:

<link href="default.css" type="text/css" media="all" />

The <link> tag is a self-closing HTML tag that includes a refer-

ence to the external CSS file, which can either be a relative path
(the location of the external file in relation to the HTML file
that’s pulling it in) or an absolute URL. As with the <style> tag,
the <link> tag includes a type, which is always "text/css", and a
media type, which, for now, we’ll set to "all" so that the styles are
applied to any media type.

The <link> tag will inject the CSS code from the external style
sheet wherever it is placed in an HTML document, just as if
that code was embedded in the HTML file. As with embedding
the code in the page, though, it’s best to place the link within
the <head> tag and above any JavaScript so that the styles are
available as soon as the page is rendered in the browser window.
Otherwise, you risk having the content load before the styles and
then redraw itself after the styles have been processed.

You can add as many different link tags as you want to your Web
page, allowing you to mix and match different styles. Before you
go too crazy, though, study “The Cascade” section later in this
chapter to understand how different CSS rules interact with and
override each other.

100
 Link Tag

<link
rel="stylesheet" Link Relationship

href="default.css" URL for File

type="text/css" Style Type

media="all" Media Type

/>
Self-Closing

Linked External Style:

Affects any page it is linked to.

101
CSS G RAM MA R
SEM AN T IC S

Where to Put Style Rules continued

External Styles for a Web Site: Importing
an External Style Sheet
The second way to add an external CSS file to your HTML code
is using the @import rule, which can be added within any <style>
tag you have embedded in a page, as long as they come before any
other CSS code in the tag. You can also add them directly at the
top of another external CSS file:

@import url(default.css);

Using the import rule will pull the CSS from the external file,
placing it directly into that position in an HTML document or
in another CSS file, based on the URL provided, either as a rela-
tive path (where the file is in relation to the summoning file) or
an absolute path (the full URL, starting with http://www).

Like the <link> tag, you can add as many @import rules as you
want to your external style sheets and HTML files, but it’s impor-
tant to understand how the cascade works (described later in this
chapter) if you want your styles to work the way you intend them to.

Link or Import?

One important difference between <link> and @import is

that the browser will wait for linked styles in the <head> to
load before the page is displayed. @import allows the page
to continue rendering and applies the styles afterwards. If
your designs “blink”—with the content re-rendering to show
the final design—this might be the reason why.

102
Import Rule

@import url(default.css);
URL for File

Imported External Style:

Affects any page or CSS file it is
imported into.

103
CSS G RAM MA R
SEM AN T IC S

Adding Notes to CSS

When creating designs, we often add notes and comments to
remind us why we did something or to explain to people look-
ing at the design after us what is going on. CSS allows us to add
these notes, but they need to be set off from the rest of the text to
ensure they don’t interfere with the code. Open a CSS note with
a slash followed by an asterisk. Then, reverse the pattern to close
the note:

/* Note goes here */

Anything you place between these two marks will be completely

ignored by the browser, as if it did not exist. For example, you
might want to add a one-line note about what a particular rule
is doing:

/* Resets how content on the page is presented */

Or you might want to add a multi-line note with details on

who created the design and how they can be contacted for fur-
ther details:

/*——————————————

By: Jason Cranford Teague

Email: jason@brighteyemedia.com

——————————————-*/

Note that in this example, the extra dashes at the top and bottom
are only there to help set off the comment from the rest of the
page. They are not required.

104
Slash

/* Your Message Here */

Asterisk

105
CSS G RAM MA R
SEM AN T IC S

Inheritance
It’s important to remember that almost all HTML tags have
styles indirectly applied to them. An inherited style can come
from styles that are predefined by the browser itself (browser-
default styles) or from an element’s parent tags (parent-inherited
styles).

For example, given the following style:

The hilight class’s text color is purple.

.hilight { color: purple; }

And this block of HTML:

<h1 class="hilight">The Characters of

<cite>Through the Looking-Glass</cite></h1>

The book title, Through the Looking-Glass, will be purple because

the citation tag inherits the style from the hilight class in its
parent tag. However, it goes without saying that it will also be
black, bold, and italicized because it is in the level 1 header, and
italicized because of the citation tag. Now this may not come as
any shock to you: Of course the <h1> tag makes text bold, but
why? There is no mystical property of the universe that says when
you invoke the alpha-numeric combination of “h1” that text will
be bold. The text is bold because the person who created this
browser decided to program it so that text in the header level 1
tag is bold. So, if no other styles override them, the text will at
least have these default styles to make it stand out to anyone
reading it.

106
 <h1>The Characters of
<cite>Through the Looking-Glass</cite></h1>

font-weight: bold
Browser-default
font-style: italic

The Characters of Through the Looking-Glass

  
.hilight { color: purple; }

<h1 class="hilight">The Characters of

<cite>Through the Looking-Glass</cite></h1>

Parent-inherited color: purple

The Characters of Through the Looking-Glass

107
CSS G RAM MA R
SEM AN T IC S

Inheritance continued

Overriding Inheritance
Style declarations are not engraved in stone and can be easily
overridden. The most obvious way to override a style is to simply
restate it later in your CSS. For example, if we wanted to over-
ride an inherited style, we might say something like:

The hilight class’s text color is purple, but the cite tag’s text color
is orange.

cite { color: orange; }

.hilight { color: purple; }

In the following block of HTML:

<h1 class="hilight">The Characters of

<cite>Through the Looking-Glass</cite></h1>

the entire header will be purple because of the hilight class, but
the book title, Through the Looking-Glass, will be recolored
orange because the declaration for the citation tag overrides the
parent-inherited style.

108
 cite {color: orange; }
.hilight { color: purple; }

<h1 class="hilight">The Characters of

<cite>Through the Looking-Glass</cite></h1>

color: orange

The Characters of Through the Looking-Glass

109
CSS G RAM MA R
SEM AN T IC S

Order
You can override a style for any selector simply by declaring the
rule again with the same attribute but a different value:

.hilight { color: orange; }

.hilight { color: purple; }

The second instance of the hilight class will override the one
before it, basically allowing you to change your mind.

The basic rule of thumb is that the last instance of the style
declared is the one applied to the page.

Why would you want to override styles? This example shows the
change immediately after, but that would not be very likely—you
would just change the first rule. However, once your CSS starts
getting longer and more complex, spanning multiple Web pages
and multiple external CSS files, you may need to override the
style set for one element on one page with another.

The order you place your CSS rules in will have a direct effect on
which style ends up being applied, with the last one listed being
the one that gets used, if there are no other overriding factors
such as specificity, importance, and media type.

What are specificity, importance and

Overriding Inherited Styles media? Read on.
There are a lot of browser-default styles that

are inherited by your Web pages. For example,

we assume that text is black by default, or uses

the Arial/Helvetica font family. Both of these are

browser-default styles or are defaults controlled

by the user that you can override using CSS.

110

.hilight { color: orange; }

.hilight {color: purple; }
<h1 class="hilight">The Characters of
<cite>Through the Looking-Glass</cite></h1>

color: purple

The Characters of Through the Looking-Glass

111
CSS G RAM MA R
SEM AN T IC S

Specificity
Although the order you place your CSS rules in is important, it
is not the final word in determining whether a style is applied
to an element or not. Specificity refers to how much context you
provide in a given CSS rule. The more specific the context the
rule is to be applied, the more weight it is given when determin-
ing whether or not it is applied, even allowing you to override
the order in which styles are set. If you are unsure what I mean by
context, check Chapter 4’s “Styles In Context” section first.

The basic rule of thumb is that the more specific you are about
the context of a CSS rule, the more likely it is that the style
will be applied to the element.

The more selectors included in your contextual rule, the more

specific it is. If there are no other overriding factors—such as
importance and media type—then a more specific rule gets
applied regardless of order.

So, for example:

h1 .hilight { color: orange; }

is a more specific context than just:

.hilight { color: purple; }

The first CSS rule tells the browser how to style the hilight class
if it is in a level 1 header tag, whereas the second rule only applies
to the general case of the hilight class. And

#content h1 .hilight { color: brown; }

is even more specific, so it will win out over the other two rules
that are placed after it in the style sheet.

112
 h1 .hilight { color: orange; }



.hilight {color: purple; }
<h1>The Characters of
<cite class="hilight">Through the Looking-Glass</cite></h1>

color: orange

The Characters of Through the Looking-Glass

  

#content h1 .hilight { color: brown; }

h1.hilight
.hilight {color: orange; }

{color: purple; }
<h1>The Characters of
<cite class="hilight">Through the Looking-Glass</cite></h1>

color: brown

The Characters of Through the Looking-Glass

113
CSS G RAM MA R
SEM AN T IC S

Specificity continued

Determining a CSS Rule’s Weight

So what happens when you have the same number of selectors in
a contextual rule that applies to the same element? For example:

#content h1 .hilight { color: purple; }

.column01 h1 .hilight { color: orange; }

Both of these CSS rules have three selectors, so which style is

applied? In this case, you have to look at how many of each kind
of selector appears in the rule. Each selector type—HTML, CSS,
and ID—has its own specific weight when it comes to determin-
ing specificity. An HTML tag has a weight of 1, classes have a
weight of 10, IDs have a weight of 100, and inline style (styles
placed directly into an HTML tag with the style attribute) trump
them all with a weight of ∞—that is, they cannot be overridden
no matter how specific the CSS rule. In the example of above, the
first CSS rule would have a weight of 111:

100 (#content) + 1 (h1) + 10 (.hilight) = 111

The second one has a weight of only 21:

10 (.column01) + 1 (h1) + 10 (.hilight) = 21

In this case, the first rule will be applied.

So, what happens in cases where the weights add up to be exactly

the same? We fall back on order: The last CSS rule declared is the
style used.

The basic rule of thumb is any rule with ID selectors in the con-
text is going to override most other rules; a rule with a class in
the context will override a rule with just HTML selectors.

114

#content h1 .hilight { color: orange; }
100 + 1 + 10 = 111

.column01 h1 .hilight { color: purple; }

10 + 1 + 10 = 21

<div id="content" class="column1">

<h1>The Characters of
<cite class="hilight">Through the Looking-Glass</cite>
</h1></div>

color: orange

The Characters of Through the Looking-Glass

115
CSS G RAM MA R
SEM AN T IC S

Importance
Inheritance, order, and specificity combine to determine which
styles are applied to which elements, but you still have an ace
in the hole if you need to force particular styles to be applied:
!important will override all other concerns, forcing a style to be
applied. By placing this immediately after a value—but before
the semicolon—you are telling the browser that this is the most
important style declaration being applied, overriding all other
declarations, with the exception of inline styles.

For example, if you have rules for the same selector, but add
!important to the first:

It’s important that the hilight class text color is orange.

.hilight { color: orange !important; }

The hilight class text color is purple.

.hilight { color: purple; }

Despite the fact that the purple declaration is second, any text
within the hilight class will be orange. !important will also over-
ride specificity:

#content h1 .hilight { color: orange; }

.column01 h1 .hilight {
When Is a Style Important?
color: purple !important; }
It could be tempting to throw !important on
Even though the first declaration to use
everything, which could come back to bite
orange for the text color has greater speci-
you later since they are hard to override.
ficity, the second declaration will be used
Important is best reserved for use while because it is important.
prototyping new ideas or if you are creating

a module for another site where you need to

override third-party styles.

116

.highlight { color: orange !important; }

.highlight {color: purple; }
<h1 class="hilight">The Characters of
<cite>Through the Looking-Glass</cite></h1>

color: orange

The Characters of Through the Looking-Glass

  

#content h1 .hilight { color: orange; }

.column01 h1 .hilight { color: purple !important; }

<div id="content" class="column1"><h1>The Characters of

<cite class="hilight">Through the Looking-Glass</cite>
</h1></div>

color: purple

The Characters of Through the Looking-Glass

117
CSS G RAM MA R
SEM AN T IC S

Media
We generally think of the Web as a screen-based medium, but
Web pages can be output on a variety of different devices. You
need to be able to create style sheets that tailor your pages to a
variety of media. Earlier in this chapter, when you learned how
to add styles to a Web page or a Web site, I mentioned that you
can also specify a media type to which the style sheet should be
applied. The default is all—that is, apply these styles regard-
less of the device. Although CSS allows for several media types,
really there are only four types you need to worry about:

01 Screen  Whether it’s a laptop or desktop computer; CRT,

LCD, or plasma; screen is what you will use most of the time.

02 Print  A lot of Web pages get printed. Some sites will

create special “printer friendly” versions of the pages, but all
you really need to do is add a printer style sheet. Whenever
the user prints a page in a Web browser, this style sheet tai-
lors the design for the printed page.

03 Handheld  Handheld devices are a popular way to surf the

Web, and you should provide a scaled-down version of your
pages for that audience. Handheld devices present one of the
greatest challenges, because of the variety of screen sizes.

04 All  Styles will be used regardless of the device type.

For details on getting the best results with media types, check out
Chapter 12: “The Last Word.”

118
Screen

Print

Handheld

119
CSS G RAM MA R
SEM AN T IC S

The Cascade
While the browser is rendering your Web page, each style decla-
ration cascades through the Web page with a particular priority
based on its media type, importance, specificity, order, and inher-
itance until its rule matches a particular element. (Sounds pretty
poetic, doesn’t it?) The cascade is predictable, and usually obvious
as long as you don’t try to overthink it.

Styles are applied in order of priority:

01 Inline styles  Inline styles trump all other priorities and

are applied first.

02 Media  If the media type does not match the output

media, then obviously the styles are ignored.

03 Importance  Any declaration with !important will be

applied if there is not an overriding inline style.

04 Specificity  The more specific the context—weighted

for the number of IDs, classes, and HTML selectors—the
higher the priority for the style to be applied.

05 Order  The last style declared is the one that gets applied.

06 Parent-inherited  Any styles inherited from parent ele-

ments are applied.

07 Browser-default  Any styles inherited from the browser

defaults are applied last.

120
 high

Inline
Media
Important PRIORITY

Specificity

Order

Parent-inherited

Browser-def
r ault
low

121
Vocabulary is what adds diversity to a language. In the examples
I have presented so far, I kept the vocabulary simple so that we
could concentrate on the syntax and semantics. Now, it is time to
broaden your horizons—not to mention your design possibilities
—with a slate of new CSS vocabulary.

I want to say up front that this is not a comprehensive list of CSS

properties and values. It is a vocabulary list intended for designers
to reference while working. But, just as when you are learning a
new spoken language you wouldn’t start off memorizing the dic-
tionary, you don’t need to know all of the nuances of the vocabu-
lary to create great Web designs with CSS.

CHAPTER 6
Vocabulary
Talking the Talk
CSS G RAM MA R
VOC ABU LA RY

Values
A CSS rule is made up of a selector with one or more declara-
tions separated by semi-colons, and each declaration is made
up of a property and a value (see Chapter 3 if you need more
details). This chapter presents the various properties you will be
using when describing your designs in CSS with a list of possible
values underneath. The values come in two basic types: keywords
and variables.

Keywords
Many of the values you will assign to a CSS property are key-
words—words you type exactly as you see them—and most are
self-explanatory, but a few need some additional explanation:
auto  The browser calculates the value.
inherit  Sets the property to use the same value as its parent
element.
none  Removes any specific value, which prevents the property
from being displayed or removes any limitations.
normal  Sets the property to its default value.
transparent  Sets the color value to 0% opacity, allowing any-
thing behind the object to show through. However, any length
values associated with the property are still honored.

The Urban Dictionary

u rbandi c ti o na r y.co m

If you need to know the meaning of a word

that you can’t find in Webster’s Dictionary, it’s

probably in the Urban Dictionary.

124
Variables
Values listed in chevron brackets <> are variables. You will need See Appendix A for
more details on val-
to determine the exact value based on the type of variable:
ues used in CSS.
<color>  A chromatic value, based on the amount of red, green,
or blue for the hue. Color values are most commonly expressed
using the hexadecimal notation, RGB values (using percentages
or the 0–255 scale), or as a keyword color name.
<font-name>  The name of any font family you want to use.
Keep in mind the browser can only use the font families that See Appendix C for a
are installed on the end-user’s computer. list of Web-safe fonts.

<length>  A relative or absolute length. Relative lengths vary

based on context, while absolute values remain constant.
<number>  An integer, either positive or negative.
<percentage>  Generally calculated as a percentage of the inher-
ited value. For example, if the parent’s font size is 12px and the
element’s font size is 50%, then the rendered font will be 6px.
Whenever a percentage value is required, what it is a percent-
age of will be indicated. For example:
<percentage-parents-font-size>.
<url>  A URL can either be a relative path or an absolute
URL. If in doubt, use the absolute URL for a resource. Be care-
ful, though, as this can cause trouble if you move the site to
another location.

125
CSS G RAM MA R
VOC ABU LA RY

Fonts
Font properties apply directly to individual letter forms to change
their nature and shape. These styles are generally associated with a
unique version of the font within the same font family, or require
that the computer create a faux version of the font on the fly. For
example, italics are associated with a specific version of the font
that has been created in the italic style—typically slanted and
made to look more hand-written than the default style. However,
if no such independent version of the font exists on the end user’s
computer, the browser will synthesize an italics version by slant-
ing the default version by 15 degrees. Browser-synthesized fonts
are not as readable or attractive as those created by a typographer,
so it’s best to use only styles with a true version of the font available.
font  The shorthand property that lets you set all of the font
properties listed below at the same time, as well as line height.
Values: inherit | <font-style> <font-variant> <font-weight>
<font-size>/<line-height> <font-family>

126
 weight variant line height

font : bold italic small-caps 3em/1.5em times,serif;

style size family

WELCOME

127
CSS G RAM MA R
VOC ABU LA RY

Fonts continued
font-family  Sets a specific font family by name or a generic font
family of serif, sans-serif, monospace, handwritten, or fantasy.
Font names with two or more words must be in quotes (for
example, "lucida sans"). Generic values will use a font defined
by the browser for that style.
Values: inherit | <font-name> | serif | sans-serif | cursive
| fantasy | monospace
Multiple Values: Include as many font-names as desired,
separated by commas. The browser will try each font in
sequence until it finds one it can use.
font-weight  The boldness of the font, generally a thicker ver-
sion of the default. If a bold version of the font does not exist,
the browser will simulate one based on the default pattern.
Values: normal | bold | bolder | lighter | inherit
font-variant  Sets the small-cap style, where all letters are capi-
tals, but capitalized letters are slightly larger.
Values: normal | small-caps | inherit
font-style  Sets whether a font is italic or oblique. Most brows-
ers will treat both values as italic if a true italic version of the
font exists. If an italic version does not exist, the browser syn-
thesizes an oblique version of the font by slanting the default
version of the font to the right by 15 degrees.
Values: normal | italic | oblique | inherit
font-size  Sets an absolute-size, length, relative-size, or percent-
age based on the size of the font of the parent element.
Values: <length> | <percentage-parents-font-size> | smaller
| larger | xx-small | x-small | small | medium | large | x-large
| xx-large | inherit

128
font-family: garamond, georgia, serif;
Garamond, Georgia, Serif

font-weight: bold;
Bold

font-style: italic;
Italic

font-variant: small-caps;
SMALL CAPS

font-size: 12px;
6px 12px 18px 24px

129
CSS G RAM MA R
VOC ABU LA RY

Text
Text styles are properties applied to an entire block of text within
an element, but that do not affect the individual letters them-
selves. This includes text spacing properties such as letter, word,
and line spacing, as well as text alignment, indents, underlining,
overline, strike-through effects, and text capitalization.
color  Sets the text color.
Values: <color> | inherit
letter-spacing  Places an exact amount of space between each
letter in a block of text to control the letter tracking. This is
not to be confused with kerning , which uses data from the
font to adjust spacing between letters based on pairing context.
Letter spacing is a crude way to adjust spacing between letters,
since it does not take into account the visual appearance of the
letters. It is best reserved for large text such as headlines.
Values: <length> | <percentage-font-size>% | inherit
word-spacing  Places an exact amount of space between each
word in a block of text. Like letter spacing, this is a rough way
to adjust spacing and is best used with large text.
Values: normal | <length> | inherit
line-height  Controls the spacing between lines in a block
of text. Adjusting line height to at least 1.5 (=150%) or
higher is generally recommended to make large blocks of
text more readable.
Values: normal | <number> | <length>
| <percentage-font-size>% | inherit
white-space  By default, Web browsers collapse multiple spaces
in HTML code into a single space in the Web page and will
automatically wrap text rather than allowing a horizontal scroll.
White space allows you to override both of these defaults to
preserve all white space or prevent text from wrapping.
Values: normal | pre | nowrap | pre-wrap | pre-line | inherit

130
 color: rgb(128,0,0);
text is maroon

letter-spacing: .1em;
letters are spaced apart

word-spacing: 40px;
words are spaced apart

line-height: 2;
One thing was certain, that One thing was certain, that One thing was certain, that
the white kitten had had the white kitten had had the white kitten had had
nothing to do with it: -- it
was the black kitten's fault nothing to do with it: -- it nothing to do with it: -- it
entirely. was the black kitten's fault
was the black kitten's fault
entirely.
entirely.

1 1.5 2

white-space: pre;
multiple spaces are not collapsed

131
CSS G RAM MA R
VOC ABU LA RY

Text continued
text-align  Sets the justification of text to left, right, center, or
full justification of the left and right edges.
Values: left | center | right | justify | inherit
vertical-align  Sets the vertical positioning of a block of text
in relation to adjacent elements in the same line. Although
seemingly useful for aligning elements, experience shows it
does not behave as designers would expect, since it only works
on inline elements and can not be used to vertically align
blocks of text. The most common use is for super-scripting
and sub-scripting text.
Values: baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <percentage-line-height>% | <length> | inherit
text-indent  Sets an indent for the first line in a block of text.
Values: <length> | <percentage-width>% | inherit
text-decoration  Sets a line to be placed over, under, or through
the text in an element. The style of the line cannot be con-
trolled and will be the same color as the text.
Values: none | line-through | underline | overline | blink | inherit
text-transform  Sets the capitalization of letters in a block of
text, regardless of the state of the originating text.
Values: lowercase | capitalize | uppercase | none | inherit

132
 text-align: center;
One thing was certain, that One thing was certain, that One thing was certain, that One thing was certain, that
the white kitten had had the white kitten had had the white kitten had had the white kitten had had
nothing to do with it: -- it nothing to do with it: -- it nothing to do with it: -- it nothing to do with it: -- it
was the black kitten's fault was the black kitten's fault was the black kitten's fault was the black kitten's fault
entirely. entirely. entirely. entirely.

Left Center Right Justified

vertical-align: sub;
super
X X sub

text-indent: 1em;
One thing was
certain, that the white
kitten had had nothing to
do with it: -- it was the black
kitten's fault entirely.

text-decoration: strike-through;
One thing was certain, that One thing was certain, that One thing was certain, that
the white kitten had had the white kitten had had the white kitten had had
nothing to do with it: -- it nothing to do with it: -- it nothing to do with it: -- it
was the black kitten's fault was the black kitten's fault was the black kitten's fault
entirely. entirely. entirely.

Line-through Underline Overline

text-transform: uppercase;
text case Text Case TEXT CASE
Lowercase Capitalize Uppercase

133
CSS G RAM MA R
VOC ABU LA RY

Background
All elements have a background that fills the area of its element
box behind any content and padding, up to its border (see the
next section for details on the element box). The background can
be a solid color or an image that can be tiled, with its starting
point positioned horizontally and vertically within the box.
background  The shorthand property that lets you set all of the
background properties listed below at the same time.
Values: <background-color> <background-image>
<background-repeat> <background-attachment>
<background-position> | none
background-color  Sets the color to fill the area of an element
behind the content up to its border. Any area of the back-
ground not covered by a background image will fill with the
background color.
Values: <color> | transparent | inherit
background-image  Sets an image to appear behind the ele-
ment’s content and padding. You can use PNG (8, 24, or 32),
JPEG, or GIF image formats.
Values: url(<url>) | none
background-attachment  Controls whether an image will scroll
with the content of the element or stay fixed behind it.
Values: scroll | fixed | inherit

134
 color repeat position

background: red url(bg-01.png) repeat scroll top 0;

image attachment

background-color: rgb(126,0,68);

background-image: url(bg-01.png);

background-attachment: fixed;
had grown in the last few had grown in the last few
'Here!' cried Alice, quite minutes, and she jumped minutes, and she jumped
forgetting in the flurry of up in such a hurry that she up in such a hurry that she
the moment how large she tipped over the jury-box tipped over the jury-box
had grown in the last few with the edge of her skirt, with the edge of her skirt,
minutes, and she jumped upsetting all the jurymen on upsetting all the jurymen on
up in such a hurry that she to the to the
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the

Scroll Fixed

135
CSS G RAM MA R
VOC ABU LA RY

Background continued

Image Repeat
For ideas on using Background image tiling is how a lot of visual design is accom-
backgrounds in lay-
plished, so it’s important to understand how the different tiling
out, see Chapter 8,
“Layout.”
methods work and what they are for.
background-repeat  Controls whether or how the background
image repeats (or not). You can set the background to tile, tile
horizontally, tile vertically, or just appear once.
Values: repeat | repeat-x | repeat-y | no-repeat | inherit
repeat  Tiles the background image in the box horizontally and
vertically to fill the entire area. Repeat is most often used for
textured backgrounds.
no-repeat  The background image appears once and does not
tile. Any area not covered by the background image is filled
with the background color. No-repeat works well for water-
marks and graphic bullets.
repeat-x  The background image tiles horizontally across the
element. Any area below the tiling background is filled with
the background color. Repeat-x is often used to create header
designs by repeating a pattern or gradient across the top of an
element.
repeat-y  The background image tiles vertically in the element.
Any area of the box to the right of the tiling background is
filled with the background color. Repeat-y is useful for creating
column boundaries.

136
 background-repeat: repeat;

background-repeat if position is set to 0,0

repeat no-repeat

repeat-x repeat-y

137
CSS G RAM MA R
VOC ABU LA RY

Background continued

Image Position
By default, all backgrounds are positioned in the top left corner
of the element they are in, but you can offset that position in a
number of different ways. Background positions can be set using
one value or two values to set its horizontal and vertical positions.
background-position  Uses one or two values separated by a
space for the distance from the top or left side of the element
to specify where the background will start to appear.
Values: <length> | <percentage-box-width+padding>% | top
| bottom | center | left | right | center | inherit
Multiple Values: One value for both top and left position,
two values separated by a space for top and left respectively.
<length>  Places the background a specified distance from
either the top and/or left side of the element. For example, 0 0
is the top left corner. 10px 15px pushes the background start-
ing point down 10px and over to the right by 15px.
<percentage-box-width+padding>  Places the background a dis-
tance from the top and/or left side of the element, calculated as
a percentage of the width or height of the element. For exam-
ple, if the box was 10px by 20 px, and the background position
is set to 25%, the background would be pushed down 5px and
over to the right by 3px (rounding up from 2.5).
top  Places the top of the background image against the top of
the element.
bottom  Places the bottom of the background image against the
bottom of the element.
left  Places the left side of the background image against the left
side of the element.
right  Places the right side of the background image against the
right side of the element.
center  Places the top and/or left corner of the background
image in the center of the element.

138
 background-position: 0 0;

position if background-repeat is set to repeat

00 bottom 25px

25px right center center

139
CSS G RAM MA R
VOC ABU LA RY

Box
All elements are rectangular in shape—a box. Every time you add
an HTML tag to create an element, you are creating an element
box. All element boxes have a top, right, bottom, and left side
that you can style, setting the margin, padding, border, width,
and height, as well as the visibility and float.

Boxes can be set to automatically position themselves in context

to surrounding boxes in one of two ways:

Inline boxes flow side-by-side horizontally, from left to right,

with their left and right sides butting against each other, unless
separated by a margin. Inline boxes will flow until they reach the
right edge of the element and then will have a soft-return to the
next line. Boxes that cannot break, such as images, will go off the
right side and either be hidden or require a horizontal scroll.

Block boxes stack on top of each other vertically, with a hard

return above and below the box, with bottom and top sides butt-
ing against each other, unless separated by a margin. Block boxes
will continue down the page, requiring a vertical scroll if the
height of the box does not allow all content to be shown.

140
 Margin
g Border Padding Content

Top
p

Lorem ipsum dolor sit amet, consec

consectetur adipisicing
ng
elit, sed do eiusmod tempor incididunt ut labore ett
dolore magna aliqua. Ut enim ad minim veniam, quis
Left nostrud exercitation ullamco laboris nisi ut aliquip ex Right
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu.

Bottom

Element Box

141
CSS G RAM MA R
VOC ABU LA RY

Box continued

Display
All elements will have a default display type, which you can
override using the display property that tells the element how to
behave in relation to the elements around it.
display  Sets whether the element’s box will be inline, block, a
list item, or whether it appears at all. A value of none removes
the element from the page completely so that a dynamic action
can show it at the right time.
Values: inline | block | list-item | none | inherit
inline  Element boxes flow horizontally next to each other
from left to right.
block  Element boxes flow vertically, stacking on top of each
other from top to bottom.
list-item  Element boxes flow vertically, stacking on top of each
other from top to bottom, like block, but with a list-marker
and indented lines of text.
none  The element is completely removed from the document.
inherit  Uses the display style of the parent element.

Coming Soon: Inline-block

Although it’s not ready for prime time yet (not

even as a design enhancement) because it

is not supported by IE6, another display type

you may see in the future is inline-block, which

allows you to insert a block element within an

inline element. The effect is that the inline block

element expands the line height of the line it

is on to fit.

142
 <span id="e1">Element 1</span>
<span id="e2">Element 2</span>
<span id="e3">Element 3</span>

#e1, #e2, #e3 { display: block; }

Element 1

Element 2

Element 3

Block

#e1, #e2, #e3 { display: inline; }

Element 1 Element 2 Element 3

Inline

#e1, #e3 { display: block; } Element 1

#e2 { display: none; }
Element 3

None

143
CSS G RAM MA R
VOC ABU LA RY

Box continued

Visibility
One way to hide an element is to set the display property to none
and completely remove it from the document. If you want the
element to remain in the document but be invisible, you have
other options:
visibility  Sets whether the box is visible or invisible. A hidden
element will still take up space but will appear to be empty, like
the invisible man in a rain storm.
Values: visible | hidden | inherit
opacity  Sets the opacity of a box on a scale from 0.0 (clear) to
1.0 (opaque). This value affects the opacity of the element and
all of its content and cannot be overridden by child elements.
Opacity does not currently work in IE.
Values: <0.0-1.0> | inherit
filter: alpha(<0-100>)  Sets the opacity of a box in IE on a
scale from 0 (clear) to 100 (opaque). This is not a true CSS
property, but it can be added to any CSS rule. If you set both
the filter: alpha and the opacity, you can be sure you have the
same value set for all browsers, including IE.

144
 <span id="e1">Element 1</span>
<span id="e2">Element 2</span>
<span id="e3">Element 3</span>

#e1, #e3 { display: block; } Element 1

#e2 { visibility: hidden; }

Element 3

  
#e1 { opacity: 1;
Element 1
filter: alpha(100); }
#e2 { opacity: .5; Element 2
filter: alpha(50); }
#e3 { opacity: .25; Element 3
filter: alpha(25); }

145
CSS G RAM MA R
VOC ABU LA RY

Box continued

Float
The float property A floating element is one whose box aligns itself to the left or
has become crucial right. Surrounding content then wraps around it. This is often
to multi-column Web
used to float images with or without captions, but can also be
layouts, as explained
in Chapter 8, “Layout.” used for sidebars, pull quotes, or any other elements with a close
association with the main text.
float  Positions the box to the left or right within its parent
element. Any content below the element will wrap around it
in moving up into the available space. If multiple elements are
floated next to each other, then they will line up horizontally
as space allows.
Values: left | right | none | inherit
clear  When applied to an element that has been placed below
a floating element, floating stops, with the cleared element
again appearing beneath the floating element. Floating can be
specifically cleared on the left, right, or completely cleared on
both sides.
Values: none | left | right | both | inherit

146
 <p id="e1">Element 1</p>
<p id="e2">One thing was…</p>
<p id="e3">The way Dinah…</p>

#e1{ One thing was certain, that

the white kitten had had
width: 75px; nothing to do with it: -- it was
the black kitten's fault

height: 150px; entirely. For the white kitten

had been having its face
washed by the old cat for the
float: right; } last quarter of an hour (and
Element 1
bearing it pretty well,
considering); so you see that
it couldn't have had any hand
in the mischief.
The way Dinah washed her
children's faces was this: first
she held the poor thing down
by its ear with one paw, and…

  
#e1{ One thing was certain, that
the white kitten had had
width: 75px; nothing to do with it: -- it was
the black kitten's fault

height: 150px; entirely. For the white kitten

had been having its face
washed by the old cat for the
float: right; } last quarter of an hour (and
Element 1
bearing it pretty well,
#e3{ clear: right; } considering); so you see that
it couldn't have had any hand
in the mischief.

The way Dinah washed her children's faces was this:

first she held the poor thing down by its ear with one
paw, and…

147
CSS G RAM MA R
VOC ABU LA RY

Box continued

Width and Height

Width and height properties allow you to specify the dimen-
sions of the content area of the box. Padding and border are then
added to this to create the apparent width and height of the box,
which is how much space it will take up in the design.
width  Sets the horizontal length of the content area of the box.
Values: <length> | <percentage-parent-width>% | auto | inherit
height  Sets the vertical length of the content area of the box.
Values: <length> | <percentage-parent-height> | auto | inherit
overflow  Specifies how to treat excess content if the specified
area for the box is not large enough to accommodate it. You
can choose to hide the excess content, show the content, thus
overriding the height value, force a scroll, or allow the browser
to determine whether a scroll is needed or not (auto).
Values: hidden | visible | scroll | auto | inherit

148
 width: 225px;
height: 150px;
overflow: hidden;

Width = 225px

One thing was certain, that

the white kitten had had
nothing to do with it: -- it was
the black kitten's fault
Height = 150px

entirely. For the white kitten

had been having its face
washed by the old cat for the
last quarter of an hour (and
bearing it pretty well,
considering); so you see that
it couldn't have had any
The White Kitten
hand in the mischief.
The way Dinah washed her children's faces was this: first
she held the poor thing down by its ear with one paw, and
then with the other paw she rubbed its face all over, the
wrong way, beginning at the nose: and just now, as I said,
she was hard at work on Overflow
the white kitten, which was lying
quite still and trying to purr -- no doubt feeling that it was
all meant for its good.

149
CSS G RAM MA R
VOC ABU LA RY

Box continued
Maximum and Minimum
Width and Height
One of the key differences between designing for the Web and
designing for other media, such as print or TV, is that the user
controls the size of the browser viewport—the area in which your
designs are viewed in—and can change the width and height at
will. Instead of setting an absolute width and height, you also
have the option of setting a width and height range to allow the
content to stretch to fit the viewport area, while still not allowing
it to shrink or grow to uncomfortable dimensions.

It is important to note that these properties do not work in IE6,

so an absolute width and height should be set first to accommo-
date that browser.
max-width, max-height  Sets the maximum width or height
of an element. The element will grow to that size if the area is
available, but no further.
Values: <length> | <percentage-parent-width/height> | auto
| inherit
min-width, min-height  Sets the minimum width or height of
an element. The element will shrink to that size when the area
is limited, but no further.
Values: <length> | <percentage-parent-width/height> | auto
| inherit

150
 max-width: 225px;
min-width: 150px;

max-height: 190px;
min-height: 150px;
Max-width = 225px

One thing was certain, that

the white kitten had had
nothing to do with it: -- it was
the black kitten's fault

Min-height = 150px
entirely. For the white kitten
had been having its face
Max-height = 190px

washed by the old cat for the

last quarter of an hour (and
Stretch

bearing it pretty well,

considering); so you see that
it couldn't have had any
The
he White Kitten
hand in the mischief.
The way Dinah washed her children's faces was this: first
she held the poor thing down by its earr with one paw, and
then with the other paw she rubbed it its
ts face all over,
over the
wrong way, beginning at the nose: and just now, as I said,
she was hard at work onStretch
the white kitt
kitten,
ten, which was lying
quite still and trying to purr -- no doubtt feeling that it was
all meant for its good.

Min-width = 150px

151
CSS G RAM MA R
VOC ABU LA RY

Box continued

Border
An element’s border is the rule around its box on the top, right,
bottom, and left. A border can have any thickness and color, and
you can select from a limited number of styles. Set the border on
all four sides to be the same, or set each side individually.
border  The shorthand property for setting all of the border
properties for the box in one line, with values separated by a
space. All three values must be declared in order for the border
to appear.
Values: <border-width> <border-color> <border-style>
border-width  Sets the thickness of the border.
Values: <length> | thin | medium | thick | inherit
Multiple Values: One value for all four sides, two values
separated by a space for top/bottom and left/right, or four
values separated by spaces for top, right, bottom, and left, in
that order.
border-color  Sets the hue of the border.
Values: <color> | transparent | inherit
Multiple Values: Same as border-width.
border-style  Sets one of the predefined border patterns.
Values: none | dotted | dashed | solid | double | groove | ridge
| inset | outset | inherit
Multiple Values: Same as border-width.
border-top, border-right, border-bottom, border-left  The short-
hand properties for setting the border properties on the indi-
cated side of the box.
Values: <border-width> <border-color> <border-style>
border-width-top, border-width-right, border-width-bottom, bor-
der-width-left, border-style-top, border-style-right, border-style-
bottom, border-style-left, border-color-top, border-color-right,
border-color-bottom, border-color-left  Sets the indicated
property for the indicated side of the box.
Values: Varies depending on property.

152
 border: 5px solid rgb(67,0,37);

Top = 5px solid rgb(67,0,37)

One thing was certain, that

the white kitten had had
nothing to do with it: -- it was

Right = 5px solid rgb(67,0,37)

Left = 5px solid rgb(67,0,37)

the black kitten's fault

entirely. For the white kitten
had been having its face
washed by the old cat for the
last quarter of an hour (and
bearing it pretty well,
considering); so you see that
it couldn't have had any
The White Kitten
hand in the mischief.
The way Dinah washed her children's faces was this: first
she held the poor thing down by its ear with one paw, and
then with the other paw she rubbed its face all over, the
wrong way, beginning at the nose: and just now, as I said,
she was hard at work on the white kitten, which was lying
quite still and trying to purr -- no doubt feeling that it was
all meant for its good.

Bottom = 5px solid rgb(67,0,37)

153
CSS G RAM MA R
VOC ABU LA RY

Box continued

Padding
Padding is the space between the content of the element’s box
and the border. Padding is easily confused with the margin, espe-
cially if there is no visible border. Padding, however, is intended
to separate the content of the box from its edges, whereas the
margin is meant to separate the element from other elements on
the screen.
padding  The shorthand property for setting the padding on all
four sides of the box simultaneously.
Values: <length> | <percentage-box-width>% | inherit
Multiple Values: One value for all four sides, two values
separated by a space for top/bottom and left/right, or four
values separated by spaces for top, right, bottom, and left, in
that order.
padding-top  Sets the space between the content and the top of
the box.
Values: <length> | <percentage-box-width>% | inherit
padding-right  Sets the space between the content and the right
side of the box.
Values: <length> | <percentage-box-width>% | inherit
padding-bottom  Sets the space between the content and the
bottom of the box.
Values: <length> | <percentage-box-width>% | inherit
padding-left  Sets the space between the content and the left
side of the box.
Values: <length> | <percentage-box-width>% | inherit

154
 padding: 35px 30px;

Top = 35px
One thing was certain, that
the white kitten had had
nothing to do with it: -- it was
the black kitten's fault
entirely. For the white kitten
had been having its face
washed by the old cat for the

Right = 30px
Left = 30px

last quarter of an hour (and

bearing it pretty well,
considering); so you see that
it couldn't have had any
The White Kitten
hand in the mischief.
The way Dinah washed her children's faces was this: first
she held the poor thing down by its ear with one paw, and
then with the other paw she rubbed its face all over, the
wrong way, beginning at the nose: and just now, as I said,
she was hard at work on the white kitten, which was lying
quite still and trying to purr -- no doubt feeling that it was
all meant for its good.

Bottom = 35px

155
CSS G RAM MA R
VOC ABU LA RY

Box continued

Margin
The margin is the space between the border of an element and
all other elements on the page. As mentioned, in the absence of
a border or background, margin and padding will appear to be
identical, but it is important to remember that they are different
values. Margin should be used to adjust an element’s position
in relationship to other elements on the page, while padding
should be used to keep content from bumping up against the
edge of the box.
margin  The shorthand property setting the margin on all four
sides of the box simultaneously.
Values: <length> | <percentage-box-width>% | inherit
Multiple Values: One value for all four sides, two values
separated by a space for top/bottom and left/right, or four
values separated by spaces for top, right, bottom, and left in
that order.
margin-top  Sets the space between the top of the box and the
bottom of other elements.
Values: <length> | <percentage-box-width>% | inherit
margin-right  Sets the space between the right edge of the box
and the left edge of other elements.
Values: <length> | <percentage-box-width>% | inherit
margin-bottom  Sets the space between the bottom of the box
and the top of other elements.
Values: <length> | <percentage-box-width>% | inherit
margin-left  Sets the space between the left edge of the box and
the right edge of other elements.
Values: <length> | <percentage-box-width>% | inherit

156
 margin: 15px 20px 35px 25px;

Top = 15px

One thing was certain, that

the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely. For the white kitten
had been having its face

Right = 20px
washed by the old cat for
Left = 25px

the last quarter of an hour

(and bearing it pretty well,
considering); so you see
that it couldn't have had any
The White Kitten
hand in the mischief.
The way Dinah washed her children's faces was this:
first she held the poor thing down by its ear with one
paw, and then with the other paw she rubbed its face
all over, the wrong way, beginning at the nose: and just
now, as I said, she was hard at work on the white
kitten, which was lying quite still and trying to purr -- no
doubt feeling that it was all meant for its good.

Bottom = 35px

157
CSS G RAM MA R
VOC ABU LA RY

Box continued

Fixing IE
The CSS box model describes how an element should behave in
your designs: The width and height are applied to the content
area of the box, while padding and border lengths are added to
get the apparent width and height, sometimes called the rendered
width and height. At least, this is how the W3C CSS Work
Group specified that the standard for the box model should work.
Unfortunately, the folks who made IE6 didn’t get the memo in
time. They decided that width and height applied to the entire
box, including the margin and padding.

You are OK as long as you do not set the width/height with pad-
ding and a border. But, as soon as you add padding and borders,
in IE6 your designs will look different from standards-compliant
browsers, even IE7.

Fortunately for us, the makers of IE6 missed another memo.

When a declaration in a CSS rule has an underscore (_) in front
of it, ignore the declaration. The upshot is that we can set a differ-
ent width and/or height that only IE6 will see as long as we put
an underscore at the beginning.

Known as the “underscore hack,” this technique can be used any-

time you need to provide a different value for IE6.

158
width: 225px; Width = 225px +
padding: 10px; Left/Right Padding = 20px +
border-width: 2px; Left/Right Border = 4px
Apparent Width = 249px

Width = 225px Width = 225px

One thing was certain, that

the white kitten had had
One thing was certain, that nothing to do with it: -- it
the white kitten had had was the black kitten's fault
entirely. For the white kitten
nothing to do with it: -- it had been having its face
was the black kitten's fault washed by the old cat for
entirely. For the white kitten the last quarter of an hour
(and bearing it pretty well,
had been having its face considering); so you see
washed by the old cat for that it couldn't have had any
The White Kitten
the last quarter of an hour hand in the mischief.
(and bearing it pretty well, The way Dinah washed her children's faces was this:
first she held the poor thing down by its ear with one
considering); so you see paw, and then with the other paw she rubbed its face
that it couldn't have had any all over, the wrong way, beginning at the nose: and just
The White Kitten
hand in the mischief. now, as I said, she was hard at work on the white
kitten, which was lying quite still and trying to purr -- no
The way Dinah washed her children's faces was this: doubt feeling that it was all meant for its good.
first she held the poor thing down by its ear with one
paw, and then with the other paw she rubbed its face
all over, the wrong way, beginning at the nose: and just
now, as I said, she was hard at work on the white
kitten, which was lying quite still and trying to purr -- no
doubt feeling that it was all meant for its good.

Apparent = 249px

_width: 249px;
Underscore 6

Width = 225px Width = 249px

One thing was certain, that One thing was certain, that
the white kitten had had the white kitten had had
nothing to do with it: -- it nothing to do with it: -- it
was the black kitten's fault was the black kitten's fault
entirely. For the white kitten entirely. For the white kitten
had been having its face had been having its face
washed by the old cat for washed by the old cat for
the last quarter of an hour the last quarter of an hour
(and bearing it pretty well, (and bearing it pretty well,
considering); so you see considering); so you see
that it couldn't have had any that it couldn't have had any
The White Kitten The White Kitten
hand in the mischief. hand in the mischief.
The way Dinah washed her children's faces was this: The way Dinah washed her children's faces was this:
first she held the poor thing down by its ear with one first she held the poor thing down by its ear with one
paw, and then with the other paw she rubbed its face paw, and then with the other paw she rubbed its face
all over, the wrong way, beginning at the nose: and just all over, the wrong way, beginning at the nose: and just
now, as I said, she was hard at work on the white now, as I said, she was hard at work on the white
kitten, which was lying quite still and trying to purr -- no kitten, which was lying quite still and trying to purr -- no
doubt feeling that it was all meant for its good. doubt feeling that it was all meant for its good.

159
CSS G RAM MA R
VOC ABU LA RY

Position
All element boxes can be positioned on the screen, either rela-
tive to their natural position (where they would appear if left
untouched) or absolute distance from the edge of its most imme-
diate parent element with positioning set. To set the position of
the box on the screen, you need to set both its position type and
then its actual position.

Position Type
Think of setting the position type as turning on positioning.
Until this is set, all elements have a “natural” position, which
is where the element would appear if left untouched by position-
ing. To turn on positioning, you define how you want the ele-
ment placed.
position  Defines the positioning type that the element’s box
will use.
Values: static | relative | absolute | fixed | inherit
static  The element’s box cannot be repositioned from its natu-
Fixed elements are ral position.
a great way to cre-
ate headers, footers,
relative  The element’s box is positioned from where it would
and menus that stay
have natural position in the design.
on the screen at all absolute  The element’s box is positioned relative to the imme-
times. Unfortunately, diate parent with a position type set.
fixed does not work in
IE6. The good news is
fixed  The element’s box is positioned relative to the browser
that you can use the
window, and the element does not scroll with the rest of the
box model (shown in
page. Instead it stays fixed in its position.
Appendix C, “Fixing inherit  The box inherits the position type from its most imme-
IE6”) to set the posi- diate parent with a position type set.
tion to absolute for
that browser.

160
 <span id="e1">1</span>
<span id="e2">2</span>
<span id="e3">3</span>

#e2{ position: relative; }

placement if top is set to 30px and left to 50px

1 2 3 1 30px 3

50px 2

static relative

30px 30px

50px 2 50px 2

1 3
1 3

absolute fixed

161
CSS G RAM MA R
VOC ABU LA RY

Position continued

Setting the 2-D Position

Setting the position type does not change an element’s position.
It merely prepares the element for one of the positioning proper-
ties to be applied to it.
top  Moves the element down from its normal position (rela-
tive) or from the top edge of its parent element (absolute), or
top of the Web page (fixed).
Values: auto | <length> | <percentage-parents-height>%
| inherit
right  Moves the element to the left from its normal position
(relative) or from the right edge of its parent element (abso-
lute), or right edge of the Web page (fixed).
Values: auto | <length> | <percentage-parents-width> %
| inherit
bottom  Moves the element up from its normal position (rela-
tive) or from the bottom edge of its parent element (absolute),
or bottom of the Web page (fixed).
Values: auto | <length> | <percentage-parents-height>%
| inherit
left  Moves the element to the right from its normal position
(relative) or from the left edge of its parent element (absolute),
or left of the Web page (fixed).
Values: auto | <length> | <percentage-parents-width>% |
inherit

162
 <span id="e2">Element</span>

#e2{ top: 25px; }

placement if position is set to absolute

25px Element 25px

Element

top: 25px right: 25px

25px Element

Element

25px

bottom: 25px left: 25px

163
CSS G RAM MA R
VOC ABU LA RY

Position continued

Setting the 3-D Position

Once you start moving elements around, you may start stacking
them in the Web page—one element appearing over top of or
underneath another. By default the “natural” stacking order for
elements (or z-index) is based on the order their code appears in
the HTML. The first element has a z-index of 0 and its subse-
quent siblings increase their z-index by 1 (1, 2, 3, 4…) with higher
numbers appearing above lower numbers. You can disrupt this
natural order by changing the element’s z-index property.
z-index  Sets the 3-D position of the box. Since positioned ele-
ments can overlap one another, z-index allows you to re-stack
them as desired within their parent element by setting the level
number to the level you want the element to appear. Higher
numbers appear higher in the stack.
Values: auto | <number> | inherit

164
 <span id="e1">1</span>
<span id="e2">2</span>
<span id="e3">3</span>

#e1{ z-index: 1; }

if positioned

1
1
3
2 3
2

Natural z-index: 2

1 1
3 3
2 2

z-index: 3 z-index: 0

165
CSS G RAM MA R
VOC ABU LA RY

Tables
Tables are used to present data. Any of the font, text, background,
and box properties already mentioned can be applied to them.
Tables have a few special styles, however, that can only be applied
to the various table tags:
border-spacing: Sets the space between table data cells.
Values: <length> | inherit
Multiple Values: One value for all four sides, or two values
separated by a space to set the top/bottom and left/right spac-
ing separately.
border-collapse: Sets how borders between separate table data cells
are treated. Use collapse to have borders between table data cells
shared. Use separate to treat each table data cell as having inde-
pendent borders.
Values: collapse | separate | inherit
caption-side: Sets where a table caption appears, either above or
below the table. Caption side does not work in IE6 or IE7,
but will work in IE8, so you should consider this a design
enhancement.
Values: top | bottom | inherit

166
 border-spacing: 6px 2px;

border-collapse: collapse;

collapse sepDrate

caption-side: top;
top

bottom

167
CSS G RAM MA R
VOC ABU LA RY

Lists
Lists are used for a variety of purposes in Web design, not the
least of which is to actually create an ordered (<ol>) or unor-
dered (<ul>) list of items. In addition, lists are often used to help
organize links and menus, even if the actual list markers (bullets,
letters, or numbers) are removed.

Although associated with particular HTML tags, any HTML tag

can be used to create a list using these styles.
list-style  The shorthand property that lets you set all of the list
properties listed below at the same time.
Values: inherit | <list-style-type> <list-style-image>
<list-style-position>
list-style-type  Sets the marker style for the list.
Values: disc | circle | square | decimal | decimal-leading-zero |
upper-roman | lower-roman | upper-alpha | lower-alpha
| lower-greek | none | inherit
Learn about using list-style-image  Sets an image file to be used as a marker. You
CSS sprites in Chapter can use PNG (8, 24, or 32), JPEG, or GIF image formats. This
10, “Navigation.” property is used much less than you might think. Most design-
ers add graphic bullets to a list using the background-image
property instead, using a technique called CSS sprites, which
provides greater versatility.
Values: url( <url>) | none | inherit
list-style-position  Sets whether a list item’s subsequent lines of
text are indented (outside) or justified (inside).
Values: inside | outside | inherit

168
 type position

list-style: disc url(bullet-01.png)outside;

image

list-style-type: square;
• Disc A Upper-Alpha 1 Decimal
 Circle 01 Decimal-Leading-Zero
a Lower-Roman

Square I Upper-Roman
α Lower-Greek
i Lower-Roman

list-style-image: url(bullet-01.png);


  





list-style-position: inside;
• One thing was certain, • One thing was certain,
that the white kitten that the white kitten
• had had nothing to do • had had nothing to do
with it with it
• it was the black • it was the black
kitten's fault entirely kitten's fault entirely

Inside Outside

169
CSS G RAM MA R
VOC ABU LA RY

Cursor
The dynamic pseudo- The mouse pointer provides visual feedback to the user when
classes are explained they interact with a given element. The cursor will automatically
in Chapter 4, “Syntax,”
change for some elements such as links and form elements, but
in the section “Styles
for Special Cases.” you can control how the cursor appears over any element using
the dynamic pseudo-classes :hover, :active, and :focus.
cursor  Sets the appearance of a cursor. You can choose from
the predefined list of cursors or specify a URL to load a PNG
(8, 24, or 32), JPEG, or GIF image as your cursor.
Values: default | url(<url>) | auto | crosshair | pointer | move
| e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize
| s-resize | w-resize | text | wait | help | progress | inherit

170
 cursor: move;

default

crosshair n-resize

pointer e-resize

move s-resize

text w-resize

wait ne-resize

help nw-resize

progress se-resize

sw-resize

Exact icon appearance varies by browser and OS

171
CSS G RAM MA R
VOC ABU LA RY

Design Enhancements
There are a few properties on the cutting edge of CSS design that
haven’t been officially set as standards. While they may not be
ready for prime time quite yet, because they may not be univer-
sally implemented, you can still use them to enhance your designs
for those browsers that do use them.

Design enhancements should never be critical to your design or

site functionality. Whether they work or not in a given browser
should not prevent the visitor from using the site. The site just
may not look quite as slick. In addition to the values, I’m listing
which browsers each style works with. Keep in mind, though,
that new versions are always coming out, so check out the
Speaking In Styles Web site (www.speaking-in-styles.com) for up-
to-date information.

Shadows
text-shadow  Sets a drop shadow for text in an element. You can
control the color, offset, and the amount of blur to get differ-
ent shadow effects.
Browsers: Sa1.1
Values: <color> <length-x-offset> <length-y-offset>
<length-blur-radius>
box-shadow, -moz-box-shadow, -webkit-box-shadow  Sets a drop
shadow for the box. You can control the color, offset, and
the amount of blur to get different shadow effects. Although
eventually the property will be called box-shadow, Firefox and
Safari have implemented their own version: -moz and -webkit.
Include all three to ensure cross-browser compatibility.
Browsers: Sa3, FF3
Values: <color> <length-x-offset> <length-y-offset>
<length-blur-radius>

172
 text-shadow: rgb(0,0,0) 4px 2px 6px;

Text Shadow

  
box-shadow: rgb(0,0,0) 4px 2px 6px;
-moz-box-shadow: rgb(0,0,0) 4px 2px 6px;
-webkit-box-shadow: rgb(0,0,0) 4px 2px 6px;

173
CSS G RAM MA R
VOC ABU LA RY

Design Enhancements continued

Rounded Corners
Browsers: Sa2, FF1.8

border-radius, -moz-border-radius, -webkit-border-radius  Sets

the roundness of box corners. Although eventually the prop-
erty will be called simply border-radius, Firefox and Safari have
implemented their own version: -moz and -webkit. For now,
include all three to ensure cross-browser compatibility.
Values: <length> | inherit

Outline
Browsers: Sa2, FF1.8, Op9, IE7

The outline property creates a border around the box, similarly to

the border property. Unlike a border, though, an outline cannot
be controlled on a per-side basis and, most importantly, does not
occupy any space. It will simply appear beneath any adjacent ele-
ments without disrupting the layout of the page.
outline  The shorthand property that lets you set all of the out-
line attributes in one line, with values separated by a space.
Values: <outline-width> <outline-color> <outline-style>
outline-width  Sets the thickness of the outline.
Values: <length> | thin | medium | thick | inherit
outline-color  Sets the hue of the outline.
Values: <color> | invert | inherit
outline-style  Sets one of the predefined outline patterns, which
are the same as the border patterns.
Values: none | dotted | dashed | solid | double | groove | ridge
| inset | outset | inherit

174
 border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

  
outline: 10px solid rgb(67,0,37)

Click Me!

175
PART 3
In which the reader learns a tried and true process for Web development

with CSS, how to create the many elements they will need in their designs,

and reviews the best practices when speaking in styles.

179 Des ignin g w it h C SS

209 Layo u t

225 Ty pog r aphy

243 N av iga t io n

257 Chrom e

273 The L as t Wor d

Speaking Like a
Native
My guess is that you already have your own personal or profes-
sional Web design process in place. Whether you are into Agile,
UML, waterfall, or something of your own devising, I’m not here
to upset the apple cart—maybe just add a couple of extra apples
to it. If you are a designer, CSS needs to become a central part of
your Web design process.

Using CSS is likely to change how you approach Web design.

Although you may still create wire frames and comps, you’ll find
yourself making refinements, adjustments, and wholesale changes
in CSS code. You may even find yourself going straight from
hand-drawn sketches to CSS code. You’ll save time and effort,
and, before you know it your Web designs will start to really pop.

CHAPTER 7
Designing with CSS
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

The Process: An Overview

Once upon a time, it was enough for the designer to create a few
visual comps, maybe cut the chrome, and then hand everything
over to a developer. If you followed this process you probably
found that the developer never got things exactly the way you
wanted them: Elements didn’t line up, fonts were wrong, colors
shifted. Never send a developer to do a designer’s job. It doesn’t
matter how great your comps look in Photoshop; what matters is
what the visitor sees in the Web browser. To get things right, it’s
important to become familiar with every aspect of the process,
and be able to step in to guide the final outcome.

01 Plan your site. Before you code, think carefully about what
you are doing, why you are doing it, and how you are doing
it: sketching, wire-framing, mood boards, and visual comps
are the best ways to plan before creating your site with CSS.

02 Build your site. One of the most important differences

between print and Web design is not paper versus screen,
but static versus dynamic. The great advantage of Web
design is that you can make changes at anytime, and with
CSS, you can make those changes extremely quickly.
Prototypes allow you to test ideas in context.

03 Deploy your site. Take your prototype online to test it in

the wild before finally going live with the
hard launch.
voxLibris
04 Iterate the process. Creating a Web
speak in g -i n- s ty l es .c om / b oo k/vox li b r i s
site is an iterative process. You can’t just
I’ll be using the fictitious site voxLibris in the love it and leave it. Never be afraid to go
next several chapters to show the design pro- back to anywhere within the process and
cess. All of the code used to create this page is make changes based on feedback.
listed in Appendix A.

180
 Sketches

Wire
Frames

PLAN

Mood
Boards

Comps Chrome

ITERATE
Style Guide
BUILD

Alpha Prototype

DEPLOY

Beta Launch

181
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Plan
Every project should start with a plan. Whether it’s in your head
or formally spelled out, you need to define what the expectations
are for the project’s success. As the designer, your job is to con-
ceive the successful design solution using a process of discovery
and iteration. As you create your plans in advance of actual cod-
ing, it’s important to keep in mind how you will actually realize
your vision in code.

Sketches
Sketches are not meant to be detailed or complete plans, but to
help you get the rough ideas down and capture notes about the
project and rough dimensions. I like to put information like the
Web site’s purpose, audience, and content, as well as the site’s
message in big letters to remind me what this project is about. In
addition, I’ll quickly throw down different page types, mark stuff
out, redraw them as necessary to experiment, looking for differ-
ent design angles.

There are a lot of different ways to sketch. I carry my Moleskin

graph paper sketchbook everywhere I go, ready to whip out
when inspiration strikes (or when I have a few spare minutes).
If I’m brainstorming with a group, I’ll get pasteboard-size paper
and start sketching while others throw out ideas. I’ve even been
known to do digital sketches in programs like Microsoft Visio
and OmniGraffle, which can then quickly evolve into wire frames.

The most important thing to remember about your sketches is to

keep them fluid. Try as many different design solutions as you can
come up with—never be tied to any one solution.

182
183
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Plan continued

Page Flow
The first question you need to ask yourself when starting your
design is “Will my page be fluid or fixed?” Although fluidity is
generally considered for the width of the design, it can equally
be applied to the height of the design. While most Web designs
are based on a fixed width with a fluid height (that is, it stretches
to the height required to display all of the page content), this is
not your only option:

 Fixed width/fluid height: The page width is constrained,

generally to prevent horizontal scrolling, and the height will
stretch to accommodate the content, requiring a vertical
scroll if it doesn’t fit in the browser window.

 Fluid width/fluid height: The page stretches horizontally

and vertically to use the maximum area available in the
browser window. Content that does not fit in the area of the
open browser window will require a vertical scroll to view.

 Fixed width/fixed height: Both width and height are

constrained. How content that does not fit is treated will
depend on how the overflow attribute for the box is set.
Generally, with this design, content is carefully controlled so
as not to require more space than the available area, or scroll-
ing is controlled on a per module basis.

 Fluid width/fixed height: The page stretches horizontally

to fill the available area and can even cause the page to scroll
horizontally.

184
Fixed Width/Fluid Height Fluid Width/Fluid Height

Fixed Width/Fixed Height Fluid Width/Fixed Height

185
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Plan continued

Wire Frames
Wire frames are your chance to plan the structure of your page
without the distractions of visual design. They serve as the blue-
prints for construction and need to include placement and mea-
surements of elements in pixels. Here are the basic elements you
will need to include:

 Fluid or fixed: Determine whether the layout is fluid or

fixed. Fluid layouts allow visitors to make better use of their
screen real estate, but are generally harder to design to. For
general fixed page widths, I use 980px, which will allow most
visitors to see everything.

 Widths: Widths should be exactly specified in fixed layouts,

but can be exact or variable—generally indicated with an
asterisk (*)—in fluid designs.

 Heights: Heights should generally be variable, unless you

know the element needs a fixed height. In those cases, make
sure to account for how overflow content will be treated.

 Margins: Margins and padding should be indicated, but may

need to be adjusted in the visual comps.

 Scroll lines: Although not as important as it used to be, the

“fold” of the page should be indicated for different moni-
tor resolution heights so that you know roughly where the
page “fold line” will fall. I use heights of 290px , 410px, and
578px.

 Color: Use color only to indicate controls and links.

Generally, I use blue to show actionable items and grayscale
for everything else.

186
 s.1
UI DESIGN SCREEN

voxLIBRIS : Main REFERENCE

NUMBER
Thu Apr 23 2009

220px 470px 200px

2
20px

40px
980px

SEARCH B
A
Header
980px by 100px
150px by 20px
A Header
980px x 100px
Titles

B Book Search
User can input key words to search book text.
E TOP BOOKS 1. Title
2. Author
C T
TEXT BLOCK Genres
enres Book Cover
3. Full Text
150px by 225px
L
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id,
Category Image
100px by 100px
Category Image
100px by 100px
Category Image
100px by 100px
Category Image
100px by 100px
C Welcome and Main Navigation
300px x *
mollis vel, dictum ac, ante. Vestibulum tortorr
dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent F I
mollis, dolor ut elementum lobortis, turpis Top Navigation:
orci vulputate tortor, quis condimentum tortoror
leo non est. Maecenas ac elit. Cras porttitorr
• Genres
Preview Audio
porta magna. Duis ultrices. Suspendisse Category Title Category Title Category Title Category Title • About
potenti. Nam posuere lacus in ligula. Fusce ## Books ## Books ## Books ## Books
vitae ligula. Nam nunc ante, laoreet eget, Download Audio • News
adipiscing sit amet, sollicitudin sed, urna.
• Reviews
Read Text
Genres
• Donate
Category Image Category Image Category Image Category Image • Contact
About
100px by 100px 100px by 100px 100px by 100px 100px by 100px Book Title
News
By Author Name
Reviews
Donate
Contact
D Text Ads
Book Cover
300px x *
150px by 225px
Category Title Category Title Category Title Category Title
290px

## Books ## Books ## Books ## Books 3 text ads provided by Oogle.

E Page Header
470px x *
Category Image Category Image Category Image Category Image
Ad
100px by 100px 100px by 100px 100px by 100px 100px by 100px
Preview Audio

Download Audio
F Genre Button
100px x 140px (with text label)
Read Text
Category Title
## Books
Category Title
## Books
Category Title
## Books
Category Title
## Books
G About
470px x *
D Book Title
By Author Name
410px

H News and Reviews Text Blocks

210px x * each
Book Cover
About G 150px by 225px

I
N
Nulla sed felis. Sed et tellus. Vivamus venenatis suscipit magna. Vestibulum hendrerit iaculiss
Book Cover Links
n
nunc. Morbi posuere tempus elit. Ut commodo mattis nisi. Vivamus elit. Nam nisi felis, egestass
e
et, varius in, suscipit at, risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sedd 150px x 225px
e
eget sapien. Mauris convallis dolor et nisl. Quisque nibh mauris, dictum quis, mollis et,,
e
euismod quis, diam. Sed at purus. Nulla tempus libero non mi. Nulla leo dui, venenatis ut,,
fe
feugiat sit amet, fringilla nec, ligula. Praesent arcu neque, pretium vitae, tincidunt interdum,, Preview Audio
la
laoreet non, felis. J Footer
980px x 20px
Download Audio

News Read Text

H Book Title
By Author Name

TEXT BLOCK TEXT BLOCK

T
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Book Cover
adipiscing elit. Vestibulum commodo metus adipiscing elit. Vestibulum commodo metus 150px by 225px
sit amet libero. Cras nisl neque, lacinia id, sit amet libero. Cras nisl neque, lacinia id,
578px

mollis vel, dictum ac, ante. Vestibulum tortor mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec, dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent justo. Integer dui. Nunc nec velit. Praesent
mollis, dolor ut elementum lobortis, turpis mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor orci vulputate tortor, quis condimentum tortor
leo non est. Maecenas ac elit. Cras porttitor leo non est. Maecenas ac elit. Cras porttitor
porta magna. Duis ultrices. Suspendisse porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce potenti. Nam posuere lacus in ligula. Fusce Preview Audio
vitae ligula. Nam nunc ante, laoreet eget, vitae ligula. Nam nunc ante, laoreet eget,
adipiscing sit amet, sollicitudin sed, urna. adipiscing sit amet, sollicitudin sed, urna.
Download Audio

Read Text

Book Title
Reviews
R By Author Name

Book Cover
150px by 225px
TEXT BLOCK TEXT BLOCK
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id, sit amet libero. Cras nisl neque, lacinia id,
mollis vel, dictum ac, ante. Vestibulum tortor mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec, dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent justo. Integer dui. Nunc nec velit. Praesent Preview Audio
mollis, dolor ut elementum lobortis, turpis mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor orci vulputate tortor, quis condimentum tortor
leo non est. Maecenas ac elit. Cras porttitor leo non est. Maecenas ac elit. Cras porttitor Download Audio
porta magna. Duis ultrices. Suspendisse porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce potenti. Nam posuere lacus in ligula. Fusce Read Text
vitae ligula. Nam nunc ante, laoreet eget, vitae ligula. Nam nunc ante, laoreet eget,
adipiscing sit amet, sollicitudin sed, urna. adipiscing sit amet, sollicitudin sed, urna.
Book Title
By Author Name

Footer 980px by 30px

J

187
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Plan continued

Mood Boards
There are many kinds of mood boards—everything from collages
of seemingly random elements that reflect the desired style to
boards that are on the verge of being a design specification docu-
ment. The style you choose should depend on your own strengths
as well as the needs of your client. If you are a strong visual
designer, a poster style format may work best; if you are an infor-
mation architect, a more structured document might be appro-
priate. Whatever style you choose, think carefully about what will
best communicate the flavor of the site you want to create.

Mood boards are meant to help define the visual style of your site
without you actually designing the entire interface. Generally, you
can quickly create two or three “looks” that can then be presented
to a client for feedback, without having to get bogged down in
the details of building the pages. You can include splashes from
the color palette, patterns, textures, typography, photos, and
illustrations. I also recommend including treatments of some
of the standard user interface elements such as form fields, lists,
and tables.

188
189
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Plan continued

Visual Comps
Visual comps (short for compositions) combine the wire frames
to create mood boards: a static version of what the final Web
page will look like. If you skipped the mood boards, you may also
be relying on the visual comps to present to your client, possibly
showing several different skins for them to choose from. If you
are working with a developer who will be constructing the site,
this needs to be a pixel-perfect composition.

Once you get more comfortable with creating Web pages in CSS,
however, you may find that you can be less thorough, and can
leave some of the final design polishing until the prototype stage.
Here are some tips to keep in mind for your visual comps:

 Use guides to reconstruct the grid you created in your wire

frames as precisely as possible. You may ultimately want to
break out of that grid to a less blocky design, but you need
to know where the grid is to break it.

 Think carefully about how a background element will tile.

You can tile horizontally or vertically to fill an area with a
pattern. Complex background patterns that don’t tile are
possible but generally lead to larger graphic file sizes.

 If you want to use rounded corners or drop shadows, con-

sider creating these with CSS as design enhancements. They
are hard to create graphically but are easily added using CSS.
Keep in mind that these styles are not currently supported in
all browsers.

 If using Photoshop, make sure your proof setup (View>Proof

Setup) is set to RGB; otherwise your colors will look very
different in the browser.

190
191
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Build
The faster you can move from planning to building, the better.
It’s easy to get bogged down trying to plan for every contin-
gency, to the point that the planning takes over the production.
Planning should give you direction, but, in an iterative design
process, you can always revisit wire frames and comps as the situ-
ation on the ground changes.

Cutting Chrome
Putting the chrome Chrome (any graphics or visual effects used to create the user
back together to cre- interface of a Web site) is generally cut from the visual comps.
ate your interface is
How you cut the chrome depends on the software you use to cre-
covered in detail in
Chapter 11, “Chrome.” ate your comps, but regardless of your software of choice, there
are a few guidelines to follow while you are working:

 Most chrome is added as a background image using CSS,

rather than as an image tag.

 Use transparent PNGs where possible to make overlapping

elements easier to create. In Photoshop, this means using
PNG 24. ImageReady allows you to create transparent
PNGs in both PNG 8 and PNG 36, although not in PNG
24 for some reason.

 Use JPEGs for complex images such as photos.

 Combine different states of a chrome graphic into a single

file, and use CSS sprites to slide it back and forth.

192
193
SP EA KI NG LI K E A NAT I V E
DESI G NI NG W I T H CS S

Build continued

The Style Guide

The style guide pulls all of your planning together into a single
document, which is then a common point of reference for every-
one on the team when building the site. It serves as a blueprint
for constructing the site and provides notes for designers and
developers who may work on the site in the future.

You should include the following information in your docu-

ments, using CSS style notation:

Typography is cov-  Typography: The font families, styles, and weights being
ered in Chapter 9, used. You do not need to specify exact sizes or usage here.
“Typography.”
That will be included in the default styles. Because this is
Web design, though, you want to include a prioritized list
of fonts, starting with the most desired and ending with a
generic font-family as the ultimate fallback option.
Color values are  Colors: List all of the primary and secondary colors used in
detailed in Appendix
the site, giving the hex and RGB values for each. I also like
B, “CSS Values.”
to give each color a specific project name, which generally
makes it easier to reference during discussions and feedback.

Default styles and  Default styles: Defines the global styles such as font-family,
layout are covered in font-size, color, and page background that will be used over
Chapter 8, “Layout.”
most of the pages.

 Layout: The widths, height, padding, and margins of every

element in the Web page.
Chrome is covered in  Chrome: For each element, show the image(s) with file
Chapter 11, “Chrome.”
name(s) being used to create it.

194
 Style Guide
Wed Apr 22 2009
voxLIBRIS : Typography & Colors Page 2 of 4

Typography
Family 1
Regular Bold Oblique Bold/Oblique Capitalized
Fontin Sans Fontin Sans Fontin Sans Fontin Sans FONTIN SANS
Optima Optima Optima Optima OPTIMA
 


 



Trebuchet MS Trebuchet MS Trebuchet MS Trebuchet MS TREBUCHET MS
Sans-serif Sans-serif Sans-serif Sans-serif SANS-SERIF

Family 2
Regular Bold Italic Bold/Italic Capitalized
Capitali
p zed
Garamond Garamond Garamond Garamond GARAMOND
Cochin Cochin Coch
Cochin Cochin COCHIN

 





Style Guide 

Wed Apr 22 2009
Times Times T
Tim
Times voxLIBRIS
Times : Chrome
TIMES
Page 3 of 4
50% to scale
Serif Serif Seri
Serif Serif SERIF
Defaults Chrome
body Welcome
background-color: RGB(0,78,94)
background-image: url(bg-page.png)
color: rgb(105,105,105)
Colors font-family: "fontin sans", optima,
candara, "trebuchet-MS", sans-serif
Primary Colors font-size: 12px
bg-sidebar1-top.png
h1, h2, h3, h4, h5, h6
color: rgb(128,128,128,)
font-family: garamond, cochin,
cambria, times, serif
font-weight: normal
Black Dim Gray Gray Dark Gray Silver White
RGB 0, 204, 255 RGB 105, 105, 105 RGB 128, 128,
28, 128 p,
RGBul,169,
ol 169, 169 RGB 192, 192, 192 RGB 255, 255, 255
#000000 #696969 #808080 line-height:
#a9a9a9 1.5 #c0c0c0 #ffffff bg-sidebar1-mid.png

a
text-decoration: none

a:link bg-sidebar1-bottom.png
bg sidebar1 bottom.png
color: rgb(51, 204, 255)
VLAqua VLLightAqua Gold Yellow
RGB 0, 76, 94 RGB 37, 105, 128 RGB 255, 215,
15, 0 a:visited
RGB 255, 0, 0
color: rgb(51,204,255)
Style Guide
a:hover Wed Apr 22 2009
Secondary Colors color: rgb(255,255,255) voxLIBRIS : Layout
Ads
Page 4 of 4
text-decoration: underline 50% to scale

a:active
A Left Sidebar
40px

40px

color: rgb(153, 102, 51) padding-left: 0

220px padding-right: 10px
text-decoration: underline
300px 470px 200px padding-top: 10px
padding-bottom: 0
VLBeige Red input
RGB 252, 249, 230 RGB 255, 0, 0 font-size: 14px;
C
#ff0000 color: rgb(128,128,128);
A 10px
font-family: "fontin sans", optima, bg-ads-top.png B Left Sidebar
candara, "trebuchet-MS", sans-serif 30px
padding-left: 50px
padding-right: 40px
padding-top: 40px
padding-bottom: 50px
20px
5px

C Search Input
padding: 2px 5px

bg-ads-mid.png
B
20px

Design Director
Jason Cranford Teague bg-ads-bottom.png
jason@brighteyemedia.com

60px

30px
Section

10px
flourish-down.png
20px

210px 210px 30px

30

icon-pointer.png
20px

flourish-up.png

20px

10px

40px

40px
Design Director
Jason Cranford Teague
jason@brighteyemedia.com

30px

Design Director
Jason Cranford Teague
jason@brighteyemedia.com

195
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Build continued

Prototype
Ready to start coding? The prototype is where you transform
your static visuals into living Web pages. If you are starting a pro-
totype from scratch (rather than re-skinning an existing site), you
will want to create your HTML first to define the general page
structure to which the CSS is then applied. Keep these tips in
mind while coding your CSS:

 Don’t be afraid to modify your design as you assemble

it. This is the difference between theory (the visual comp)
and practice (the prototype). Often what works in the free-
form world of the comp doesn’t work in the more structured
world of CSS code. For example, I used a different flourish
with the “Genres” title than shown in the comp, because it
proved impossible to code effectively. Remember: iterate.
If you need to generate  Use placeholder content. The closer you can get to the final
greek text (also known
content you will be using, the better, but don’t waste time
as “Lorem Ipsum” text)
for your placeholder trying to get the exact content you will use for launch. For
content, use the Web example, greek text for copy is fine at this point, as long as it
site lipsum.com. is approximately the same length as the final copy.

 Show an example of all use cases. Try to replicate a sample

of every element that will be on the page to show how it
works. For example, add dummy links to show how they will
be presented.

 Test, test, test! As you develop your prototype, make sure

to constantly test it in as many browsers as possible. Nothing
is more frustrating than finding your design looks great in
Firefox but falls apart in Internet Explorer.

196
197
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Build continued
Prototype: Writing Your CSS
How you organize the various rules in your style sheet can affect
your workflow and how quickly you can make changes. Of
course, you can always just throw your styles together haphaz-
ardly, but when your style sheets get longer and longer, you will
find yourself spending more and more time tracking down rules
to make changes. Keep these tips in mind:

 Cascade: Remember that styles cascade, so once a style

is set for a parent element, it is set for all of its children.
For example, setting the font-family property in the body
HTML selector means that font family is applied to all
text on the page.

 Versatility: Any styles you create without having to resort

to adding an image will significantly increase the design’s
versatility, making it easier to make adjustments and re-
design later.

 Easy to edit: As your CSS code gets longer and more com-
plex, it can get harder to find and edit code. Even if it takes
a little more time, anything you can do to make it easier to
sort through it all will save you time and frustration in the
long run.
Once you are ready  File size: Every letter, number, space, and character adds to
to deploy your site,
file size. They may seem like grains of sand, but get enough
consider reducing
your CSS file size by
sand and you fill a beach. The larger the file size, the longer it
stripping out all of takes to download. That’s not to say that you have to agonize
the comments and over every space you type, but try to cut code by using the
unnecessary spaces
cascade wherever you can.
using a service like
csscompressor.com.

198
199
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Build continued
Prototype: Organizing Your CSS
Here are a few tips on formatting and organizing your styles to
make them easier to edit:

For a full listing of the  Place general styles at the top of the style sheet (01–46).
code used to create This sets the default styles for your Web page—most impor-
the voxLibris template, tantly for the <body> element, which is the parent to all
see Appendix A.
other elements. Remember, once a style is set in a parent tag,
you never need to set it again unless you want to override it
for a specific element. Since the body tag is the ultimate par-
ent for all tags, anything you set there will be applied to all
tags on the page, with the exception of form elements.

 One declaration, one line (example: 28). If you have only a

single declaration for a rule, run it on a single line.

 Use shorthand properties (example: 11). Many styles have

a shorthand property that collects one or more styles into a
single line of code. These save time and space and are easier
to find and edit in long lists of code.

 Indent your declaration. Use spaces and returns to make

reading the code easier.

 Organize rules by use (example: 15–17). Group your rules

together based on the elements they affect in the Web page,
separating each group with notes. This lets you quickly track
down a style based on its location on the Web page.

 Organize by context (example: 89). Within a grouping,

group rules with similar contexts. Generally, if two rules
have similar contexts, they will be closer to each other on the
page, so if you see one, it makes it easier to find the other.

200
01 /*--------------------------------------------------------------------- 47 /*---------------------------------------------------------------------
02 Reset Browser Inherited Styles 48 Grid
03 ---------------------------------------------------------------------*/ 49 ---------------------------------------------------------------------*/
04 html, body, div, span, applet, object, iframe, h1, h2, 50 #page {
h3, h4, h5, h6, p, blockquote, pre, a, abbr, 51 position: relative;
acronym, address, big, cite, code, del, dfn, em, 52 display: block;
font, img, ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, 53 margin:0 auto;
fieldset, form, label, legend, table, caption, 54 width: 980px;
tbody, tfoot, thead, tr, th, td 55
05 { 56 _width: 960px; }
06 margin: 0; 57 /*---------------------------------------------------------------------
07 padding: 0; 58 Grid - Rows
08 border: 0; 59 ---------------------------------------------------------------------*/
09 outline: 0; 60 .row {
10 background: none; 61 position: relative;
11 font: inherit inherit 100% inherit; 62 display: block;
12 text-align: left; 63 margin:0 auto; }
13 vertical-align: baseline; 64 #header { height: 100px; }
14 list-style: none; } 65 #content { padding-top: 20px; }
15 /*--------------------------------------------------------------------- 66 #footer { height: 20px; }
16 Default Styles 67 /*---------------------------------------------------------------------
17 -------------------------------------------------------------------- 68 Grid - Columns
-*/ 69 ---------------------------------------------------------------------*/
18 body, input, select { 70 .column {
19 color: rgb(105,105,105); 71 position: relative;
20 font-family: “fontin sans”, optima, candara, 72 display: block;
“trebuchet-MS”, sans-serif; } 73 float: left; }
21 74 .alignclear { clear: both; }
22 h1, h2, h3, h4, h5, h6 { 75 #aside1 {
23 color: rgb(128,128,128); 76 top: 60px;
24 font-family: garamond, cochin, cambria, times, 77 left: -80px;
serif; 78 width: 314px; }
25 letter-spacing: 1px; 79 #article1 {
26 font-weight: normal; } 80 left: -40px;
27 81 width: 470px; }
28 h1 { font-size: 2.5em; } 82 #aside2 { width: 190px; }
29 h2 { font-size: 2em; } 83 /*---------------------------------------------------------------------
30 h3 { font-size: 1.25em; } 84 Grid - Sections
31 h4, h5, h6 { font-size: 1em; } 85 ---------------------------------------------------------------------*/
32 p { 86 .section {
33 text-align: left; 87 position: relative;
34 font-size: .75em; 88 display: block; }
35 margin: 5px 0; 89 #header .search {
36 line-height: 1.5; } 90 position: absolute;
37 blockquote { 91 right: 10px;
38 font-size: .75em; 92 top: 10px; }
39 margin: 10px 0; 93 #footer .copyright {
40 padding: 10px 0; 94 margin: 0 20px;
41 border-top: 1px solid rgb(128,128,128); 95 float: left; }
42 border-bottom: 1px solid rgb(128,128,128); 96
43 line-height: 1; } 97 #aside1 .section {
44 li { 98 width: 100%;
45 font-size: .75em; 99 padding-bottom: 60px; }
46 margin: 2px 0; }

201
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Build continued
Prototype: Combining Style Sheets
Style sheets can be linked to or imported into the HTML as
detailed in Chapter 5, “Semantics,” in the “Where to Put Style
Rules” section. There are two basic strategies for external style
sheets, each with its strengths and weaknesses:

All In One
Place all of your CSS code into a single file. From an optimiza-
tion standpoint, this is your best bet, as it takes only a single
download to get all of the code. The downside is that this can
mean a lot of extra code per page, and conflicts between styles
are more likely.

Pros

 Allows user agent to cache one file that can then be reused
without extra required download time.

 Due to predictable nature, less likely to cause unforeseen

style conflicts.

Cons

 Greatly limits design flexibility between channels and proj-

ects. Difficult to edit and override styles.

 Will most likely lead to Web developer kludges to overcome

shortcomings.

202
Modular Library
A library of CSS files allows you to break down the code by func-
tion. Each function has its own unique file that can be indepen-
dently edited and then imported into a single external CSS file
that is in turn linked to an HTML page. Every page will have a
unique external CSS file, but that file will be composed of mul-
tiple imported CSS files.

Pros

 Easy to edit.

 Cuts down on unnecessary code.

 Each external file is cached separately and so will be reused as

needed without additional download required.

Cons

 Requires a server call for each imported style sheet, slowing

initial download.

 IE has some difficulties loading external style sheets using

@import before the page content loads.

203
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Deploy
Once you have built your prototype pages, you are ready to popu-
late them with their initial content and begin getting reactions.

Alpha
Your Web site is not ready for prime time (and is possibly pass-
word protected), but you can share it with people you know and
trust to give you honest feedback and constructive criticism.
Make sure the feedback comes with the following information:

 The exact URL where the problem occurred.

 The visitor’s browser, version, and operating system.

 Where possible, a screen grab showing the problem.

Beta
Sometimes called the “soft launch,” beta launches are becoming
increasingly popular as a way to avoid criticism for any bugs on
the site after it goes public. Generally the site is made available to
the public but not promoted. Prominent feedback functionality
should be provided to report any problems.

Launch
It’s time for the hard launch, but don’t let that stop you from
making improvements.

204
205
SP EA KI NG LI K E A NAT IV E
DESI G NI NG W I T H CS S

Iterate
Design is an iterative process, where new ideas and new concepts
should constantly be explored to make improvements. The Web
makes the job of iteration easy because the means of distribution
are instantaneous. You can make changes and publish them atthe
speed of light (or at least at the speed of your Internet connection).

Iteration is not something you do at the end of the process; it is

an integral part of the entire process. Always be willing to ques-
tion your assumptions throughout the process whenever new
facts present themselves.

Design iteration can cause friction on a project, as project manag-

ers and developers are generally more comfortable with a linear
process. This takes you back into planning: The more you can
show the benefits of particular changes in your documentation,
the smoother it is in convincing the rest of the team to go along.

206
 Plan

Iterate

Build Deploy

207
Grids are a time-honored method for creating strong visual
designs with hierarchy, visual rhythm, and context. Although
CSS is not explicitly set up for creating grids—there are no row
or column properties—designers have developed methods to
overcome this limitation.

The voxLibris site is designed around a three-column structure

with a fixed width and fluid height. We’ll start by resetting all of
the browser default properties, and then creating a layout grid for
our design.

CHAPTER 8
Layout
SP EA KI NG LI K E A NAT IV E
LAYO UT

Structure
Layout begins with the HTML document, which creates the
structure on which the CSS is applied. A Web page’s structure
can take a variety of forms and will depend greatly on the type
of site you are creating. Still, many Web pages have structural
elements in common. Along with the markup that sets content
elements such as headers, paragraphs, lists, links, and forms; we’ll
add certain IDs and classes that will be used to define those struc-
tural elements.

Head and Body

The HTML for all Web pages is split into two main blocks set
off by tags:

01 <head>: The head is where all the meta information about

the Web page is placed—information about the page, such
as its title, author, and description. None of this information
is displayed in the browser window itself. This is also the
The Grid best place to put the CSS that will be applied to the body
System
of the page.
t heg r idsy s tem .o rg
02 <body>: All Web pages exist within the body of the
Everything you ever browser window, which is the eventual parent of all elements
wanted to know about on the page. By setting styles with the body HTML selec-
designing with a grid tor, you also set default styles for every element on the page
(and more). It even (except for some form elements). This is where you set the
includes an onion skin background that fills the entire browser window.
layer you can toggle

on and off to see the

site’s own grid.

210
211
SP EA KI NG LI K E A NAT IV E
LAYO UT

Structure continued

The HTML Framework for CSS

A framework is a standard set of IDs and classes added to a Web
page’s HTML to facilitate common page components, which can
then be referenced in the CSS. Although the exact framework
may vary from site to site, these are the most common frame-
works:

 Page (08): Controls whether the grid is fluid or fixed. Setting

an absolute width and/or height fixes the page’s flow verti-
cally or horizontally.

 Rows (09, 10, 32): Horizontal elements within the grid,

stacked from top to bottom and stretching the width of the
page element.

 Columns (11, 16, 27): Vertical elements within the grid,

stacked next to each other from left to right and stretching
the height of its row.

 Sections (12, 13, 17, 20, 22, 24, 28): Blocks within the grid
containing content and functionality.

212
 voxLibris Main

i n d ex . h t m l

The code shown

has had all content

stripped out to show

the HTML framework.

For the full code listing,

see Appendix A.

Note that without

any CSS applied to

the page the browser

default styles are still

applied, which we will

need to deal with.

01 <!DOCTYPE html PUBLIC "-//W3C//DTD 17 <div id="genrelist" class="section">

XHTML 1.0 Strict//EN" "http://www. 18 <br class="alignclear" />
w3.org/TR/xhtml1/DTD/xhtml1-strict. 19 </div>
dtd">
20 <div id="about" class="section">
02 <html xmlns="http://www.w3.org/1999/xhtml">
21 <br class="alignclear" /></div>
03 <head>
22 <div id="news" class="section">
04 <title>voxLIBRIS</title>
23 <br class="alignclear" /></div>
05 <link href="_css/main.css" rel="stylesheet"
type="text/css" media="all"/> 24 <div id="news" class="section">
06 </head> 25 <br class="alignclear" /></div>
07 <body> 26 </div>
08 <div id="page"> 27 <div id="aside2" class="column">
09 <div id="header" class="row"></div> 28 <div id="topbooks" class="section
topbooks">
10 <div id="content" class="row">
29 <br class="alignclear"/></div>
11 <div id="aside1" class="column">
30 </div>
12 <div id="navigationmain"
class="section navigation"></div> 31 <br class="alignclear" />
13 <div id="ads01" class="section ads"></ 32 <div id="footer" class="row">
div> 33 <br class="alignclear" /></div>
14 </div> 34 </div>
15 </div> 35 </div>
16 <div id="article1" class="column"> 36 </body>
37 </html>

213
SP EA KI NG LI K E A NAT IV E
LAYO UT

Structure continued

Adding CSS
Different strategies for voxLibris will use the modular library approach to adding exter-
adding external style nal style sheets. The idea is to set up several external files based
sheets are detailed in
on use and import them into a single CSS file, which then gets
Chapter 7, “Designing
with CSS” in the linked to the target HTML file. This gives you the versatility
“Prototype: Combining to quickly change one part of the design or interface simply by
Style Sheets” section. swapping style sheets.

For voxLibris, we’re using four distinct style sheets:

 default.css: Resets the browser default styles and sets the site-
wide default styles. This style sheet is detailed later in this
chapter.

 layout.css: Defines the grid structure and layout for the page.
This style sheet is detailed later in this chapter.

 navigation.css: Provides user interface styles, such as links,

navigation, and buttons.

 chrome.css: Adds the graphic layer to the design, including

backgrounds, logos, and design flourishes.

214
 voxLibris Main

m a in . c s s

main.css imports all of the external style

sheets used in the page, and then links to

index.html.

default.css
aul
ult.cs
ul
ult csss
cs

CSS

@import
layout.css
out
utt.css
csss

@import
CSS
main.css
ain
in
n.css
css <link> index.html
ex.
x ht
html
ml
@import
CSS
HTML
navigation.css
gati
atiion
on.css
n csss

CSS @import

chrome.css
ome
me.css
me csss

CSS

01 /*---------------------------------------------------------------------
02 Imported Styles
03 ---------------------------------------------------------------------*/
04 @import url("default.css");
05 @import url("layout.css");
06 @import url("navigation.css");
07 @import url("chrome.css");

215
SP EA KI NG LI K E A NAT IV E
LAYO UT

Default Styles
It’s an important fact of life with CSS that, once a style is set,
it’s set not only for the particular HTML tag it’s being applied
to, but to all tags within that tag as well. To make adding new
styles as easy as possible, there are two default styles that you
need to know.

Resetting Browser Default

Styles
Load a Web page into a browser, and even before you add any
CSS to the page, you will notice that the page already has a very
rough style to it: headlines are bolder and larger, links are colored
and underlined, lists are indented with bullets, and paragraphs
have margins. These are the browser default styles that I dis-
cussed in Chapter 5, “Semantics” in the “Inheritance” section.
In the absence of overriding styles from CSS, these default styles
are applied. It’s helpful to reset the default styles for all of your
HTML tags to get more consistent results across browser types.

Setting Your Default Styles

Set the specific default styles for the HTML tags you will use
in your designs. This sets the baseline styles particular to your
site and will be used unless overridden by specific styles later
in your CSS.

216
 Default Styles

d e fau l t . c s s

Browser styles have

been replaced with

default styles, includ-

ing margins, padding,

and basic typography

(see Chapter 9).

01 /*--------------------------------------------------------------------- 18 /*---------------------------------------------------------------------
02 Reset Browser Inherited Styles 19 Default Styles
03 ---------------------------------------------------------------------*/ 20 ---------------------------------------------------------------------*/
04 html, body, div, span, applet, object, iframe, h1, h2, 21 body, input, select {
h3, h4, h5, h6, p, blockquote, pre, a, abbr, 22 color: rgb(105,105,105);
acronym, address, big, cite, code, del, dfn, em, 23 font-family: “fontin sans”, optima,
font, img, ins, kbd, q, s, samp, small, strike, “trebuchet-MS”, sans-serif; }
strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul,
fieldset, form, label, legend, table, caption, 24 body { background: rgb(0,50,75)
tbody, tfoot, thead, tr, th, td { url(../_images/bg-body.png) repeat 0 0; }
05 margin: 0; 25 h1, h2, h3, h4, h5, h6 {
06 padding: 0; 26 color: rgb(128,128,128);
07 border: 0; 27 font-family: garamond, cochin, times, serif;
08 outline: 0; 28 letter-spacing: 1px;
09 background: none; 29 font-weight: normal; }
10 font-weight: inherit; 30 h1 { font-size: 2.5em; }
11 font-style: inherit; 31 h2 { font-size: 2em; }
12 font-family: inherit; 32 h3 { font-size: 1.25em; }
13 font-size:100%; 33 p {
14 text-align: left; 34 font-size: .75em;
15 line-height: 1; 35 margin: 5px 0;
16 vertical-align: baseline; 36 line-height: 1.5; }
17 list-style: none; } 37 blockquote {
38 font-size: .75em;
39 margin: 10px 0;
40 padding: 10px 0;
41 border-top: 1px solid rgb(128,128,128);
42 border-bottom: 1px solid rgb(128,128,128); }
43 li { font-size: .75em; }

217
SP EA KI NG LI K E A NAT IV E
LAYO UT

The Grid
A simple grid structure uses the HTML framework for CSS
to lay out the page. voxLibris uses page, header, footer, and con-
tent, but other grid sections might be used as defined in the
wire frames while planning the site.
Fluid and fixed grid lay- When you planned your design, one of the first things you
outs are discussed in
needed to decide was whether you would use a fluid or fixed
Chapter 7, “Designing
with CSS” in the “Page
layout. voxLibris uses a fixed width of 980px, so we set that as
Flow” section. the width using the page ID (04). If we wanted to make this
page fluid, we would set the width as a percentage or use max/
min widths.

Rows
The <div> tags used to create each row will include the row class
and a row ID with specific styles.

 Create the row class and then IDs for individual rows based
on purpose (header, content, footer).

For the fix to dealing  Be careful when using padding with grid elements, since
with padding in IE6, padding will throw the dimensions off in IE6. If padding is
read the “Box Model
added to an axis that does not have an absolute length set,
Problem in IE6” sec-
tion in Chapter 6. there is no problem. If the axis does have an absolute length
set, though, then IE will shrink the box to accommodate
the padding.

 To center a grid element within its parent, set the left/right

margin to auto. This puts equal space on both sides of the
page, centering it in the browser window.

218
 Grid:
Rows

grid.css

The three grid rows:

header, content, and

footer.

01 /*--------------------------------------------------------------------- 09 /*---------------------------------------------------------------------
02 Grid 10 Grid - Rows
03 ---------------------------------------------------------------------*/ 11 ---------------------------------------------------------------------*/
04 #page { 12 .row {
05 position: relative; 13 position: relative;
06 display: block; 14 display: block;
07 margin:0 auto; 15 margin:0 auto; }
08 width: 980px; } 16 #header { height: 100px; }
17 #content { padding-top: 20px; }
18 #footer { height: 20px; }

219
SP EA KI NG LI K E A NAT IV E
LAYO UT

The Grid continued

Columns
Columns are used to establish a vertical rhythm within the page,
allowing you to present information from left to right and make
better use of screen real estate.

 Although it may seem counter-intuitive, columns are created

by floating block elements next to each other. This lines the
blocks up horizontally next to each other.

 As with other grid elements, set the position property for all
columns so that child elements will position themselves from
the column’s origin (top left corner).

 If a column has a specific width, avoid applying padding. If

you must use padding, make sure to accommodate IE6 as
detailed in “Box Model Problem in IE6” in Chapter 6.

 The alignclear class can be added to a <br /> tag in your

HTML to force columns to drop below, but, more impor-
tantly, to also force the column box to the full height of
the content.

One other note: To break out of the grid, use

Why Are My Columns the position properties (top, right, bottom,
Falling Apar t?
and left) to move elements from their nat-
Columns will fall apart (dropping under- ural position—potentially even out of their
neath each other) if there is not enough columns.
width in the page and/or content ele-

ments. For example, if the page width is

900px, but the column’s width adds up to

901px or more, the far right column will

drop below the other columns.

220
 Grid: Columns

grid.css

The three columns:

aside1, article1, and

aside2

19 /*---------------------------------------------------------------------
20 Grid - Columns
21 ---------------------------------------------------------------------*/
22 .column {
23 position: relative;
24 display: block;
25 float: left; }
26 .alignclear { clear: both; }
27 #aside1 {
28 top: 60px;
29 left: -80px;
30 width: 314px; }
31 #article1 {
32 left: -40px;
33 width: 470px; }
34 #aside2 { width: 190px; }

221
SP EA KI NG LI K E A NAT IV E
LAYO UT

The Grid continued

Sections
Sections (sometimes called modules) are content and functional-
ity blocks within the grid.

 As with other grid elements, set the position property for all
sections so that child elements will position themselves from
the column’s origin (top left corner).

 If a section has a specific width, avoid applying padding. If

you must use padding, make sure to accommodate IE6 as
detailed in “Box Model Problem in IE6” in Chapter 6.

 Sections can also be floated next to each other and used

within columns to create “sub-columns.”

222
 Grid: Sections

grid.css

Outlines show where

sections of the page

are located.

35 /*---------------------------------------------------------------------
36 Grid - Sections
37 ---------------------------------------------------------------------*/
38 .section {
39 position: relative;
40 display: block; }
41 #aside1 .section {
42 width: 100%;
43 padding-bottom: 60px; }
44 #aside1 .section h2 {
45 width: 100%;
46 padding: 80px 0 8px 18%; }
47 #aside1 .section div.content { width: 100%; }
48 #aside1 .section p, #aside1 .section ul {
49 width: 65%;
50 margin: 0 auto;
51 margin-bottom: 5px; }
52 #article1 .section .column { width: 210px; }
53 #article1 .section .column+.column { float: right; }
54 #article1 .section .column p { min-height: 110px; }

223
The fonts you choose convey as much of your Web site’s message
as your words. The initial response to a Web page is a visceral
one—a reaction to the visual design—rather than a conscious
thought. This happens within seconds of the page loading, and
beyond the images, chrome, and colors, one of the first things the
visitor notices is all of the squiggles making words.

The sad fact is, though, Web typography is mostly boring because
the only font families at your disposal (unless you put the text
into a graphic) are the typefaces installed on the end user’s
machine. All this may seem very limiting at first, but it’s not
nearly as bad as most designers believe.

CHAPTER 9
Typography
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Font Choices
The process of defining the typeface for a particular block of
text is relatively straightforward—specify a list of font-family
names, separated by commas, with the last name in the list being
a generic font family (serif, sans-serif, monospace, handwritten,
or fantasy). If a particular font in the list is not available, the
browser moves to the next one, until there is a match.

font-family: georgia, times, “times new roman”, sans-serif.

However, the simplicity of setting a typeface belies the complex-

ity of picking the right font to communicate your message.

Core Web Fonts

It is estimated that there are more than 100,000 fonts available
electronically. Yet, if you look around the Web, you would be for-
given if you thought there were only three—Arial (Helvetica on
the Mac), Times New Roman (Times on the Mac), and Georgia.
These are the three most popular fonts because—along with
Verdana, Trebuchet MS, Andale Mono, Arial Black, Courier
New, Comic Sans MS, Impact, and Webdings—they are the core
Web fonts that are widely distributed on Mac and Windows
computers. So, you are almost guaranteed that these 11 fonts will
be on the end user’s machine. Eleven fonts out of tens of thou-
sands. Not very inspiring, is it?

i love typography

i lovet y po gra phy. co m

If you love typography, this is a great resource on

typography for both the Web and print.

226
 Andale Mono
Arial

Arial Black
Courier New

Comic Sans MS
Georgia

Impact
Times New Roman
Trebuchet MS
Verdana
Webdings

227
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Font Choices continued

Web-Safe Fonts
For a complete list of The 11 core Web fonts are installed almost universally on all com-
the Web-Safe fonts puters. However, there are many other fonts commonly installed
with samples, check
on the end user’s computer that are commonly overlooked. These
out speaking-in-styles.
com/typography/web- fonts can be safely employed in your designs, using CSS:
safe-fonts.
01 Operating system fonts: All operating systems come with
pre-installed fonts. In addition to the core Web fonts,
Windows XP adds 9 typefaces, Windows Vista adds another
7 (16 total), and Mac OS X supplies a whopping 30 fonts.

02 Microsoft Office fonts: The one application almost uni-

versally installed on all computers is Microsoft Office. Love
it or hate it, Microsoft Office 2007 has another 121 fonts,
while its Mac equivalent (Office 2008) includes 68 fonts.
Even better, the Windows and Mac lists have 62 fonts
in common.

03 iLife fonts: All Macs (consumer and Pro) have Apple iLife
pre-installed, which has 13 fonts pre-installed.

That makes a total of 148 fonts likely to be on a given Windows

box and 120 fonts on
A Font by Any Other Name… Macs, with an overlap
of 73 fonts.
We often use the word “font” indiscriminately when what we really

mean is font family or typeface. A font is actually the complete char-

acter set of a single size and style of a particular typeface. However,

because the broader meaning is commonly used to mean typeface,

let’s just keep it that way. Keep in mind that when you are defining

the font property in CSS, you are defining the weight, style, varia-

tions, and size in addition to the font family.

228
Andale Mono Franklin Gothic Book
Arial Narrow Franklin Gothic Medium
Arial Rounded MT Bold Garamond
Baskerville Old Face Gill Sans MT
Bauhaus 93 Gill Sans Ultra Bold
Bell MT Gloucester MT Extra Condensed
Bernard MT Condensed Goudy Old Style
Book Antiqua Haettenschweiler
Bookman Old Style Harrington
Bradley Hand ITC TT Imprint MT Shadow
Britannic Bold Lucida Bright
Brush Script MT Lucida Calligraphy

 Lucida Console
Calisto MT Lucida Fax

 Lucida Sans

 Lucida Sans Typewriter
Century Lucida Sans Unicode
Century Gothic Mistral
Century Schoolbook



Colonna MT MS Reference Sans Serif

 Onyx

 Papyrus
Cooper Black Perpetua
Copperplate Gothic Bold Perpetua Titling MT
Copperplate Gothic Light Playbill

 Rockwell
Courier New Rockwell Extra Bold
Curlz MT STENCIL
Edwardian Script ITC
Tahoma
Engravers MT Tw Cen MT
Footlight MT Light Wide Latin

229
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Font Choices continued

Downloadable Fonts
The holy grail of Web typography is downloadable fonts. After
all, Adobe Flash allows you to use any font at your disposal in
your design by embedding the font in the SWF file. Why can’t
we just download a font file (like we do an image file) to be used
by CSS? The short answer is, surprisingly, we can, or at least CSS
has the grammar to allow exactly that.

Using the @fontface rule you can set the source of a font file
and give it a unique name for use within your designs. For
example, placing

@font-face { font-family: “fontin sans”;

src: url( fonts/Fontin_Sans_R_45b.otf );}

at the top of your CSS imports the Open Type font Fontin_
Sans_R_45b.otf, which can be referenced in the CSS as
fontin sans.

Before you get too excited, though, currently, only Sa3.1+ sup-
ports the downloading of the common font formats True Type
(.ttf ) and Open Type (.otf ). Although
How Fast Are Downloadable both Op and FF have plans to add sup-
Fonts? port, the big holdout it is IE. What could
Microsoft possibly have against download-
A font file is a file, so it has to be downloaded,
able fonts? To understand their reasoning,
which can affect performance. Currently
you would first have to understand the
there is no way to subset fonts (just download
vagaries of end user license agreements
the needed glyphs to render the page), but
(EULA) and intellectual property (IP).
the font will be cached, so once downloaded
Still, you can support downloadable fonts
for one page, it’s available for other pages in your designs as long as you are willing
much more quickly. to think fluidly about your typography.

230
 Font Face Rule Name You Give It

@font-face {
font-family: "fontin sans";
src: url( fonts/Fontin_Sans_R_45b.otf );
}
URL for File

font-family: "fontin sans", optima, "trebuchet MS", sans-serif;

Welcome Welcome Welcome Welcome

231
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Fluid Typography
At first, Web typography can seem stiflingly limited, with few
typestyles to choose from and limited controls. This is especially
true if you are a designer who wants your results to look exactly
like in your visual comps. If you are willing to think more fluidly
about your typography, though, giving up some control, you will
find more alternatives.

As discussed in the previous section, we have three main sources

for fonts—core Web fonts, Web-safe fonts, and downloadable
fonts. The advantage of CSS is that we can choose any or all of
these sources and specify a list of fonts to be used, depending on
the end user’s setup.

In the example, the font Fontin Sans is downloaded with

Web-safe font backup of Optima, a core Web font backup of
Trebuchet MS, and a final generic font backup of Sans-Serif.

For the level 1 header, I’m using Garamond from the Web-safe
font list, Times from the core Web fonts list, and Serif as the
generic font.

232
p{ font-family: "fontin sans", optima, "trebuchet-MS", sans-serif; }

Downloaded Web Safe Core Web Generic

h1 { font-family: garamond, times, serif; }

233
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Fluid Typography continued

Choosing Typefaces
Although fluid typography frees you to try different typefaces,
there are a few important ideas to keep in mind while putting
together your font-family list:

 Choose fonts that are as visually similar as possible.

 For headline copy, use fonts with similar widths and kerning.
Headlines generally have a finite space they can fill (one or
two lines), so it’s important that the typefaces you choose
run roughly the same length.

 For body copy, select fonts with bold, italic, and bold/italic
versions. Fonts that do not have specific weight and style ver-
sions will be synthesized by the browser, which is generally
not as attractive as a true version.

 If you use a downloaded font and/or a Web-safe font, always

include core Web fonts and generic font families as backups.
Most browsers will not support downloadable fonts, and
some computers may not have the Web-safe font you chose.

 Finally, test the fonts in different combinations. If you use

different font families in different selectors, make sure all
of the fonts work well together, since you can never predict
which two will be used.

234
 Welcome Fontin Sans

Welcome Optima

Welcome Trebuchet-MS

  
Fontin Sans Optima Trebuchet-MS
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit. adipiscing elit.
Vestibulum commodo Vestibulum commodo Vestibulum commodo
metus sit amet libero. metus sit amet libero. metus sit amet libero.
Cras nisl neque, lacinia Cras nisl neque, lacinia Cras nisl neque, lacinia
id, mollis vel, dictum ac, id, mollis vel, dictum ac, id, mollis vel, dictum
ante. Vestibulum tortor ante. Vestibulum tortor ac, ante. Vestibulum
dui, convallis a, dapibus dui, convallis a, dapibus tortor dui, convallis a,
vitae, volutpat nec, justo. vitae, volutpat nec, justo. dapibus vitae, volutpat
Integer dui. Integer dui. nec, justo. Integer dui.

  

Web Safe Generic

p{ font-family: "fontin sans" optima, "trebuchet-MS", sans-serif; }

Downloaded Core

235
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

S i z i n g Te x t i n C S S

Although you can set your font size using a variety of units, the most

versatile method is to set the font size to 100% in the body tag

(which uses the browser’s default size as its basis) and then use

ems to set the specific font sizes for individual elements as needed.

Using ems will set font size relative to one another and parent ele-

ments, meaning that the page will scale up and down gracefully if

the user zooms in and out.

Most browsers (with the exception of IE6) now accommodate font

sizes set in pixels when zooming in and out, so, if you are not into

doing the math to keep up with using ems, you are increasingly safe

using pixels.

236
Exljbris Font Foundry

j o s b u i ve n g a. d e m on . n l

Jos Buivenga provides nine excellent fonts that

you can use as downloadable fonts on your Web

site. I used Fontin Sans as an example for the

voxLibris site.

237
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Styling Text
Because styles are inherited, the first place to set your default
typographic styles (or to change them from the browser defaults)
is in the body, input, and select HTML selectors. This will
set your defaults over the entire page, so you will only need to
set these properties again if you want to change them for a
specific element.

Headers
Headers are commonly differentiated through font family, color,
size, and weight. You might also want to add some letter or word
spacing , but use those styles sparingly—a little goes a long way.

01 When setting header styles, it’s best to set all of the com-
mon styles first (05).

02 Set differentiating styles (usually size) for each individually

(10–13).

03 Set styles for specific instances using contextual styles—for

example, how the level 2 header should be treated if it’s in
column 1 rather than column 3 (14).

238
01 body, input, select { 10 h1 { font-size: 2.5em; }
02 font-size: 100%; 11 h2 { font-size: 2em; }
03 color: rgb(105,105,105); 12 h3 { font-size: 1.25em; }
04 font-family: “fontin sans”, optima, candara, 13 h4, h5, h6 { font-size: 1em; }
“trebuchet-MS”, sans-serif; } 14 #column1 .sidebar h2 {
05 h1, h2, h3, h4, h5, h6 { 15 font-variant: small-caps;
06 color: rgb(128,128,128); 16 color: red; }
07 font-family: garamond, cochin, cambria, times, 17 #column3 h2 {
serif; 18 font-size: 1.5em;
08 letter-spacing: 1px; 19 text-align: center;
09 font-weight: normal; } 20 text-transform: uppercase;
21 padding-top: 35px;
22 color: rgb(255,255,255); }

239
SPEA KIN G L I KE A N ATI V E
T YPO G R AP HY

Styling Text continued

Paragraph and Block Quotes

If you set your base styles in the body HTML selector, generally
there’s not a lot of work to do for the paragraph tags (<p>) and
block quote (<blockquote>) tags.

 For paragraphs, you may want to make the text a bit smaller
than the standard, set margins above and below, and I always
recommend opening up the line height to at least 1.25 line
spacing (125%) or higher.

 For block quotes, you may also want to set a border, back-
ground color, or background image to set the quote off from
other text on the page.

Lists
You can also use the Typographically, lists are indented and often have a lower line
list tag to create a height than paragraphs. Additional, you can set the bullet style,
menu or controls, as
either choosing one of the predefined bullet styles or creating
shown in Chapter 10,
“Navigation.” your own image for the bullet. You might think that using the
list-image property is the easiest way to do that, but that’s not
common practice. Using a background image gives a lot more
versatility.

240
01 p {
02 text-align: left;
03 font-size: .75em;
04 margin: 5px 0;
05 line-height: 1.5; }
06 blockquote {
07 font-size: .75em;
08 margin: 10px 0;
09 border: 1px solid rgb(128,128,128);
10 line-height: 1; }

  

01 li {
02 font-size: .75em;
03 margin: 5px 0;
04 line-height: 1; }
05 ul li {
06 list-style: none;
07 list-style-position: inside;
08 background: transparent url(../_images/
flourish-left.png) no-repeat 0 center;
09 padding: 25px; }

241
Hypertext links allow you to jump around a Web page, a Web
site, or the entire Web. All links, whether internal or external,
are created using the anchor tag (<a>) to link an image or text
to another location. However, different types of links should be
styled differently.

Hypertext links in a block of text generally have a different

emphasis than site navigation, while buttons are used to high-
light specific functionality. CSS provides us with an easy way to
take a single HTML tag and give it a multitude of looks based
on its context.

CHAPTER 10
Navigation
SP EA KI NG LI K E A NAT IV E
N AV I G AT I O N

CSS Sprites
All navigation in a Web browser, whether a hypertext link or
a menu option, relies on the anchor tag (a). This tag has four
distinct states accessed through the link pseudo-classes: a:link,
a:visited, a:hover, and a:active. An effective way of showing the
change in states is swapping the background image. However,
image swapping has two important shortcomings:

01 Download time  Each image requires a separate file

download, and the more files downloaded the longer your
page takes to display.

02 Image flashing  Images are downloaded as needed, so the

link images associated are not downloaded until the user
interacts with the page. This can cause a delay the first time
the image is needed.

To overcome these problems, developers use a technique called

CSS sprites, placing all four link state images into a single image
file and then using background positioning to move the back-
ground around within the text box boundaries. The unneeded
images are waiting and ready but cropped from view by the ele-
ments text box.

Rijksmuseum
ww w.r ijk sm u seu m .n l

The Web site for the Dutch Rijksmuseum uses

an innovative combination of navigation tech-

niques, including horizontal and vertical menus.

244
background: transparent 0 px
url(../_images/icon-pointer-sprite.png) 25 px
no-repeat right 0;
height: 15px; 50 px
_height: 20px; 75 px
padding: 0 40px 5px 0;
icon-pointer-sprite.png

Link
background-position: right 0; Read More

Visited
background-position: right -25px; Read More

Hover
background-position: right -50px; Read More

Active
background-position: right -75px; Read More

245
SP EA KI NG LI K E A NAT IV E
N AV I G AT I O N

Links
Remember to style links not only for how they will appear when
the page first loads, but also for the different states they have as
the user interacts with them. You should style each of the four
link states separately. In addition, since all links are controlled
through the same HTML tag, it’s important to differentiate their
styles based on context.

For voxLibris, a default style has been set up to turn underlin-

ing off in all four states and then to set a color for all four of the
states (01–08). You can set other styles, of course, but color is the
most common way to differentiate link states.

If the link is in a paragraph, styles are also

Should Links Be Underlined?
included to add a background image—one
Traditionally, hypertext links have been under- that mimics a highlight marker—that dif-
lined to help them stand out. Underlining is a ferentiates these links from others, such as
typographically unattractive way of highlight- those in the navigation menu and genre
ing links, however, in part because the line list (12–15).
color is the same as the text color, creating Links can also be given the class readmore
visual clutter. within a paragraph to be given special
treatment using CSS sprites as described in
There are many alternatives to using the
the previous section (16–28).
underline style for links, such as using a

background color or image, as shown in

voxLibris.

If you do want links underlined, a better

alternative to the underline style is to use a

border-bottom property. This creates an effect

similar to underlining the link, but you can

control the color, thickness, and style of the

line, allowing for a more sublime design.

246
01 /*---------------------------------------------------------------------
02 Links - Defaults
03 ---------------------------------------------------------------------*/
04 a { text-decoration: none; }
05 a:link { color: rgb(0,85,126); }
06 a:visited { color: rgb(0,50,75); }
07 a:hover { color: rgb(0,170,255); }
08 a:active { color: rgb(255,215,0); }

09 /*---------------------------------------------------------------------
10 Links - Paragraph
11 ---------------------------------------------------------------------*/
12 p a:link, p a:visited {
13 background: transparent
url(../_images/bg-p-a-link.png)
repeat-x 0 -2px; }
14 p a:hover {
background-position: -20px -2px; }
15 p a:active { background-image: none; }
16 p a.readmore {
17 position: relative;
18 background: transparent
url(../_images/icon-pointer-sprite.png)
no-repeat right 0;
19 padding: 0 40px 5px 0;
20 _background: none; }
21 p a.readmore:link {
22 background-position: right 0; }
23 p a.readmore:visited {
24 background-position: right -25px; }
25 p a.readmore:hover {
26 background-position: right -50px; }
27 p a.readmore:active {
28 background-position: right -75px; }

247
SP EA KI NG LI K E A NAT IV E
N AV I G AT I O N

Menus
Menus are a list of links that allow the user to navigate sections
and sub-sections within a Web site. Although the links could
simply be grouped together, it’s better to use the list tag (<li>) to
show their relationship. Navigation links also use the anchor tag,
but some different styles should be added to differentiate them.
Whether the top level (sometimes called “global”) navigation
menus run horizontally or vertically, it’s imperative that they are
clear and easy to identify.

 Horizontal menus generally run down the left column

of the page, providing top level navigation for the Web
site (29–36).

 Vertical menus built from a list of links are floated next to

each other, generally somewhere at the top of the page above
or below the header. Vertical menus also tend to be placed
on the footer ostensibly as backup navigation, but actually
because it improves search engine optimization (37–46).

248
29 /*---------------------------------------------------------------------
30 Menus
31 ---------------------------------------------------------------------*/
32 #menumain ul.menu li {
33 display: block;
34 padding: 5px 0;
35 border-top: 1px solid rgb(192,192,192);
36 width: 100%; }

37 /*---------------------------------------------------------------------
38 Menu - Footer
39 ---------------------------------------------------------------------*/
40 #footer ul.menu li {
41 float: left;
42 padding: 3px 20px;
43 margin: 0;
44 background: none;
45 border-left: 1px solid rgb(128,128,128); }
46 #footer ul.menu li a:link,#footer ul.menu li a:visited {
color: rgb(105,105,105); }

249
SP EA KI NG LI K E A NAT IV E
N AV I G AT I O N

UXBooth

u x b oot h . c om

UXBooth—a Web site

that offers free usabil-

ity reviews and articles

about user experience

on the Web—uses

a horizontal menu

placed clearly across

the top of the page.

250
Tw i s to r i

t wi s to r i .c om

Twistori scrolls a feed of Tweets that include the

keywords love, hate, think, believe, feel, and

wish. You can switch between keywords using

the vertical menu.

251
SP EA KI NG LI K E A NAT IV E
N AV I G AT I O N

Buttons
Buttons are used to highlight important content on a site that
may not fit into a global menu.

voxLibris has buttons for each of the genres it covers (50–68

and 95–118). Rather than simply placing an image tag in the
HTML—which limits future design possibilities—each button
has an ID associated with it to load a specific background image,
which is placed into the list tag with some design enhancements
using border-radius and box-shadow. The final trick is to move the
caption text underneath the button image by setting the top mar-
gin in the list tag to 50px.

On top of this (literally), in the anchor tag, a transparent PNG

background is used to create a gel effect, so that the button looks
like it has a glossy top (69–91). To avoid
trouble, I’m turning this off in IE6 with
_background: none;.

252
47 /*---------------------------------------------------------------------
48 Article 1 - Genre List
49 ---------------------------------------------------------------------*/
50 #genrelist .genrelistbuttons { list-style: none; }
51 #genrelist .genrelistbuttons li {
52 background: none;
53 height: auto;
54 padding: 0;
55 font-size: .875em;
56 float: left;
57 text-align: center;
58 background: rgb(105,105,105)
url(../_images/genreicons/icon-adventure.jpg)
no-repeat center center; 92 /*---------------------------------------------------------------------
59 display: block; 93 Article 1 - Genre List - Icons
60 width: 100px; 94 ---------------------------------------------------------------------*/
61 height: 100px; 95 #genrelist .genrelistbuttons li.genre-adventure {
62 margin: 15px 15px 50px 0; 96 background-image: url(../_images/genreicons/
63 -webkit-border-radius: 10px; icon-adventure.jpg); }
64 -moz-border-radius: 10px; 97 #genrelist .genrelistbuttons li.genre-anthropology {
65 border-radius: 10px; 98 background-image: url(../_images/genreicons/
66 -webkit-box-shadow: rgb(0,0,0) 0 0 5px; icon-anthropology.jpg); }
67 -moz-box-shadow: rgb(0,0,0) 0 0 5px; 99 #genrelist .genrelistbuttons li.genre-children {
68 box-shadow: rgb(0,0,0) 0 0 5px; } 100 background-image: url(../_images/genreicons/
icon-children.jpg); }
69 #genrelist .genrelistbuttons li a {
101 #genrelist .genrelistbuttons li.genre-epic {
70 display: block;
102 background-image: url(../_images/genreicons/
71 opacity: 1; icon-epic.jpg); }
72 width: 100%; 103 #genrelist .genrelistbuttons li.genre-fantasy {
73 background: transparent 104 background-image: url(../_images/genreicons/
url(../_images/button-gel-100.png) icon-fantasy.jpg); }
no-repeat 0 0;
105 #genrelist .genrelistbuttons li.genre-history {
74 _background: none;
106 background-image: url(../_images/genreicons/
75 padding-top: 105px; icon-history.jpg); }
76 color: rgb(169,169,169); 107 #genrelist .genrelistbuttons li.genre-humor {
77 -webkit-border-radius: 10px; 108 background-image: url(../_images/genreicons/
78 -moz-border-radius: 10px; icon-humor.jpg); }
79 border-radius: 10px; } 109 #genrelist .genrelistbuttons li.genre-medical {
80 #genrelist .genrelistbuttons li a em { 110 background-image: url(../_images/genreicons/
81 display: block; icon-medical.jpg); }
82 margin-bottom: 5px; 111 #genrelist .genrelistbuttons li.genre-mystery {
83 font-style: normal; 112 background-image: url(../_images/genreicons/
84 line-height: 1; icon-mystery.jpg); }
85 font-size: 1.25em; 113 #genrelist .genrelistbuttons li.genre-philosophy {
86 color: rgb(105,105,105); 114 background-image: url(../_images/genreicons/
87 font-family: icon-philosophy.jpg); }
garamond, cochin, cambria, times, serif; } 115 #genrelist .genrelistbuttons li.genre-romance {
88 #genrelist .genrelistbuttons li a:hover { 116 background-image: url(../_images/genreicons/
89 opacity: .6; icon-romance.jpg); }
90 border-color: rgb(0,170,255); 117 #genrelist .genrelistbuttons li.genre-scifi {
91 color: rgb(0,0,0); } 118 background-image: url(../_images/genreicons/
icon-scifi.jpg); }

253
SP EA KI NG LI K E A NAT IV E
N AV I G AT I O N

Using Design Enhancements

Just because a browser does not support a

particular property does not mean you shouldn’t

use it—as long as it does not interfere with the

other browsers.

For example, in the three cases here, the but-

tons are displayed and easily accessible. FF3,

which supports border-radius, has rounded cor-

ners, Sa4, which supports both box-shadow and

border-radius has rounded corners and a drop

shadow. Compare these two versions to IE8,

which does not support either of the properties.

The buttons are still just as usable, but not quite

as slick looking.

You could use images to create the same look

and feel in all three browsers, but CSS design

enhancements provide several advantages:

Easy to change—Design changes can be made

directly in the CSS without having to recut

images.

Design flexibility—Design elements like drop

shadows and rounded corners are difficult

to achieve with images.

Smaller files sizes—CSS code will generally

download faster than an image file.

Future compatibility—All of these styles will be

standard on all browsers in the future, but

the kludge you used to get an image solu-

tion to work now may not work later.

254
CSS3.info

c ss3 .i nfo

Learn about the latest

advances in CSS Level

3 with a designer’s per-

spective. At CSS3.info,

you can get a design-

er’s perspective on the

latest advances in CSS

Level 3. It takes the

W3C jargon and makes

it comprehensible.

255
The chrome (or “skin”) of a Web page is made up of the visual ele-
ments that give it its look and feel. Using backgrounds, you can
add visual elements to your page to frame and highlight the con-
tent of your Web page and guide the user’s eye around.

Although images are often thought to be embedded directly

into the page using the <img> tag, this severely limits the versatil-
ity of your designs by hard coding the images into the structure.
Instead, most Web designs place all graphic interface element
on the page using the CSS background property, and reserve
the HTML image tag strictly for content such as photos, illustra-
tions, and figures.

CHAPTER 11
Chrome
SP EA KI NG LI K E A NAT IV E
CHRO M E

Using Transparent Images

The PNG image format is now standard on all Web browsers,
allowing you to include an alpha channel in images. You can have
areas in your image with an opacity anywhere between 0% and
100%. Rounded corners, drop shadows, or any non-rectangular
shapes (such as text) can be used against any background.
This differs from GIF transparency where the pixels are either
visible or not.

Create PNG images using most standard image editing software

(such as Photoshop or Fireworks). There are three different PNG
formats, varying in image quality and file size:

 PNG-8: Works a lot like the GIF format, indexing all of the
colors in the image down to a maximum of 256.
Support: Fireworks and Photoshop, although Photoshop
does not include the alpha channel indexed transparency,
where a color is either visible or 100% transparent.

 PNG-24: Works like JPEG, producing higher quality

images with color shifts. However, for images like photo-
graphs, PNG-24 tends to create larger images than JPEG.
Support: Photoshop and Fireworks, although Fireworks
does not support the alpha channel.

 PNG-32: An even higher-quality image format than PNG-

24, but it creates larger files.
Support: Fireworks.
ColourLovers

c olo u rlove r s. c om

Looking for colorful inspiration? Check out

ColourLovers, a design community centered

around following color trends.

258
Transparent PNG Transparent GIF

259
SP EA KI NG LI K E A NAT IV E
CHRO M E

Using Transparent Images continued

Fixing Transparent PNGs

in IE6
To learn more about The downside to transparent PNGs is IE6. Although it displays
the underscore hack
PNG images, it does not automatically display them as transpar-
see Appendix C, “Fixing
Internet Explorer.”
ent. Instead, you have to disable the background property and
then use a special filter to load the image.

For example, to use the voxLibris logo on a gradient background,

save it on a transparent PNG, and use it as a background image:

background: transparent url(../_images/logo-voxlibris.png)

no-repeat 0 0;

In IE6, this will appear with a gray background where the image
should be transparent. Now add the following code immediately
underneath in the CSS rule:

_background: none;
Fixing The Fix
_filter: progid:DXImageTransform.
Use this trick sparingly. There are some prob- Microsoft.AlphaImageLoader
lems with links and form fields if they are on (src="../_images/logo-voxlibris.png",
any part of the transparent area of a PNG sizingMethod="crop");
image; they simply will not work. To fix this Now the transparent PNG will appear as
problem, you need to set positioning for that expected using the AlphaImageLoader
link or form element: a { position: relative; }. and the underscore hack to hide this from
other browsers. You have two options for
Using the AlphaImageLoader can also slow
the sizing method: crop and scale. Crop will
down the page loading in IE6. An alternative
show the image once, while scale stretches
is to always use PNG-8 images for the back-
the image to fill the area. You cannot tile
ground and no AlphaImageLoader, but these
backgrounds with the AlphaImageLoader.
will not look quite as good in IE6.

260
background: transparent url(../_images/logo-voxlibris.png)
no-repeat 0 0;

_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="../_images/logo-voxlibris.png", sizingMethod="crop");

261
SP EA KI NG LI K E A NAT IV E
CHRO M E

Defining the Grid

Although the grid of columns and rows is created in the layout, it
is often visually defined using background colors and images. This
bg-body.png
includes a background for the body of the document and then
different backgrounds to separate the different grid elements.

Columns
Designers often prefer balanced columns—that is, columns that
appear to be the same height. One of the drawbacks of layout
bg-page.png with CSS is that you cannot bind column heights together, so,
invariably, one column will be shorter than the others.

A common workaround for this problem is to visually define

columns using a background image placed in the page element,
which is the parent element to all of the column, and will thus
stretch the height of the tallest column in it as long as you
remember to put the <br style="alignclear" /> before the closing
</div> tag as described in Chapter 8.

For voxLibris, the right column (#aside2) is visually defined by

a dark cloth pattern in the page element background (#page),
different from the speckled paper pattern of the larger left side,
which includes both the left column (#aside1) and center column
(#article1).

262
01 /*---------------------------------------------------------------------
02 Chrome - Grid
03 ---------------------------------------------------------------------*/
04 body { background: rgb(0,50,75)
url(../_images/bg-body.png) repeat 0 0; }
05 #page {
06 background: transparent
url(../_images/bg-page.png) repeat-y 0 0;
07 padding: 0 16px;
08 _background: none;
09 _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="../_images/bg-page.png", sizingMethod="scale"); }

263
SP EA KI NG LI K E A NAT IV E
CHRO M E

Defining the Grid continued

Rows
Rows stretch horizontally across the area defined across the page
area and can be visually defined with a solid color background
bg-header.png
color or background image. If you use a gradient, then you may
want to have it only repeat horizontally (repeat-x) so that the gra-
dient doesn’t create a repeating pattern, but make sure to set the
bottom color in your gradient as the background color for the
row so that there is a smooth color transition.

The voxLibris header and footer use the same repeating gradient
image (bg-header.png) as the background. I opted to reuse
the same image in both. Different images could have been used,
but since they have the same appearance, this reduces the number
of images that have to be downloaded, thus speeding up the
page display.

264
10 #header, #footer { background: transparent
url(../_images/bg-header.png) repeat-x 0 0; }
11 #footer { background-position: 0 bottom; }

265
SP EA KI NG LI K E A NAT IV E
CHRO M E

Logos and Forms

Logos
Text replacement is any process where HTML is replaced by an
image. There are several ways to achieve text replacement, but the
logo-voxlibris.png best is to use the text in a background image, in an element that
includes the text in the HTML.

Begin by specifying the width and height of the element that will
contain your graphic text. Set the background image source to
the image with the text. Then set the line height to three times
the height of the element and set overflow to hidden, so all text is
pushed out of the box and will not be displayed.

The voxLibris logo uses the Fontin Sans font, which is not a stan-
dard font, so we’ll need to put it into a graphic. We’ll use the level
1 header tag in the #header to create the logo, including the text
“voxLibris”. Set the width and height to be the same as the image
and then triple the line height.

Forms
Form elements are often overlooked as an important element to
skin. Most browsers have a default style for form elements that is,
to be polite, hideously ugly, especially if the rest of the site is well
bg-grad01.png
designed.

For voxLibris, simple gradient, border, and font size changes are
all that are needed to spruce up the form fields.

266
12 /*---------------------------------------------------------------------
13 Chrome - Header - voxLIBRIS logo
14 ---------------------------------------------------------------------*/
15 #header h1 {
16 position: absolute;
17 left: 0;
18 bottom: -2px;
19 width: 306px;
20 height: 66px;
21 line-height: 188px;
22 overflow: hidden;
23 background: transparent
url(../_images/logo-voxlibris.png)
no-repeat 0 0;
24 _background: none;
25 _filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=’../_images/logo-
voxlibris.png’, sizingMethod=’crop’);}

26 /*---------------------------------------------------------------------
27 Chrome - Header - Search
28 --------------------------------------------------------------------*/
29 #header .search input, #header .search select {
30 background: transparent
url(../_images/bg-grad01.png) repeat-x
center center;
31 border: 1px solid rgb(102,102,102);
32 height: 25px;
33 width: 200px;
34 font-size: 1.2em;
35 padding: 0 10px;
36 margin-bottom: 5px;
37 -moz-border-radius: 5px;
38 -webkit-border-radius: 5px;
39 border-radius: 5px; }
40 #header .search select {
41 background-image:
url(../_images/bg-grad01.png);
42 padding-right: 0; }

267
SP EA KI NG LI K E A NAT IV E
CHRO M E

Defining Sections
Sections and modules will often have specialized backgrounds to
set them off from surrounding content. The module will have a
header and footer to cap a central content area whose height will
stretch as needed.

 Footer: The background cap for the module is set in the

background for the entire module, with its position set to
bg-sidebar1-head.png bottom.
bg-sidebar1-mid.png  Header: The header cap image is added to a level 2 header
bg-sidebar1-foot.png tag, with no repeating. This also means that the amount of
content for the header text is limited to the height of the
background image.

 Content: A special class is added around the content of the

module and a background repeated vertically behind that.

Since transparent PNGs are used for all three backgrounds, the
background color is set to transparent.

Alternate Version for Ads

You can also create variations on this module, as is the case with
the voxLibris’s ad module, simply by changing the background
image source.

bg-ad-head.png
bg-ad-mid.png
bg-ad-foot.png

268
43 /*---------------------------------------------------------------------
44 Chrome - Aside 1 - Section
45 ---------------------------------------------------------------------*/
46 #aside1 .section {
47 background: transparent
url(../_images/bg-sidebar1-foot.png)
no-repeat 0 bottom; }
48 #aside1 .section h2 {
49 background: transparent
url(../_images/bg-sidebar1-head.png)
no-repeat 0 0;
50 text-align: left;
51 max-height: 136px;
52 overflow; hidden;
53 font-variant: small-caps;
54 color: red; }
55 #aside1 .section div.content {
56 background: transparent
url(../_images/bg-sidebar1-mid.png) repeat-y
0 0; }
57 #aside1 .section p, #aside1 .section ul {
58 list-style-position: inside;
59 list-style-type: none;}
60 /*---------------------------------------------------------------------
61 Chrome - Aside 1 - Ads
62 ---------------------------------------------------------------------*/
63 #aside1 .ads {
64 background-image:
url(../_images/bg-ads-foot.png); }
65
66 #aside1 .ads h2 {
67 background-image:
url(../_images/bg-ads-head.png); }
68
69 #aside1 .ads div.content {
70 background-image:
url(../_images/bg-ads-mid.png); }
71
72 #aside1 .ads p {
73 color: rgb(0,0,0);
74 padding: 10px 80px; }

269
SP EA KI NG LI K E A NAT IV E
CHRO M E

Defining Sections continued

Final Flourishes
Another way to define sections on the page is to add rules and
flourishes that guide the visitor’s eye to important locations.
flourish-up.png
Flourishes can take a number of forms but should fit with the
general appearance of your design.
flourish-down.png
The flourishes in the voxLibris article1 section are similar to those
in the logo and in other areas throughout the page. They are
added in the backgrounds of the section and the headlines to give
a top and bottom treatment.

Should I Use a Class or an ID?

In Chapter 4, I discussed the difference between

a class and an ID—an ID is used to identify a

specific element on the screen for specific place-

ment or for control by JavaScript. Still, it can be

tough sometimes to determine which elements

should use an ID and which should use a class.

If you will be reusing a style or are likely to reuse

a style, use a class. For example, in voxLibris,

#article1 is an ID because it is being used to

define the central content element, and will only

ever appear once on a page. However, .ads is

a class even though there is only one element

tagged with ads. It’s possible that there may be

multiple ad blocks included on a page, even if

there are not on this page.

270
75 /*---------------------------------------------------------------------
76 Chrome - Article
77 ---------------------------------------------------------------------*/
78 #article1 .section h1 {
79 padding-top: 30px;
80 text-transform: uppercase;
81 text-align: center;
82 background: transparent
url(../_images/flourish-up.png) no-repeat
center top;
83 _background: none; }
84 #article1 .section {
85 background-position: bottom center;
86 padding-bottom: 50px;
87 margin-bottom: 3px;
88 background: transparent
url(../_images/flourish-up.png) no-repeat
center bottom;
89 _background: none;}
90 #article1 .section h2 {
91 font-variant: small-caps;
92 margin: 3px 0 30px 0;
93 height: 35px;
94 background: transparent
url(../_images/flourish-down.png) no-repeat
center 3px;
95 border-top: 1px solid rgb(128,128,128);
96 _background: none; }
97 #article1 .section h3 {
98 font-family: "fontin sans", optima, candara,
"trebuchet-MS", sans-serif;
99 height: 50px;
100 margin-top: 20px; }
101 #article1 .section p {
102 margin-bottom: 20px; }
103 #article1 ul li {
104 list-style: none;
105 list-style-position: inside;
106 background: transparent
url(../_images/flourish-left.png) no-repeat 0
center;
107 padding: 10px 25px;
108 _background: none; }

271
That’s about it. If you’ve read this book front to back, you should
now understand the fundamentals of CSS—how to speak it and
how to understand it. Like any language, there is always more to
learn—nuances that turns humdrum prose into compelling poetry.

In this last chapter, I want to offer a few parting words about the
state of CSS and to review some of the best practices I’ve stressed
throughout the book.

CHAPTER 12
The Last Word
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

CSS Validation
I’ve mentioned throughout this book that CSS is a standard cre-
ated by the World Wide Web Consortium (W3C), and that the
browser manufacturers then interpret this standard—with vary-
ing degrees of success—to create their products. In theory, since
there is an accepted standard CSS, there is “perfect” CSS code
that exactly follows these standards.

The W3C has created a Web site that will validate your CSS
code, checking that it adheres to the W3C specified CSS stan-
dard. To use the W3C Validation Service:

01 Visit jigsaw.w3.org/css-validator/.

02 Enter a URL, upload a file, or enter your CSS directly.

03 Click the Check button.

04 Hold your breath while waiting to see whether or not your

code is valid. Any errors in your code will be highlighted by
line number, showing the exact problem.

If there are problems, don’t sweat it. First check what the errors
are. Some of the “hacks” we use to create Web sites that work
cross-browser will cause errors, even though they do not interfere
with the page displaying.

Good

goo d. is

Good is an online and print-based magazine

devoted to people who “give a damn.”

274
Designing for Web Standards?
Standards are important. The closer we can get to ideal CSS, the
better it is for everybody. If we could simply code to the CSS
standard and know our designs would display the same way in all
browsers, what a wonderful world it would be.

That’s not the world we live in.

In our world, we have to deal with multiple browsers that conflict

with each other. Writing code that meets the strict W3C stan-
dards is all fine and good, but completely unrealistic if you expect
your code to actually work. The fact is most CSS code on the
Web will not validate, because working designers have to be more
concerned with making their Web pages look right across mul-
tiple browsers than with meeting some perfect code ideal. Many
of the techniques I’ve shown you for getting your code to work
cross-browser, such as the underscore hack to get IE6 to play nice
with widths and padding, will not validate.

I recommend validating your CSS code as a last step in the QA

process, to help you find any true errors in your code that you
need to fix. But look closely at the errors raised. Make sure it is
not simply flagging code you are using to
get your designs to work cross-browser. HTML Validation

It is far more important that your code Although “errors” in your CSS can be accept-
works, is fast, and is easy to edit than it is able if you need to include code for IE6,
for it to be valid according to the W3C. errors in your HTML can be the cause of

many browser “quirks” that will cause prob-

lems with your designs.

Validate your HTML code at validator.w3.org.

275
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

W3C CSS Validation Ser vice

j igsaw. w 3. or g / css - va l ida tor

Provided free of charge, the CSS Validation

Service will prowl through your code to find

deviations from the CSS standards. But beware:

It will show errors if you use common tricks like

the underscore hack or design enhancements

like -webkit-box-shadow, so take the results with

a grain of salt.

276
CSS Import

cssimpo r t . co m

If you are looking for a well-designed site, check

out CSS Import, which highlights the best CSS

design from around the Web. Don’t expect any

of these sites to pass muster with the strict W3C

CSS Validation Service.

277
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

CSS Frameworks
A CSS framework is a library of generic styles that can be easily
applied to most Web designs. They come in the form of pre-built
external style sheets that package ready-made design solutions for
common elements such as headers, columns, footers, and sections.
Using a CSS framework allows designers quick and easy access to
well tested, cross-browser compatible, and standards-compliant
CSS code. This tends to speed development of better code.

On the downside, when you use a CSS framework you import

code that you may or may not use, but which will increase
download time. In addition, you are relying on pre-built code
that might limit your design choices. There are a wide variety
of CSS frameworks, so choosing one will depend on what you
need it to do.

Here are some popular CSS frameworks to get you started:

Blueprint  Provides a solid layout grid, typographic controls,
and a style sheet for printing. Link: blueprintcss.org
Emastic  Uses ems to create elastic layouts.
Link: code.google.com/p/emastic
Typogridphy  Uses 12- and 16-column grids at 960px wide
and typographic style rules for “creating vertical rhythm.”
Link: csswizardry.com/typogridphy/
YAML  “Yet Another Multicolumn Layout” provides flexible
multi-column layouts that are easy to edit and modify.
Link: yaml.de
YUI Grids  Yahoo’s CSS Grids framework provides fixed and
fluid layouts. Link: developer.yahoo.com/yui/grids

278
Creating Your Own
CSS Frameworks
If you are working in an environment where multiple sources
are creating your Web content, you need a common library of
styles. To facilitate a consistent layout, you can create your own
CSS framework, often simple editorial styles, that the group then
shares and can apply to their content. This also helps prevent
writers or editors from adding inline or embedded styles when
they need a particular style.

Beyond standard CSS best practices, there are a few things to

keep in mind when creating your own CSS framework:

 Use a class name prefix to ensure that your framework

will not conflict with other classes.
Add a three- to six-letter prefix before all framework classes
to ensure they do not conflict with other styles.

 Keep the rules as generic as possible.

These styles should provide bare-bones styling so as not to
interfere with other site-wide styles.

 Provide styles for common layout elements such as

columns, drop-boxes, article excerpts, small print, and
image captions.
Framework styles should be used primarily for layout and for
creating commonly used editorial styles.

279
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

CSS for Other Media

Mobile Devices
Setting the media Mobile devices are a popular way to access the Web, but not
type is explained
particularly good for displaying Web pages designed for larger
in the “Media” sec-
tion of Chapter 5,
screens. Fortunately, CSS allows you to set style sheets specifically
“Semantics.” for mobile screens, but you need to keep a few things in mind
when creating mobile designs:

 Use a single column with no horizontal scrolling.

Most mobile devices have a portrait rather than landscape
orientation, which limits horizontal design.

 Provide constant top level navigation and hide

secondary navigation.
Many mobile devices have little or no built-in browser navi-
gation, so the designer needs to include back buttons as well
as top level navigation. You do not need a complete index of
the site, though, since mobile devices often require the user
to navigate through all links in order to select one of them.

 Minimize the use of foreground and background images.

Although images might be a necessary part of the content,
it’s better to provide links to larger images and eliminate any
background images altogether. This makes pages faster to
load and easier to read on small screens.

 Keep the design simple.

Simple, well-structured pages will be much easier to use on
small mobile screens.

280
Print
Viewing a printed Web page is a very different experience than
viewing it on a screen (even a small screen). Paper, by its very
nature, is not hyper-textual. However, paper is more portable and
cheaper than a computer, and many of your visitors will opt to
print Web pages rather than reading them on the screen. To that
end, you should adapt your designs for print:

 Hide navigation and ads.

No matter how hard you press on the piece of paper, it will
not jump to another piece of paper. So all linked elements
should be hidden by using display: none.

 Consider colors and images carefully.

Remember that what looks good on the screen doesn’t nec-
essarily look good when printed.

 Do not rely on background images for layout or bullets.

Many people will turn background images off, so do not
assume those images will print.

 Use point sizes for font sizes.

Although not preferred for screen layout, point sizes are per-
fect for print.

 Allow maximum width for important content.

Columns on printed pages should allow the maximum read-
ing area for important content.

 Display custom content such as link URLs and footers.

Since the reader may not have the URLs listed, set up your
pages to list any link URLs either at the end of the article or
next to the links in context.

281
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

CSS Best Practices

Throughout this book, I have attempted to present the vast range
of techniques possible with CSS, knowing that the future of
Web design with CSS is not in what we know how to do now,
but in what we will learn to do in the future. That said, there are
many well-tested techniques that are widely accepted as CSS best
practices. Many of these best practices have more to do with the
limitation of the medium and browsers than they do with good
design practice, but knowing them can speed your development
process and lead to better designs.

General
External style sheets  Use external style sheets.
are explained in
The power of using CSS comes in its ability to make a single
“Where to Put Style
Rules” in Chapter 5,
change that effects an entire Web site. This power is only
“Semantics.” possible, though, when styles are collected into external style
sheet files.

 Use <link> for speed and @import for flexibility.

@import has the advantage that it can be used equally
well in both HTML documents and external CSS files.
Unfortunately there are issues in IE—styles imported using
@import will not load until after the content, causing a delay
in page loading. If you notice problems with pages loading,
use <link> instead of @import.
Screen, print, and  Link to CSS for screen, print, and handheld media.
handheld media are
CSS should be used to tailor the content for each output
explained in“Media”
in Chapter 5, media. Designers need to consider how the page will look
“Semantics.” when printed or viewed on handheld devices.

282
 Avoid inline styles.
Inline styles cannot be overridden, making it impossible to
change whatever styles they set and limiting design flexibil-
ity. Inline styles also increase the code-to-text ratio, dimin-
ishing search engine optimization (SEO) and lowering your
ranking in many search engines.

 Avoid embedded styles in the body.

When placed in the body, embedded styles often render
after the page content has loaded, causing an unattractive re-
rendering of the page. They can also be difficult to override,
difficult to find and edit, and can increase the code-to-text
ratio, diminishing SEO.

 If you have to use embedded styles, add them only in the

<head> and keep them brief.
Although styles embedded in the <head> of the document
will be rendered before the content is displayed, they limit
design flexibility and will add more code, diminishing SEO.

 Avoid !important. !important

is explained
Although a useful tool during development and prototyping
in“Importance”
of your site, making a declaration important reduces design in Chapter 5,
flexibility and can often be confusing for later developers “Semantics.”
who may need to override the style.

 Use concise, meaningful classes and IDs.

Avoid using names that describe the style being applied,
as this will cause problems if those styles need to change.
Instead, use names that describe the function of the class or
ID. For example, instead of naming a class redtext, name it
hilight or hilighterror.

283
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

CSS Best Practices continued

Design
 Use <img> tags for image content (photos, illustrations,
diagrams, and so on), not for your interface.
Placing an image in your HTML means that it cannot be
easily styled or changed. Virtually all interface chrome—
including icons, logos, controls, and buttons—can be added
to the interface using background images in your CSS. This
will cut down on the amount of code in your HTML, which
is better for SEO, and allow for greater versatility when
redesigning.

 HTML should never be used for style, only for structure.

HTML is intended to structure the page.
Placing tags such as <b> or <i> specify a particular style
rather than structure. Instead use tags that add as few
browser styles as possible, for example <strong> and <em>.
For a quick fix to  Avoid using padding and borders for fixed-dimension
the box model prob-
elements.
lem, see “Fixing
IE6” in Chapter 6,
Problems with the IE6 implementation of the box model
“Vocabulary.” mean that padding and borders can be a hassle to deal with
in any element with a fixed width and/or height. Try adding
padding or margins to nested elements instead.
Use CSS sprites to  Use CSS sprites for buttons and controls.
add backgrounds to
CSS sprites allow you to download fewer images and avoid
links, as described
in Chapter 10, the annoying “flash” as images load during link state changes.
“Navigation” in the
section “CSS Sprites.”

284
Coding
 Add comments to your CSS wherever possible to help Comments are
explained in the sec-
explain what’s going on.
tion “Adding Notes to
Notes can be added as a last step in development, but should CSS” in Chapter 5,
be included to help future designers and developers. “Semantics.”

 Always add a semicolon at the end of every declaration.

Even if it is the last CSS rule in the list, add the semicolon to
avoid future aggravation.

 Specify units except for 0. For details about

0 is zero no matter what the unit, but in most cases a unit values in CSS, see
is needed. line-height and opacity are the two exceptions Appendix B, “CSS
Values.”
whose values do not have units.

 Use RGB values for colors.

Although colors can be defined in a variety of ways in CSS,
RGB values provide a broader gamut and are easier to
change using JavaScript.

 Use ems for all sizes or ems for font sizing, pixels for
absolute sizes, and percentages for relative sizes.
There is an ongoing debate as to whether ems or pixels are
better for creating Web designs. If you choose to go with all
ems, you need to become familiar with a good pixel-to-em
calculator, like Em Calculator (riddle.pl/emcalc).

 Limit the scope of rules.

Using IDs and classes, you can ensure that styles are only
applied where you want them and don’t “leak” over into
other areas or cause style conflicts.

285
SP EA KI NG LI K E A NAT IV E
THE L AST WORD

CSS Best Practices continued

Optimizing
 Use CSS property shortcuts wherever possible.
Many CSS properties can be combined into a single prop-
erty using a shortcut. For example,
border-top:5px; border-right:5px;
border-bottom:1px; border-left:2px;
can better be expressed as:
border:5px 5px 1px 2px;

 Don’t add redundant styles.

Once a style property is set for an element, it will be inher-
ited by all elements with that selector type (HTML, class, or
ID) on the page and their child elements.

 Use as few IDs as possible, and use each only once per
Web page.
The more IDs you have, the more complicated your code
gets. Generally you can get by with only a few IDs for major
page grid sections. If you can use more than one ID in a con-
textual selector, you’ve got too many IDs.

 Use as few classes as possible.

As with IDs, the more classes on your page, the more com-
plicated your code. Classes are useful for styling similar types
of elements, but not every instance of an element needs its
own class.

 Try to end contextual rules with an HTML selector.

Although not a hard and fast rule, the more CSS contextual
rules you can end with an HTML selector, the more you are
minimizing the number of IDs and classes in your code.

286
This page intentionally left blank
291 A : vox Li br is Co de

303 B: CSS Va l u es

317 C : F ixi ng In tern et E x plo re r

Appendixes
Chapters 7 through 11 use the example of a fictional site called
voxLibris to show off various CSS techniques. I broke the code
down and sometimes simplified it in those chapters.

This appendix includes the unexpurgated code—including all

HTML and CSS—used to create the site. You can also download
the code from:

speaking-in-styles.com/book

APPENDIX A
voxLibris Code
AP PEN D IX ES
A: VOX L IB RI S CO D E

index.html
For details about The content for the page is in the file index.html, which includes
index.css, see Chapter
all of the HTML needed to create the structure of the page, but
8, “Layout.”
none of the styles. As with all HTML pages, it is composed of
metadata between the <head> tags (03–07) and content between
the <body> tags (08–139).

One other important note: I have included a break at the bottom

of most rows and columns with the alignclear class, which stops
floating:

<br class="alignclear"/>

For example, this code is included at line 15. This is needed in

CSS to make sure that a parent element stretches to the full
height of its children.

Books Should Be Free

The inspiration for voxLibris comes from a Web

site called booksshouldbefree.com, which col-

lects audio recordings of public domain books,

making them available for free download.

292
01 <!DOCTYPE html PUBLIC "-//W3C//DTD 44 Countdown The Most Outrageous Moments In
XHTML 1.0 Strict//EN"z "http://www. Comic Book History!<br />
w3.org/TR/xhtml1/DTD/xhtml1-strict. 45 <a href="#">www.UGO.com/Comics</a></p>
dtd"> 46 <p><strong>HP Global Citizenship</
02 <html xmlns="http://www.w3.org/1999/xhtml"> strong><br />
03 <head> 47 Why Protecting Privacy is Essential For Socially
04 <meta http-equiv="Content-Type" content="text/ Responsible Companies<br />
html; charset=ISO-8859-1" /> 48 <a href="#">www.hp.com</a></p>
05 <title>voxLIBRIS</title> 49 <p><strong>Environments</strong><br />
06 <link href="_css/main.css" rel="stylesheet" 50 Find Environments & More Environments
type="text/css" media="all"/> Options Here!<br />
07 </head> 51 <a href="#">Octopedia.com</a></p>
08 <body> 52 <p class="textalignright">Ads by <strong>Oogle
09 <div id="page"> </strong></p>
10 <div id="header" class="row"> 53 </div>
11 <h1>voxLIBRIS</h1> 54 </div>
12 <div id="searchmain" class="section search"> 55 </div>
13 <form> 56 <div id="article1" class="column">
14 <input type="text" value="search" /> 57 <div id="genrelist" class="section">
15 <br class="alignclear" /> 58 <h1>Genres</h1>
16 <select> 59 <ul class="genrelistbuttons">
17 <option>titles</option> 60 <li class="genre-adventure">
18 <option>authors</option> <a href="#"><em>Adventure </em>34
19 <option>full text</option> books</a></li>
20 </select> 61 <li class="genre-anthropology">
21 </form> <a href="#"><em>Anthropology
22 </div> </em>12 books</a></li>
23 </div> 62 <li class="genre-children">
24 <div id="content" class="row"> <a href="#"><em>Children </em>90
books</a></li>
25 <div id="aside1" class="column">
63 <li class="genre-epic"><a href="#"><em>Epic
26 <div id="menumain" class="section"> </em>6 books</a></li>
27 <h2>Welcome</h2> 64 <li class="genre-fantasy"><a
28 <div class="content"> href="#"><em>Fantasy </em>13 books
29 <p>voxLIBRIS provides public domain </a></li>
audiobooks you can download free of 65 <li class="genre-history"><a
charge.</p> href="#"><em>History </em>46 books
30 <ul class="menu"> </a></li>
31 <li><a href="#">Genres</a></li> 66 <li class="genre-humor"><a
32 <li><a href="#">About</a></li> href="#"><em>Humor </em>18 books
33 <li><a href="#">News</a></li> </a></li>
34 <li><a href="#">Reviews</a></li> 67 <li class="genre-medical">
35 <li><a href="#">Donate</a></li> <a href="#"><em>Medical </em>21
36 <li><a href="#">Contact</a></li> books
37 </ul> </a></li>
38 </div> 68 <li class="genre-mystery">
39 </div> <a href="#"><em>Mystery </em>67
40 <div id="ads01" class="section ads"> books</a></li>
41 <h2></h2> 69 <li class="genre-philosophy">
42 <div class="content"> <a href="#"><em>Philosophy </em>2
books</a></li>
43 <p><strong>Top 50 WTF Comic Moments
</strong><br />

293
AP PEN D IX ES
A: VOX L IB RI S CO D E

index.html CONTINUED

70 <li class="genre-romance"> 113 <li class="book alignleft"><a href="#">

<a href="#"><em>Romance </em>103 <img src="_images/bookcovers/
books</a></li> small/through-the-looking-
71 <li class="genre-scifi"><a href="#"><em>SciFi glass.jpg" alt="through-the-
</em>54 books</a></li> looking-glass" width="125"
72 </ul> height="186"/><cite>Through the
73 <br class="alignclear" /> Looking Glass</cite>by Lewis Carol
74 </div> </a></li>
75 <div id="about" class="section"> 114
76 <h2>About</h2> 115 <li class="book alignleft"><a href="#">
77 <p>Nulla sed felis. Sed et tellus...</p>
<img src="_images/bookcovers/small/
Princess-of-Mars.jpg" alt="through-
78 <p>Suspendisse aliquam suscipit elit....
the-looking-glass" width="125"
79 </p> height="186"/><cite>Princess of Mars
80 <p><a href="#" class="readmore">Read More </cite>by Edgar Rice Burroughs
</a></p> </a></li>
81 </div> 116
82 <div id="news" class="section"> 117 <li class="book alignleft"><a href="#">
83 <h2>News</h2> <img src="_images/bookcovers/small/
84 <div class="column"> aesop-for-children.jpg" alt="through-
85 <h3>voxLIBRIS Adds 30 New Books</h3> the-looking-glass" width="125"
86 <p>Lorem ipsum dolor sit amet…</p> height="186"/><cite>Aesop
87 <p><a href="#" class="readmore">Read More </cite>by Aesop</a></li>
</a></p> 118
88 </div> 119 <li class="book alignleft"><a href="#"><img
89 <div class="column"> src="_images/bookcovers/small/gods-of-
90 <h3>New Categories Coming Next Month</h3> mars.jpg" alt="Gods of Mars" width="125"
91 <p>Lorem ipsum dolo…</a></p> height="186"/><cite>Gods of Mars
92 </div> </cite>by Edgar Rice Burroughs</a>
</li>
93 <br class="alignclear" />
120 </ul>
94 </div>
121 <br class="alignclear" />
95 <div id="news" class="section">
122 </div>
96 <h2>Reviews</h2>
123 </div>
97 <div class="column">
124 <br class="alignclear" />
98 <h3>Bowolf by Unknown</h3>
125 <div id="footer" class="row">
99 <p>Lorem ipsum dolor si…</p>
126 <div class="copyright">&copy; voxLIBRIS</div>
100 <p><a href="#" class="readmore">Read More
</a></p> 127 <ul class="menu">
101 </div> 128 <li><a href="#">Genres</a></li>
102 <div class="column"> 129 <li><a href="#">About</a></li>
103 <h3>Dead Men’s Money by J.S. Fletcher</h3> 130 <li><a href="#">News</a></li>
104 <p>Lorem ipsum…</p><p><a href="#" 131 <li><a href="#">Reviews</a></li>
class="readmore">Read More</a></p> 132 <li><a href="#">Donate</a></li>
105 </div> 133 <li><a href="#">Contact</a></li>
106 <br class="alignclear" /> 134 </ul>
107 </div> 135 <br class="alignclear" />
108 </div> 136 </div>
109 <div id="aside2" class="column"> 137 </div>
110 <div id="" class="section topbooks"> 138 </div>
111 <h2>Top Books</h2> 139 </body>
112 <ul> 140 </html>

294
main.css
All external CSS code for voxLibris is imported into main.css. For details about

which is in turn linked to by index.html. During prototyping, it is main.css, see

Chapter 8, “Layout.”
often easiest to keep your CSS in several distinct files, using
@import to add them to the master style sheet. This makes finding
code easier, and makes switching between possible design concepts
faster. For example, if you have a few different chrome concepts, you
can simply switch the chrome.css file.

Once you go into final deployment, however, I recommend copying

and pasting all the CSS code into this file. This will speed up your
page download and avoid some problems that IE has with using
@import.

01 /*---------------------------------------------------------------------
02 Imported Styles
03 ---------------------------------------------------------------------*/
04 @import url(default.css);
05 @import url(layout.css);
06 @import url(navigation.css);
07 @import url(chrome.css);

295
AP PEN D IX ES
A: VOX L IB RI S CO D E

default.css
For details about Default styles for the site reset the browser defaults—giving us a
default.css, see
level playing field for the different browsers—and set site specific
Chapter 8, “Layout.”
general styles for the HTML.

01 /*--------------------------------------------------------------------- 19 /*---------------------------------------------------------------------
02 Reset Browser Inherited Styles 20 Default Styles
03 ---------------------------------------------------------------------*/ 21 ---------------------------------------------------------------------*/
04 22 body, input, select {
05 html, body, div, span, applet, object, iframe, h1, h2, 23 color: rgb(105,105,105);
h3, h4, h5, h6, p, blockquote, pre, a, abbr, 24 font-family: "fontin sans", optima, candara,
acronym, address, big, cite, code, del, dfn, em, "trebuchet-MS", sans-serif; }
font, img, ins, kbd, q, s, samp, small, strike, 25
strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul,
26 h1, h2, h3, h4, h5, h6 {
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td 27 color: rgb(128,128,128);
06 { 28 font-family: garamond, cochin, cambria, times,
07 margin: 0; serif;
08 padding: 0; 29 letter-spacing: 1px;
09 border: 0; 30 font-weight: normal; }
31
10 outline: 0;
11 background: none; 32 h1 { font-size: 2.5em; }
12 font-weight: inherit; 33 h2 { font-size: 2em; }
13 font-style: inherit; 34 h3 { font-size: 1.25em; }
14 font-family: inherit; 35 h4, h5, h6 { font-size: 1em; }
15 font-size:100%; 36 p {
16 text-align: left; 37 text-align: left;
17 vertical-align: baseline; 38 font-size: .75em;
18 list-style: none; } 39 margin: 5px 0;
40 line-height: 1.5; }
41 blockquote {
42 font-size: .75em;
43 margin: 10px 0;
44 padding: 10px 0;
45 border-top: 1px solid rgb(128,128,128);
46 border-bottom: 1px solid rgb(128,128,128);
47 line-height: 1; }
48 li {
49 font-size: .75em;
50 margin: 2px 0; }

296
layout.css
The layout styles establish the layout grid in the design, defining For details about lay-
out.css, see Chapter
how rows, columns, and sections should be placed.
8, “Layout.”

01 /*--------------------------------------------------------------------- 36 /*---------------------------------------------------------------------
02 Grid 37 Grid - Sections
03 ---------------------------------------------------------------------*/ 38 ---------------------------------------------------------------------*/
04 #page { 39 .section {
05 position: relative; 40 position: relative;
06 display: block; 41 display: block; }
07 margin:0 auto; 42 #header .search {
08 width: 980px; 43 position: absolute;
09 _width: 960px; } 44 right: 10px;
10 /*--------------------------------------------------------------------- 45 top: 10px; }
11 Grid - Rows 46 #footer .copyright {
12 ---------------------------------------------------------------------*/ 47 margin: 0 20px;
13 .row { 48 float: left; }
14 position: relative; 49 #aside1 .section {
15 display: block; 50 width: 100%;
16 margin:0 auto; } 51 padding-bottom: 60px; }
17 #header { height: 100px; } 52 #aside1 .section h2 {
18 #content { padding-top: 20px; } 53 width: 100%;
19 #footer { height: 20px; } 54 padding: 80px 0 8px 18%; }
20 /*--------------------------------------------------------------------- 55 #aside1 .section div.content { width: 100%; }
21 Grid - Columns 56 #aside1 .section p, #aside1 .section ul {
22 ---------------------------------------------------------------------*/ 57 width: 65%;
23 .column { 58 margin: 0 auto;
24 position: relative; 59 margin-bottom: 5px; }
25 display: block; 60 #article1 .section .column { width: 210px; }
26 float: left; } 61 #article1 .section .column+.column { float: right; }
27 .alignclear { clear: both; } 62 #article1 .section .column p { min-height: 110px; }
28 #aside1 {
29 top: 60px;
30 left: -80px;
31 width: 314px; }
32 #article1 {
33 left: -40px;
34 width: 470px; }
35 #aside2 { width: 190px; }

297
AP PEN D IX ES
A: VOX L IB RI S CO D E

navigation.css
For details about All link, menu, and button styles are set in navigation.css.
navigation.css,
Remember to set the styles for all of the different link states
see Chapter 10,
“Navigation.”
(:link, :visited, :active, and :hover).

01 /*--------------------------------------------------------------------- 30 /*---------------------------------------------------------------------
02 Links 31 Menus
03 ---------------------------------------------------------------------*/ 32 ---------------------------------------------------------------------*/
04 a { text-decoration: none; } 33 ul.menu li a {
05 a:link { color: rgb(0,85,126); } 34 font-family: garamond, cochin, cambria, times,
06 a:visited { color: rgb(0,50,75); } serif;
07 a:hover { color: rgb(0,170,255); } 35 text-transform: uppercase; }
08 a:active{ color: rgb(255,215,0); } 36 /*---------------------------------------------------------------------
09 /*--------------------------------------------------------------------- 37 Menus - Menu
10 Links - Paragraph 38 ---------------------------------------------------------------------*/
11 ---------------------------------------------------------------------*/ 39 #menumain ul.menu li {
12 p a:link, p a:visited { 40 display: block;
13 background: transparent url(../_images/bg-p- 41 padding: 5px 0;
a-link.png) repeat-x 0 -2px; } 42 border-top: 1px solid rgb(192,192,192);
14 p a:hover { background-position: -20px -2px; 43 width: 100%; }
} 44 /*---------------------------------------------------------------------
15 p a:active { background-image: none; } 45 Navigation - Footer
16 46 ---------------------------------------------------------------------*/
17 p a.readmore { 47 #footer ul.menu li {
18 position: relative; 48 float: left;
19 background: transparent url(../_images/icon- 49 padding: 3px 20px;
pointer-sprite.png) no-repeat right 0; 50 margin: 0;
20 padding: 0 40px 5px 0; 51 background: none;
21 _background: none; } 52 border-left: 1px solid rgb(128,128,128); }
22 p a.readmore:link { 53 #footer ul.menu li a:link,#footer ul.menu li a:visited {
23 background-position: right 0; } color: rgb(105,105,105); }
24 p a.readmore:visited {
25 background-position: right -20px; }
26 p a.readmore:hover {
27 background-position: right -40px; }
28 p a.readmore:active {
29 background-position: right -60px; }

298
54 /*--------------------------------------------------------------------- 97 #genrelist .genrelistbuttons li.genre-adventure {
55 Article 1 - Genre List 98 background-image: url(../_images/genreicons/
56 ---------------------------------------------------------------------*/ icon-adventure.jpg); }
57 #genrelist .genrelistbuttons { list-style: none; } 99 #genrelist .genrelistbuttons li.genre-anthropology {
58 #genrelist .genrelistbuttons li { 100 background-image: url(../_images/genreicons/
59 background: none; icon-anthropology.jpg); }
60 height: auto; 101 #genrelist .genrelistbuttons li.genre-children {
61 padding: 0; 102 background-image: url(../_images/genreicons/
icon-children.jpg); }
62 font-size: .875em;
103 #genrelist .genrelistbuttons li.genre-epic {
63 float: left;
104 background-image: url(../_images/genreicons/
64 text-align: center; icon-epic.jpg); }
65 background: rgb(105,105,105) url(../_images/ 105 #genrelist .genrelistbuttons li.genre-fantasy {
genreicons/icon-adventure.jpg) no-repeat
center center; 106 background-image: url(../_images/genreicons/
icon-fantasy.jpg); }
66 display: block;
107 #genrelist .genrelistbuttons li.genre-history {
67 width: 100px;
108 background-image: url(../_images/genreicons/
68 height: 100px; icon-history.jpg); }
69 margin: 15px 15px 50px 0; 109 #genrelist .genrelistbuttons li.genre-humor {
70 -webkit-border-radius: 10px; 110 background-image: url(../_images/genreicons/
71 -moz-border-radius: 10px; icon-humor.jpg); }
72 border-radius: 10px; 111 #genrelist .genrelistbuttons li.genre-medical {
73 -webkit-box-shadow: rgb(0,0,0) 0 0 5px; 112 background-image: url(../_images/genreicons/
74 -moz-box-shadow: rgb(0,0,0) 0 0 5px; icon-medical.jpg); }
75 box-shadow: rgb(0,0,0) 0 0 5px; } 113 #genrelist .genrelistbuttons li.genre-mystery {
76 #genrelist .genrelistbuttons li a { 114 background-image: url(../_images/genreicons/
77 display: block; icon-mystery.jpg); }
78 opacity: 1; 115 #genrelist .genrelistbuttons li.genre-philosophy {
79 width: 100%; background: transparent 116 background-image: url(../_images/genreicons/
url(../_images/button-gel-100.png) no-repeat icon-philosophy.jpg); }
0 0; 117 #genrelist .genrelistbuttons li.genre-romance {
80 padding-top: 105px; 118 background-image: url(../_images/genreicons/
81 color: rgb(169,169,169); icon-romance.jpg); }
82 -webkit-border-radius: 10px; 119 #genrelist .genrelistbuttons li.genre-scifi {
83 -moz-border-radius: 10px; 120 background-image: url(../_images/genreicons/
84 border-radius: 10px; } icon-scifi.jpg); }
85 #genrelist .genrelistbuttons li a em {
86 display: block;
87 margin-bottom: 5px;
88 font-style: normal;
89 line-height: 1;
90 font-size: 1.25em;
91 color: rgb(105,105,105);
92 font-family: garamond, cochin, cambria, times,
serif; }
93 #genrelist .genrelistbuttons li a:hover {
94 opacity: .6;
95 border-color: rgb(0,170,255);
96 color: rgb(0,0,0); }

299
AP PEN D IX ES
A: VOX L IB RI S CO D E

chrome.css
For details about The site’s visual appearance is set primarily by the chrome.css file.
chrome.css, see
Chapter 11, “Chrome.”

01 /*--------------------------------------------------------------------- 27 /*---------------------------------------------------------------------
02 Chrome - Grid 28 Chrome - Header - Search
03 ---------------------------------------------------------------------*/ 29 --------------------------------------------------------------------
04 body { background: rgb(0,50,75) url(../_images/ -*/
bg-body.png) repeat 0 0; } 30 #header .search input, #header .search select {
05 #page { 31 background: transparent url(../_images/
06 background: transparent url(../_images/ bg-grad01.png) repeat-x center center;
bg-page.png) repeat-y 0 0; 32 border: 1px solid rgb(102,102,102);
07 padding: 0 16px; 33 height: 25px;
08 34 width: 200px;
09 _background: none; 35 font-size: 1.2em;
10 _filter: progid:DXImageTransform.Microsoft. 36 padding: 0 10px;
AlphaImageLoader(src="../_images/bg-page. 37 margin-bottom: 5px;
png", sizingMethod="scale"); } 38 -moz-border-radius: 5px;
11 #header, #footer { background: transparent url(../_ 39 -webkit-border-radius: 5px;
images/bg-header.png) repeat-x 0 0; }
40 border-radius: 5px; }
12 #footer { background-position: 0 bottom; }
41 #header .search select {
13 /*---------------------------------------------------------------------
42 background-image: url(../_images/bg-grad01.
14 Chrome - Header - voxLIBRIS logo png);
15 ---------------------------------------------------------------------*/ 43 padding-right: 0; }
16 #header h1 {
17 position: absolute;
18 left: 0;
19 bottom: -2px;
20 width: 306px;
21 height: 66px;
22 line-height: 188px;
23 overflow: hidden;
24 background: transparent url(../_images/logo-
voxlibris.png) no-repeat 0 0;
25 _background: none;
26 _filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=’../_images/logo-
voxlibris.png’, sizingMethod=’crop’);}

300
44 /*--------------------------------------------------------------------- 73 /*---------------------------------------------------------------------
45 Chrome - Aside 1 - Section 74 Chrome - Article
46 ---------------------------------------------------------------------*/ 75 ---------------------------------------------------------------------*/
47 #aside1 .section { 76 #article1 .section h1 {
48 background: transparent url(../_images/ 77 padding-top: 30px;
bg-sidebar1-bottom.png) no-repeat 0 bottom; 78 text-transform: uppercase;
} 79 text-align: center;
49 #aside1 .section h2 { 80 background: transparent url(../_images/
50 background: transparent url(../_images/ flourish-up.png) no-repeat center top; }
bg-sidebar1-top.png) no-repeat 0 0; 81 #article1 .section {
51 text-align: left; 82 background-position: bottom center;
52 max-height: 136px; 83 padding-bottom: 50px;
53 overflow; hidden; 84 margin-bottom: 3px;
54 font-variant: small-caps; 85 background: transparent url(../_images/
55 color: red; } flourish-up.png) no-repeat center bottom; }
56 #aside1 .section div.content { 86 #article1 .section h2 {
57 background: transparent url(../_images/ 87 font-variant: small-caps;
bg-sidebar1-mid.png) repeat-y 0 0; } 88 margin: 3px 0 30px 0;
58 #aside1 .section p, #aside1 .section ul { 89 height: 35px;
59 list-style-position: inside; 90 background: transparent url(../_images/
60 list-style-type: none;} flourish-down.png) no-repeat center 3px;
61 /*--------------------------------------------------------------------- 91 border-top: 1px solid rgb(128,128,128); }
62 Chrome - Aside 1 - Ads 92 #article1 .section h3 {
63 ---------------------------------------------------------------------*/ 93 font-family: "fontin sans", optima, candara,
64 #aside1 .ads { "trebuchet-MS", sans-serif;
65 background-image: url(../_images/bg-ads- 94 height: 50px;
bottom.png); } 95 margin-top: 20px; }
66 #aside1 .ads h2 { 96 #article1 .section p {
67 background-image: url(../_images/bg-ads-top. 97 margin-bottom: 20px; }
png); } 98 #article1 ul li {
68 #aside1 .ads div.content { 99 list-style: none;
69 background-image: url(../_images/bg-ads-mid. 100 list-style-position: inside;
png); }
101 background: transparent url(../_images/
70 #aside1 .ads p { flourish-left.png) no-repeat 0 center;
71 color: rgb(0,0,0); 102 padding: 10px 25px;
72 padding: 10px 80px; } 103 _background: none;
104 _filter: progid:DXImageTransform.Microsoft.
AlphaImageLoader
105 (src="../_images/flourish-left.png",
sizingMethod="crop|scale"); }

301
In Chapter 6, we briefly discussed the values that could be used
with different CSS properties. In this appendix, we’ll look at val-
ues for lengths, fonts, URLs, and colors in more detail.

APPENDIX B
CSS Values
AP PEN D IX ES
B: CS S VA LUE S

Lengths
Lengths (width or height) can be set using a variety of units, but
there are two basic types of length values:

 Relative lengths: Length is calculated by the browser rela-

tive to another specific value.

 Absolute lengths: Lengths remain constant regardless of

context but may vary depending on the computer’s OS. For
example, Macs have a slightly smaller value for point sizes
than Windows.

Pixels or Ems?
Although you have several unit types to choose from, most Web
designs are created using pixels or ems (or a combination of the
two). Pixels have the advantage of being easy to understand and
apply to screen-based layouts, but ems, a relative rather than abso-
lute measurement, allow for more fluid control that can be grace-
fully scaled on most browsers.

Generally, I use pixels for all non-typographic lengths and ems for
all font and text-based lengths.

Web-Safe Fonts

spea k ing- in -st yl es. c om/ we b- t y po gr a p hy / web - sa fe- fon ts /

I have put together an extensive list of fonts that are likely to be installed

on Mac and Windows machines. You can sort the list to see fonts with dif-

ferent weights and styles, OS, rank, as well as a sample of alpha-numeric

characters.

304
Relative Length Values

Unit Name What It Is Example

Relative to the current
em Em 2.5em
font-size.
Relative to the
distance between
ex x-height 6ex
the baseline and the
mean line of the font.
Relative to the length
% Percent 19%
of parent element
Relative to the
px Pixel 603px
monitor’s resolution.

Absolute Length Values

Unit Name What It Is Example

pt Point 72pt = 1in 10pt

pc Picas 1pc = 12pt 6pc

mm Millimeters 1mm = .24pc 26mm

cm Centimeters 1cm = 10mm 8.34cm

in Inches 1in = 2.54cm 1.23in

305
AP PEN D IX ES
B: CS S VA LUE S

Fonts
Font family names are derived from the name of the font.
Entering the entire name as it appears in your operating system.
Font names are not case-sensitive (it doesn’t matter whether you
use upper or lowercase letters), but font names with spaces must
be placed in quotes:

“times new roman”

The table on the next few pages shows a list of fonts that are likely
to be installed on both Macs and Windows computers.

For a complete list of Web-safe fonts that are likely to be installed

on Mac or Windows computers, visit:

speaking-in-styles.com/web-typography/web-safe-fonts

Web-safe Fonts For Both Mac and Windows

Name Weight & Style Sample

Andale Mono Bold, Italic, Bold Italic ABC abc 0123
Arial Bold, Italic, Bold Italic ABC abc 0123
Arial Black ABC abc 0123
Arial Narrow Bold, Italic, Bold Italic ABC abc 0123
Arial Rounded MT Bold ABC abc 0123
Baskerville Old Face ABC abc 0123
Bauhaus 93
ABC abc 0123
Bell MT Bold, Italic ABC abc 0123
Bernard MT Condensed
ABC abc 0123
Book Antiqua Bold, Italic, Bold Italic ABC abc 0123
Bookman Old Style Bold, Italic, Bold Italic ABC abc 0123
Bradley Hand ITC TT Bold
ABC abc 0123

306
Name Weight & Style Sample
Britannic Bold ABC abc 0123
Brush Script MT ABC abc 0123
Calibri Bold, Italic, Bold Italic ABC abc 0123
Calisto MT Bold, Italic, Bold Italic ABC abc 0123
Cambria Bold, Italic, Bold Italic ƒ„…Ͳͳʹ͵
Candara Bold, Italic, Bold Italic ABC abc 0123
Century ABC abc 0123
Century Gothic Bold, Italic, Bold Italic ABC abc 0123
Century Schoolbook Bold, Italic, Bold Italic ABC abc 0123
Colonna MT ABC abc 0123
Comic Sans MS Bold ABC abc 0123
Consolas Bold, Italic, Bold Italic ABC abc 0123
Constantia Bold, Italic, Bold Italic ABC abc 0123
Cooper Black ABC abc 0123
Copperplate Gothic Bold ABC abc 0123
Copperplate Gothic Light ABC abc 0123
Corbel Bold, Italic, Bold Italic ABC abc 0123
Courier New ABC abc 0123
Curlz MT ABC abc 0123
Edwardian Script ITC
ABC abc 0123
Engravers MT ABC abc 0123
Footlight MT Light ABC abc 0123
Franklin Gothic Book Italic ABC abc 0123
Franklin Gothic Medium Italic ABC abc 0123
Garamond Bold, Italic ABC abc 0123
Georgia Bold, Italic, Bold Italic ABC abc 0123
Gill Sans MT Bold, Italic, Bold Italic ABC abc 0123
Gill Sans Ultra Bold ABC abc 0123
Gloucester MT Extra Condensed ABC abc 0123

307
AP PEN D IX ES
B: CS S VA LUE S

Name Weight & Style Sample

Goudy Old Style Bold, Italic
ABC abc 0123
Haettenschweiler ABC abc 0123
Harrington
ABC abc 0123
Impact ABC abc 0123
Imprint MT Shadow ABC abc 0123
Lucida Bright Bold, Italic, Bold Italic ABC abc 0123
Lucida Calligraphy Bold, Italic, Bold Italic
ABC abc 0123
Lucida Console ABC abc 0123
Lucida Fax Bold, Italic, Bold Italic ABC abc 0123
Lucida Sans Bold, Italic, Bold Italic ABC abc 0123
Lucida Sans Typewriter Bold, Italic, Bold Italic ABC abc 0123
Lucida Sans Unicode ABC abc 0123
Mistral ABC abc 0123
MS Mincho $%&DEF
MS Reference Sans Serif ABC abc 0123
Onyx ABC abc 0123
Papyrus
ABC abc 0123
Perpetua Bold, Italic, Bold Italic ABC abc 0123
Perpetua Titling MT Bold ABC abc 0123
Playbill ABC abc 0123
Rockwell Bold, Italic, Bold Italic ABC abc 0123
Rockwell Extra Bold ABC abc 0123
Stencil abc abc 0123
Tahoma Bold ABC abc 0123
Times New Roman Bold, Italic, Bold Italic ABC abc 0123
Trebuchet MS Bold, Italic, Bold Italic ABC abc 0123
Tw Cen MT Bold, Italic, Bold Italic ABC abc 0123
Verdana Bold, Italic, Bold Italic ABC abc 0123
Wide Latin ABC abc 0123

308
URLs
A Uniform Resource Locator (URL) is the unique address of
an item on the Web. It could be an HTML document, external
CSS file, image, JavaScript file, Flash file, a sound file, or any
resource that can be accessed by the Web browser. There are
two types of URLs:

 Absolute: Gives the full address (path) of the resource,

starting with http://. For example:
http://www.speaking-in-styles.com/story/images/rabbit.png
displays the file called rabbit.png.

 Relative: A partial path to the resource, relative to the file

that is trying to use it. For example:
../images/rabbit.png
says to go up one directory level (../) into the images folder
and load the file called rabbit.png.

309
AP PEN D IX ES
B: CS S VA LUE S

Color
Colors in CSS are specified either by values specifying the mix-
ture of red, green, and blue used to create the color, or with a spe-
cific color keyword. Keywords are simply shorthand for specific
color values.

Color Opacity
Opacity is set as a property or can be included as part of the RGB
Alpha color format, which includes a decimal value between 0
(transparent) and 1 (opaque). However, this is not currently sup-
ported by all browser. Include both the RGB and RGBA to cover
all browsers:

color: rgb(255,0,0);
color: rgba(255,0,0,.5);

Format Name What It Is Example

Red, green, and blue
#RRGGBB Hex hexadecimal value of #CC33FF or #C3F
a color (00-99,AA-FF)
Red, green and blue
rgb(R#,G#,B#) RGB Numeric numeric values of rgb(204,51,255)
color (0-255)
Red, green, and blue
rgb(R%,G%,B%) RGB Percentage rgb(81%,18%,100%)
percentages
Red, green, and blue
numeric values of
rgba(R,G,B,A)1 RGB Alpha color (numeric or per- rgb(204,51,255,.5)
centage) and alpha
value (0-1)
A keyword name for
<name> Keyword purple
the color
1 FF3+, GC1+, and Sa4+ only

310
Keyword Hex RGB Numeric
aliceblue #F0F8FF 240,248,255
antiquewhite #FAEBD7 250,235,215
aqua #00FFFF 0,255,255
aquamarine #7FFFD4 127,255,212
azure #F0FFFF 240,255,255
beige #F5F5DC 245,245,220
bisque #FFE4C4 255,228,196
black #000000 0,0,0
blanchedalmond #FFEBCD 255,235,205
blue #0000FF 0,0,255
blueviolet #8A2BE2 138,43,226
brown #A52A2A 165,42,42
burlywood #DEB887 222,184,135
cadetblue #5F9EA0 95,158,160
chartreuse #7FFF00 127,255,0
chocolate #D2691E 210,105,30
coral #FF7F50 255,127,80
cornflowerblue #6495ED 100,149,237
cornsilk #FFF8DC 255,248,220
crimson #DC143C 220,20,60
cyan #00FFFF 0,255,255
darkblue #00008B 0,0,139
darkcyan #008B8B 0,139,139
darkgoldenrod #B8860B 184,134,11
darkgray #A9A9A9 169,169,169
darkgreen #006400 0,100,0
darkgrey #A9A9A9 169,169,169
darkkhaki #BDB76B 189,183,107
darkmagenta #8B008B 139,0,139
darkolivegreen #556B2F 85,107,47
darkorange #FF8C00 255,140,0

311
AP PEN D IX ES
B: CS S VA LUE S

Color continued
Keyword Hex RGB Numeric
darkorchid #9932CC 153,50,204
darkred #8B0000 139,0,0
darksalmon #E9967A 233,150,122
darkseagreen #8FBC8F 143,188,143
darkslateblue #483D8B 72,61,139
darkslategray #2F4F4F 47,79,79
darkturquoise #00CED1 0,206,209
darkviolet #9400D3 148,0,211
deeppink #FF1493 255,20,147
deepskyblue #00BFFF 0,191,255
dimgray #696969 105,105,105
dimgrey #696969 105,105,105
dodgerblue #1E90FF 30,144,255
firebrick #B22222 178,34,34
floralwhite #FFFAF0 255,250,240
forestgreen #228B22 34,139,34
fuchsia #FF00FF 255,0,255
gainsboro #DCDCDC 220,220,220
ghostwhite #F8F8FF 248,248,255
gold #FFD700 255,215,0
goldenrod #DAA520 218,165,32
gray #808080 128,128,128
green #008000 0,128,0
greenyellow #ADFF2F 173,255,47
grey #808080 128,128,128
honeydew #F0FFF0 240,255,240
hotpink #FF69B4 255,105,180
indianred #CD5C5C 205,92,92
indigo #4B0082 75,0,130
ivory #FFFFF0 255,255,240
khaki #F0E68C 240,230,140

312
Keyword Hex RGB Numeric
lavender #E6E6FA 230,230,250
lavenderblush #FFF0F5 255,240,245
lawngreen #7CFC00 124,252,0
lemonchiffon #FFFACD 255,250,205
lightblue #ADD8E6 173,216,230
lightcoral #F08080 240,128,128
lightcyan #E0FFFF 224,255,255
lightgoldenrodyellow #FAFAD2 250,250,210
lightgray #D3D3D3 211,211,211
lightgreen #90EE90 144,238,144
lightgrey #D3D3D3 211,211,211
lightpink #FFB6C1 255,182,193
lightsalmon #FFA07A 255,160,122
lightseagreen #20B2AA 32,178,170
lightskyblue #87CEFA 135,206,250
lightslategray #778899 119,136,153
lightslategrey #778899 119,136,153
lightsteelblue #B0C4DE 176,196,222
lightyellow #FFFFE0 255,255,224
lime #00FF00 0,255,0
limegreen #32CD32 50,205,50
linen #FAF0E6 250,240,230
magenta #FF00FF 255,0,255
maroon #800000 128,0,0
mediumaquamarine #66CDAA 102,205,170
mediumblue #0000CD 0,0,205
mediumorchid #BA55D3 186,85,211
mediumpurple #9370DB 147,112,219
mediumseagreen #3CB371 60,179,113
mediumslateblue #7B68EE 123,104,238
mediumspringgreen #00FA9A 0,250,154

313
AP PEN D IX ES
B: CS S VA LUE S

Color continued
Keyword Hex RGB Numeric
mediumturquoise #48D1CC 72,209,204
mediumvioletred #C71585 199,21,133
midnightblue #191970 25,25,112
mintcream #F5FFFA 245,255,250
mistyrose #FFE4E1 255,228,225
moccasin #FFE4B5 255,228,181
navajowhite #FFDEAD 255,222,173
navy #000080 0,0,128
oldlace #FDF5E6 253,245,230
olive #808000 128,128,0
olivedrab #6B8E23 107,142,35
orange #FFA500 255,165,0
orangered #FF4500 255,69,0
orchid #DA70D6 218,112,214
palegoldenrod #EEE8AA 238,232,170
palegreen #98FB98 152,251,152
paleturquoise #AFEEEE 175,238,238
palevioletred #DB7093 219,112,147
papayawhip #FFEFD5 255,239,213
peachpuff #FFDAB9 255,218,185
peru #CD853F 205,133,63
pink #FFC0CB 255,192,203
plum #DDA0DD 221,160,221
powderblue #B0E0E6 176,224,230
purple #800080 128,0,128
red #FF0000 255,0,0
rosybrown #BC8F8F 188,143,143
royalblue #4169E1 65,105,225
saddlebrown #8B4513 139,69,19
salmon #FA8072 250,128,114
sandybrown #F4A460 244,164,96

314
Keyword Hex RGB Numeric
seagreen #2E8B57 46,139,87
seashell #FFF5EE 255,245,238
sienna #A0522D 160,82,45
silver #C0C0C0 192,192,192
skyblue #87CEEB 135,206,235
slateblue #6A5ACD 106,90,205
slategray #708090 112,128,144
slategrey #708090 112,128,144
snow #FFFAFA 255,250,250
springgreen #00FF7F 0,255,127
steelblue #4682B4 70,130,180
tan #D2B48C 210,180,140
teal #008080 0,128,128
thistle #D8BFD8 216,191,216
tomato #FF6347 255,99,71
turquoise #40E0D0 64,224,208
violet #EE82EE 238,130,238
wheat #F5DEB3 245,222,179
white #FFFFFF 255,255,255
whitesmoke #F5F5F5 245,245,245
yellow #FFFF00 255,255,0
yellowgreen #9ACD32 154,205,50

315
In Chapter 3, Myth 3 mentions that, although there are still some
compatibility issues between the different browsers, the main
culprit is Internet Explorer with version 6 being the most trouble-
some. Although newer versions (7 and 8) have improved on their
predecessor, they have their issues as well.

Fixing the problems in IE used to consume a lot of my time.

Knowing the problems are primarily created by CSS quirks in IE,
I now rely on three basic fixes to get my designs to work across all
browsers.

APPENDIX C
Fixing Internet
Explorer
AP PEN D IX ES
C: F I XI NG I NT E RN ET E XPLO R ER

Understanding Quirks
As I have mentioned throughout this book, CSS is an inter-
preted language. The browser manufacturers take the standard
and implement it to the best of their abilities. However, older
browsers were often created before the standards had been fully
defined. When the browser maker implemented a standard dif-
ferently from the way it was later specified by the W3C, it’s called
a quirk.

IE5 had a lot of quirks compared with modern browsers.

Although IE5 is not commonly used anymore and IE6 fixed
many of these problems, in order to allow backwards compatibil-
ity, Microsoft implemented a quirks mode in IE6 where it emu-
lated IE5’s CSS. Unfortunately, quirks mode is easily triggered
in IE6, causing a lot of design problems—most notably the box
model problem described in Chapter 6, “Vocabulary.”

Quirks Mode

quirksmode.com

For a complete list of which CSS properties

and values work in which browsers, there is

no better resource than Peter-Paul Koch’s

Quirks Mode site. Peter-Paul keeps it up to

date with the latest browsers, bugs, and

solutions.

318
Fix 1: Doctype Switching
The simplest solution to IE quirks is to declare a Doctype at the
top of your HTML, defining the version of HTML or XHTML
you are using. This is generally set by the developer when they
create the HTML, but if you are doing your own development, I
recommend sticking with XHTML transitional:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd”>

In theory, this will force IE6 to use modern CSS standards, so

you will have to do very little tweaking to your code to get your
designs to conform to multiple browsers.

Unfortunately, if your code does not conform to the version you

specify (e.g., there are any syntax errors), IE6 will automatically
kick into quirks mode. So, unless you know your code will be per-
fectly formed and without error, this is not a practical solution.

319
AP PEN D IX ES
C: F I XI NG I NT E RN ET E XPLO R ER

Fix 2: Conditional Styles

One advantage IE has over other browsers is that you can define
styles that only IE can see, even tailored for a particular version.
To add conditional styles, use this HTML code:

<!--[if IE 6]>
<link src="css/ie6.css" type="text/css" media="all" />
<![endif ]-->

This will load the style sheet ie6.css only if the browser being used
is IE6. You can replace the “6” in if IE6 with another version
number or leave it out entirely and the style sheet will affect all
versions of IE.

You can now place any styles you want in the external file to “fix”
any problems you see in the Web page. For example, you might
include different padding to fix the box model problem described
in Chapter 6.

The disadvantage of using conditional styles is that it means link-

ing to more files (slowing down your Web page) and having to
keep up with changes to more files.

320
Fix 3: Underscore Hack
Although possibly the least elegant solution, the underscore hack
is the simplest and most direct IE fix. Place an underscore charac-
ter immediately before a line of CSS code that you want only IE6
to see, and it is hidden from all other browsers. For example:

width: 250px;
padding: 25px;
_width: 300px;

If the browser is in quirks mode, this will reset the width of the
box from 250px to 300px so it will appear to be the same width
in IE6 as in other browsers.

The downsides to the underscore hack are that it only works in

IE6 (not in newer versions), it will prevent your code from vali-
dating with the W3C CSS validator, and, if your browser is not
in quirks mode, the values will be wrong, so its best to reserve this
technique until after you try Fix.

321
AP PEN D IX ES
C: F I XI NG I NT E RN ET E XPLO R ER

Common IE6 Issues

Although on it’s way out, IE6 still has to be reckoned with. I’ve
spent a lot of time fixing IE6 compatibility problems, and want to
share the most common with you, along with which fix to use.

See “Box” in Chapter  The Box Model: The width or height of an element appears
6, “Vocabulary,” for longer than in other browsers.
more details on the
Fix: If Doctype switching does not work, use conditional
box model, margins,
and floating. styles or the underscore hack to set a separate length.

 Doubling Margins: The margins on floated elements

are doubled.
Fix: If Doctype switching does not work, use conditional
styles or the underscore hack to set separate margins.

 Stair-Step Elements: Instead of having their tops line up,

floated elements look stair-stepped, with each subsequent
floated element lower than the previous.
Fix: Set the line height of the parent element to 0.

322
 No Min/Max Width or Min/Max Height: Before version 7, See “Width and
Height” in Chapter 6,
IE did not support the min-width, max-width, min-height, or
“Vocabulary,” for more
max-height properties. details on widths and
Fix: Set conditional styles with the underscore hack to set heights.
absolute width or height. The good news is that IE6 treats
height the way modern browsers treat min-height.

 No Support for Dynamic Pseudo-Classes: Although See “Styles for Special

Cases” in Chapter 4,
IE6 supports pseudo-classes with links (<a>), it does not
“Syntax,” for more
support pseudo-class styles applied to any other HTML details on pseudo-
tags. This is generally not a problem (the extra styles can be classes.
treated as a design enhancement), but if you are using an
opacity or lighter colors in the non-active state, expecting
the dynamic action to darken the element when in use, this
can cause problems.
Fix: Use conditional styles or the underscore hack to set an
appropriate default color or opacity.

 No Alpha Support for PNG: Although it will display PNG See “Using
Transparent Images”
images, IE6 fills any alpha channel with a muddy gray.
in Chapter 11,
Fix: Use conditional styles or the underscore hack to set a “Chrome,” for more
non-transparent PNG source image, or, if the image is in the details on transparent
background, load the image using the IE alpha filter. PNGs.

323
Index
!important, 116, 120, 283 and shadows, 172
@fontface rule, 230–231 and Web standards, 44
@import rule, 90, 96, 102, 203, 282, 295 applications, Web, 30–33
2-D positioning, 162–163 Arial Black font, 226, 227
3-D positioning, 164–165 Arial font, 226, 227
Asynchronous JavaScript and XML, 12
auto keyword, 124

A a:visited pseudo-class, 244

B
<a> tag, 243, 244. See also anchor tags
a:active pseudo-class, 244
absolute position type, 160, 161
absolute URLs, 309 background, 134–139
ActionScript, 14 images. See background images
active state, 80, 81, 82, 170, 244, 298 patterns, 190
ad modules, 268 positioning, 138–139
addons.mozilla.org, 26–27 tiling methods, 136–137, 190
adjacent selectors, 78 background-attachment property, 134, 135
Adobe background-color property, 134, 135
Dreamweaver, 29 background-image property, 134, 135
Fireworks, 32 background images
Flash. See Flash for buttons, 252
Illustrator, 32 defining columns as, 262
Kuler, 30, 31 defining rows as, 264
Photoshop. See Photoshop and design best practices, 284
a:hover pseudo-class, 244 and mobile devices, 280
Ajax, 12 and printed Web pages, 281
alignclear class, 220, 292 using logo as, 260
alignment, text, 130, 132, 133 using logo text in, 266
a:link pseudo-class, 244 background-position value, 138, 139
AllofUs, 9 background property, 134, 135
alpha channels, 258 background-repeat property, 136, 137
alpha Web sites, 204 Berners-Lee, Tim, 8
AlphaImageLoader, 260 best practices, CSS, 282–286
anchor tags, 243, 244, 248, 252 beta launches, 204
Andale Mono font, 226, 227 bitmap images, 32
AOL Explorer, 23 block boxes, 140
Apple iLife, 228 block display type, 142
Apple Safari block elements, 6
and CSS, 21 block quotes, 240
and design enhancements, 254 Blueprint, 278
as development tool, 21 body copy, 234, 238
and downloadable fonts, 230 <body> tag, 210, 292
layout engine, 23 bold font, 128
and rounded corners, 174 bold tags, 8
BooksShouldBeFree.com, 292 browser-default styles, 106, 110, 120, 216–
border-bottom property, 152, 246 217, 296
border-collapse property, 166, 167 browser-inherent styles, 6
border-color-bottom property, 152 browser-synthesized fonts, 126
border-color-left property, 152 browsers, 18–23. See also specific browsers
border-color property, 152 alternatives to leading, 22, 23
border-color-right property, 152 and CSS, 18, 20–21, 44
border-color-top property, 152 and design enhancements, 172, 254
border-left property, 152 and downloadable fonts, 230
border property, 152, 153 and font sizes, 236
border-radius property, 174, 175, 252 graphics-based, 8
border-right property, 152 layout engines for, 23
border-spacing property, 166, 167 legacy, 18
border-style-bottom property, 152 Macintosh, 18, 20–21
border-style-left property, 152 most commonly used, 18
border-style property, 152 and outlines, 174
border-style-right property, 152 and rounded corners, 174
border-style-top property, 152 and shadows, 172
border-top property, 152 viewing Web page on different, 19
border-width-bottom property, 152 Windows, 20–21
border-width-left property, 152 Buivenga, Jos, 237
border-width property, 152 bulleted lists, 168, 240
border-width-right property, 152 buttons, 252–254
border-width-top property, 152
borders, 152–153, 284
Bos, Bert, 8
bottom position property, 138, 162, 163, 220
box model, CSS, 158, 222, 318, 322
C
Camino, 23
box-shadow property, 172, 173, 252, 254 capitalizing text, 130
boxes, 140–165 caption-side property, 166, 167
allowing scrolling in, 148 cascade, 120–121, 198
automatic positioning of, 140 Cascading Style Sheets, 35. See also CSS
components of, 140, 141 case sensitivity, of class/ID names, 66
display types for, 142–143 Causecast, 14–15
floating, 146–147, 322 center position property, 138
handling overflow in, 148, 149 centering elements, 138, 218
hiding, 144, 145 child selectors, 76, 86
inline vs. block, 140 Chiucini, Michela, 39
setting borders for, 152–153 chrome, 257–271
setting margins for, 156–157 as component of style guide, 194
setting opacity for, 144, 145 cutting, 192–193
setting padding for, 154–155 defined, 192, 257
setting position for, 160–165 defining sections, 268–271
setting width/height for, 148–151 defining the grid, 262–265
<br /> tag, 220 logos and forms, 266–267

325
 using transparent images, 258–261 contextual rules, 286
Chrome, Google, 23 Courier New font, 226, 227
chrome.css, 214, 300–301 Crossover, 22–23
citations, 74–75 CSS
class names, 66, 270, 279, 283, 286 adding notes to, 104–105
class selector, 62–67, 114 analyzing, 29
clear property, 146, 147 best practices, 282–286
CMYK, 36 box model, 158, 222, 318, 322
Coda, 28 combining code into single file, 202
code, voxLibris, 291–301 as core Web technology, 1, 2
chrome.css, 300–301 design enhancements, 172–175, 254
default.css, 296 as design vs. development tool, 36
index.html, 292–294 and DOM, 4
layout.css, 297 editing, 198
main.css, 295 file-size considerations, 198
navigation.css, 298–299 and Flash, 14
code comments, 104–105, 285 and fonts, 232
code editors, 28–29 frameworks, 212–213, 278–279
CodeWeavers, 22 genesis of, 8
coding best practices, 285 and HTML, 6–9
colazionedamichy.it, 39 vs. HTML tables, 40
colon, in style rules, 52 and JavaScript, 10–13
color codes, 24, 310–315 learning about latest advances in, 255
color gradients, 136, 260, 264, 266 learning to use, 36
color keywords, 310–315 meaning of acronym, 35
color opacity, 310 myths about, 35–45
color property, 130, 131 optimizing, 286
color trends, 258 organizing, 200–201
<color> variable, 125 purpose of, 2
ColorJack, 30, 31 selectors. See selectors
colors semantics. See CSS semantics
defining, 285, 310–315 sizing text in, 236
differentiating link states with, 82–83, 246 specifying colors in, 310
including in style guide, 194 sprites, 168, 192, 244–245, 284
in printed Web pages, 281 stripping out comments from, 198
in wire frames, 186 style guides, 194–195
Colorzilla, 24 style rules. See rules of style
ColourLovers, 256, 258 as style sheet language, 36
columns, 212, 220–221, 262–263, 281, 297 syntax. See CSS syntax
Comic Sans MS font, 226, 227 validating, 274–277, 321
comments, 104–105, 285 versatility of, 40
company logos, 214, 260, 266–267, 270, 284 vocabulary. See CSS vocabulary
compositions, 190. See also visual comps for voxLibris, 291–301
conditional styles, 320, 323 and Web browsers, 18, 20–21, 44, 317
context, styling elements based on, 70–79 and Web design process, 179

326
 and Web standards, 44 outlines, 174, 175
and WordPress, 39 padding, 154–155
writing, 198–199 position type, 160–161
.css extension, 98 rounded corners, 174, 175
CSS Gallery, 38 shadows, 172–173
CSS Import, 277 tables, 166–167
CSS semantics, 89–121. See also CSS text styles, 130–133
vocabulary values, 124–125
adding notes to CSS, 104–105 variables, 125
cascade, 120–121 visibility, 144–145
determining CSS rule’s weight, 114–115 width/height properties, 149–151
embedding styles in Web page, 94–95 CSS Work Group, W3C, 158
external styles in Web site, 96–103 CSS Zen Garden, 40, 42–43
importance, 116–117 CSS3.info, 255
inheritance, 106–109 csscompressor.com, 198
inline styles for HTML tag, 92–93 CSSEdit, 29
media types, 118–119 cursor, 170–171
order of style rules, 110–111
specificity in style rules, 112–113
where to put style rules, 90–103
CSS syntax, 49–87
rules of style, 50–59
D
data tables, 166–167
styles for special cases, 80–87 declaration, selector, 54
styles in context, 70–79 default styles, 194, 216–217
types of selectors, 60–69 default.css, 214, 217, 296
unforgiving nature of, 49 dependent class, 64–65
CSS validation, 274–277, 321 deployment, site, 204
CSS vocabulary, 123–175. See also CSS descendent selectors, 72–75
semantics design challenge, CSS Zen Garden, 40
2-D position, 162–163 design enhancements, 172–175, 254, 276
3-D position, 164–165 design iteration, 206–207
background, 134–139 design process, 180–181. See also Web design
borders, 152–153 Design Shack, 38
boxes, 140–159 DHTML, 12
cursor, 170–171 Dictionary, Urban, 122, 124
display type, 142–143 display properties, 142–143
float property, 146–147 <div> tag, 218
font properties, 126–129 Doctype switching, 319, 322
image position, 138–139 Document Object Model, 4. See also DOM
image repeat, 136–137 Dojo Toolkit, 12
keywords, 124 DOM, 4, 10
lists, 168–169 doubling-margins problem, 322
margins, 156–157 downloadable books, 292
maximum width/height properties, 150–151 downloadable fonts, 230–231, 237
minimum width/height properties, 150–151 Dreamweaver, 29

327
drop shadows, 172, 190 market share, 20
Dynamic HTML, 12 and rounded corners, 174
dynamic pseudo-classes, 80, 84, 170, 323 and shadows, 172
dynamic styles, 80 Fireworks, 32, 258
fixed position type, 160, 161
fixed vs. fluid layouts, 184–185, 186, 218

E
element boxes, 140, 141. See also boxes
.fla files, 4
Flash
as core Web technology, 4
Em Calculator, 285 and CSS, 14
Emastic, 278 delivering video with, 14
embedded styles, 90–91, 94–95, 283 and embedded fonts, 230
emphasis tag, 76, 78 float property, 146, 147
ems, 236, 285 floating elements, 146–147, 322
European mobile devices, 21 Flock, 23
Exljbris Font Foundry, 237 flourishes, 270
external style sheets, 96–103 fluid typography, 232–237
creating, 98–99 fluid vs. fixed layouts, 184–185, 186, 218
and CSS best practices, 282 focus, 84, 170
importing, 102–103 fold line, 186
linking to, 100–101 font families, 32, 126, 128. See also fonts
modular approach to adding, 214 font-family property, 128, 129, 198, 226
purpose of, 96 <font-name> variable, 125
strategies for combining, 202 font properties, 126–129
external styles, 90–91, 96 font property, 126–127
font-size property, 128, 129
font-style property, 128, 129

F
feedback
font-variant property, 128, 129
font-weight property, 128, 129
fonts. See also font families; typography
browser-synthesized, 126
and beta launches, 204 choosing, 234–235
and dynamic pseudo-classes, 84, 170 core Web, 226–227
and link pseudo-classes, 80 creating faux versions of, 126
making changes based on, 180 downloadable, 230–231, 237
and mood boards, 188 vs. font family or typeface, 228
filter:alpha property, 144, 145 iLife, 228
Firebug, 24, 25 importance of, 225
Firefox Microsoft Office, 228
add-ons, 24–27 operating system, 228
and border-radius property, 254 setting sizes for, 236, 281, 285
and CSS, 20 testing, 234
as development browser, 24 Web-safe, 32, 228–229, 234, 306–308
and downloadable fonts, 230 footers, 160, 268, 281
layout engine, 23 forms, 266
frameworks, 212–213, 278–279
FTP, 28

328
 hover state, 80, 81, 82, 170, 244, 298

G
Gecko, 23
HTML
code, for voxLibris, 291–301
as core Web technology, 1, 2
gel effect, 252 and CSS, 6–9
Georgia font, 226, 227 developer of, 8
GIF image format, 168, 258 and DOM, 4
global navigation menus, 248, 252 dynamic, 12
Good magazine, 272, 274 meaning of acronym, 6
Google Chrome, 23 purpose of, 2, 6
gradients, 136, 260, 264, 266 tags. See HTML tags
graph paper, 182 validating, 275
greek text, 196 HTML framework, 212–213
grid-based layouts, 40, 209, 218–223. See HTML selector, 60–61
also grids HTML tables, 40
Grid System, The, 208, 210 HTML tags
grid.css, 219, 221, 223 adding multiple classes to, 66–67
grids, 190, 209, 210, 218–223, 262–265 binding styles to, 50
guides, 190 creating basic style for, 50
how CSS acts on, 50
inline styles for, 92–93

H
handheld devices, 118, 282
purpose of, 6, 50
styling, 60–61
weight of, 114
hypertext links
hard launch, 204
creating, 243
hash mark, 68
purpose of, 243
<head> tag, 210, 283, 292
styling, 80, 243, 246
header cap image, 268
underlining, 246
header tags, 6
Hypertext Markup Language, 6. See also HTML
headers
basic style rule for, 54–55
combining style rules for, 58–59
creating with fixed elements, 160
declaring multiple styles for, 56–57
I
i love typography, 224, 226
for sidebars vs. main body, 70
tips for styling, 238–239 iCab, 23
headlines, 234 ID names, 4, 66, 270, 283, 286
height, fluid vs. fixed, 184–185, 186 ID selector, 68–69, 114
height property, 148–151 IE. See Internet Explorer
Helvetica font, 226 ie6.css, 320
hex color values, 24, 54, 194, 310–315 iLife fonts, 228
hiding elements, 144–145 Illustrator, 32
hip hop magazine, 50 ilovetypography.com, 224, 226
horizontal menus, 248, 250 image editors, 32, 258
image flashing, 244, 284

329
image position, 138–139 and CSS box model, 158–159, 222, 318,
image swapping, 244 322
image tiling, 136–137, 190 and Doctype switching, 319, 322
ImageReady, 192 and dynamic pseudo-classes, 84, 323
images and fixed elements, 160
background. See background images flaws, 20
embedding directly in page, 257 and inline-block display type, 142
floating, 146–147 and max/min-height properties, 150, 323
transparent, 192, 258–261 and max/min-width properties, 150, 323
<img> tag, 257, 284 and padding/borders, 158
Impact font, 226, 227 and PNG image format, 260, 323
import rule. See @import rule and pseudo-elements, 86
importance, 120 and quirks mode, 318, 319, 321
indents, 130, 132, 200 and stair-stepped elements, 322
index.html, 213, 292–294 testing on Macintosh, 22–23
inherit display type, 142 and underscore hack, 158, 260, 321, 323
inherit keyword, 124 and Web standards, 44, 317
inherit position type, 160 Internet Explorer 7 (IE7), 20, 44, 76, 84, 166,
inheritance, 106–109 317
how it works, 106–107 Internet Explorer 8 (IE8), 20, 44, 166, 254, 317
overriding, 108–109 invisible elements, 144
inline-block display type, 142 italic font, 128
inline boxes, 140 italics tags, 8
inline display type, 142 iteration, 206–207
inline elements, 6
inline styles, 90, 91, 92–93, 120, 283
Internet Channel, 23
Internet Explorer (IE). See also specific IE
versions
J
Java, 23
and CSS, 20 JavaScript
and downloadable fonts, 230 as core Web technology, 1, 2
and font sizes, 236 and CSS, 10–13
and @import rule, 203, 295 and DOM, 4, 10
layout engine, 23 libraries, 12
market share, 18, 20 purpose of, 2
and opacity, 144 JavaScript Object Notation, 12
quirks/fixes, 317–323 jigsaw.w3.org/css-validator, 274, 276
version considerations, 19 josbuivenga.demon.nl, 237
and Web standards, 44, 317 JPEGs, 168, 192
Internet Explorer 5 (IE5), 318 jQuery, 12
Internet Explorer 6 (IE6) JSON, 12
and caption-side property, 166
and child/sibling selectors, 76, 86
and conditional styles, 320, 323
and CSS, 20

330
 lipsum.com, 196

K
keywords, 124, 310
list element tags, 6
list-item display type, 142
list-style-image property, 168, 169
KHTML, 23 list-style-position property, 168, 169
Koch, Peter-Paul, 318 list-style property, 168, 169
Konquerer, 23 list-style-type property, 168, 169
Krista’s Creations, 13 list tags, 248
Kuler, 30, 31 lists, 168–169, 240
Lobo, 23
logos, 214, 260, 266–267, 270, 284

L Lorem Ipsum text, 196

launch, site, 204

layout engines, 23
layout grids, 209, 218–223, 297. See also
M
Macintosh
grids
layout.css, 214, 297 code editors, 28, 29
layouts, 209–223 core Web fonts, 226
adding CSS to, 214–215 operating system fonts, 228
default styles for, 216–217 testing IE6 on, 22–23
grid-based, 40, 209, 218–223 text editor, 98
structure for, 210–215 Web browsers, 18, 20–21
left position property, 138, 162, 163, 220 Web-safe fonts, 306
legacy browsers, 18 MacRabbit, 29
<length> value, 125, 138 main.css, 215, 295
Letter-Photo, 13 margin-bottom property, 156
letter-spacing property, 130, 131 margin-left property, 156
<li> tag, 248 margin property, 156, 157
libraries, JavaScript, 12 margin-right property, 156
Lie, Håkon Wium, 8 margin-top property, 156
line-height property, 130, 131 margins, 154, 156–157, 186, 322
link actions, 82–83 max-height property, 150, 151, 323
link colors, 82–83 max-width property, 150, 151, 323
link pseudo-classes, 80, 82 media types, 94, 118–119, 120
link states, 80–83, 244–245, 246, 298 menus, 160, 240, 248–251
<link> tag, 90, 96, 100, 102, 282 meta information, 210
links Microsoft
creating, 243 Internet Explorer. See Internet Explorer
in printed Web pages, 281 Office, 228
purpose of, 243 Visio, 182
styling, 80, 243, 246 and Web standards, 44
underlining, 246 Word, 98
Linux, 20 min-height property, 150, 151, 323
min-width property, 150, 151, 323

331
mobile devices, 21, 280 Open Type fonts, 230
modules, 222, 268 Opera
mood boards, 188–189 and CSS, 21
MooTools, 12 and downloadable fonts, 230
Mosaic, 8 layout engine, 23
mouse pointer, 170 popularity of, 21
-moz-border-radius property, 174, 175 and Web standards, 44
-moz-box-shadow property, 172, 173 Opera Mini, 23
Mozilla operating system fonts, 228
and CSS standards, 44 optimizing, 286
Firefox add-ons, 24–27 order, style, 110, 120
MSN Explorer, 23 ordered lists, 168
myths, CSS, 35–45 outline-color property, 174
outline property, 174, 175
outline-style property, 174

N
navigation, 243–255
outline-width property, 174
outlines, 174, 175, 223
overflow property, 148, 149
and anchor tags, 244

P
buttons, 252–254
and CSS sprites, 244, 284
hiding in printed Web page, 281
links, 246–247 padding, 154–155, 186, 218, 284
menus, 248–251 padding-bottom property, 154
navigation.css, 214, 298–299 padding-left property, 154
Netscape, 23 padding property, 154, 155
NewsGator, 28 padding-right property, 154
Nintendo DS Browser, 23 padding-top property, 154
no-repeat property, 136, 137 page flow, 184–185
none display type, 142 page framework, 212
normal keyword, 124 page header tags, 6. See also headers
NotePad, 98 Palette Grabber, 26
notes, 104–105 Panic Software, 16, 18, 28
<number> variable, 125 paragraph tags, 6
numbered lists, 168 paragraphs, styling, 86–87, 240
parent-inherited styles, 106, 120
<percentage-box-width+padding> value, 138

O
object IDs, 4
<percentage> variable, 125
Photoshop
and chrome, 192
OmniGraffle, 182 color considerations, 190
OmniWeb, 23 creating color palette for, 26
opacity, color, 310 low-cost alternative to, 32
opacity value, 144, 145 Proof Setup options, 190
and transparent PNGs, 192, 258

332
 and Web design process, 180 repeat-x property, 136, 137, 264
pixels, 285 repeat-y property, 136, 137
placeholder content, 196 RGB Alpha color format, 310
planning process, 182–191 RGB proof setup, 190
mood boards, 188–189 RGB values, 24, 54, 194, 285, 310–315
page flow, 184–185 right position property, 138, 220
sketches, 182–183 right property, 162, 163
visual comps, 190–191 Rijksmuseum Web site, 242, 244
wire frames, 186–187 rounded corners, 174, 175, 190, 254, 258
PlayStation, 21 rows, 212, 218–219, 264–265, 297
PNG image format, 168, 192, 258–261, 323 rules of style, 50–59
point sizes, 281 basic style rules, 54–55
Portfolio CSS Gallery, 38 combining rules, 58–59
position properties, 138, 220 declaring styles, 56–57
position type, 160–161 how they work, 50
Presto, 23 limiting scope of, 285
print, adapting designs for, 118, 281, 282 parts of style rules, 52–53
print process, 36
printer-friendly Web pages, 118
programming languages, 36
properties, style rule, 52
property shortcuts, 200, 286
S
Safari
prototypes, 180, 196–203 and CSS, 21
pseudo-classes, 80, 82, 170, 323 and design enhancements, 254
pseudo-elements, 80, 86 as development tool, 21
public domain books, 292 and downloadable fonts, 230
pull quotes, 146 layout engine, 23
and rounded corners, 174

Q
and shadows, 172
and Web standards, 44
screen media type, 118
quirks mode, 318, 319, 321 scroll lines, 186
Quirks Mode site, 318 search engine optimization, 283. See also SEO
quotes, 78–79, 146, 240 sections, 212, 222–223, 268–271, 297
selector declarations, 54
selectors, 60–75

R
readmore class, 246
adjacent, 78
child, 76
class, 62–67
RealPlayer, 23 defined, 52
relative position type, 160, 161 descendent, 72–75
relative URLs, 309 HTML, 60–61
rendering engines, 23 sibling, 76, 78
repeat property, 136, 137 semantics, 89–121. See also CSS vocabulary
adding notes to CSS, 104–105

333
 cascade, 120–121 style attribute, 90
determining CSS rule’s weight, 114–115 style guides, 194–195
embedding styles in Web page, 94–95 style rules, 50–59
external styles in Web site, 96–103 basic, 54–55
importance, 116–117 combining, 58–59
inheritance, 106–109 determining weight of, 114–115
inline styles for HTML tag, 92–93 how they work, 50
media types, 118–119 parts of, 52–53
order of style rules, 110–111 specificity in, 112–113
specificity in style rules, 112–113 where to put, 90–103
where to put style rules, 90–103 style sheet languages, 36
semicolon, in selector declarations, 56, 92, style sheets. See also CSS
285 combining, 202–203
SEO, 283, 284 creating, 98–99
server-side technologies, 2 external. See external style sheets
shadows, 172–173, 190 genesis of, 8
Shiira, 23 importing, 102–103
shorthand properties, 200, 286 linking to, 100–101
sibling selectors, 76, 78 for mobile devices, 280
sidebars, 70, 146 tailoring for specific media types, 118–119
site navigation, 243–255 <style> tag, 90, 94
and anchor tags, 244 styles
buttons, 252–254 applying to entire Web site, 96
and CSS sprites, 244, 284 based on where something is, 72–73
hiding in printed Web page, 281 browser-default, 106, 110, 120, 216–217,
links, 246–247 296
menus, 248–251 browser-inherent, 6
site-planning process, 182–191 for children, 76–77
mood boards, 188–189 conditional, 320, 323
page flow, 184–185 in context, 70–79
sketches, 182–183 declaring, 56–57
visual comps, 190–191 default, 106, 110, 120, 194, 216–217
wire frames, 186–187 dynamic, 80, 84–85
site plans, 180. See also site-planning process embedded, 90–91, 94–95, 283
sketches, 182–183 external, 90–91, 96–103
soft launches, 204 forcing application of, 116
Sony PlayStation, 21 framework, 279
Speaking In Styles Web site, 2, 172, 228, 291 inherited, 106
specificity, 112–113, 120 inline, 90, 91, 92–93, 120, 283
sprites, CSS, 168, 192, 244–245, 284 for link actions, 82–83
stacking order, 164 order of priority for, 120–121
stair-stepped elements, 322 organizing, 200–201
states, link, 80–83, 244–245, 246 overriding, 108, 110, 116
static position type, 160, 161 parent-inherited, 106, 120
strike-through effect, 130 for parts of paragraph, 86–87

334
 reusing, 270 Times font, 226
for siblings, 78–79 Times New Roman font, 226, 227
for special cases, 80–87 top-level navigation menus, 248, 280
text, 130–133 top position property, 138, 162, 163, 220
SUMO Paint, 32 TopStyle, 28
syntax, 49. See also CSS syntax transparent images, 192, 258–261
transparent keyword, 124
Trebuchet MS font, 226, 227

T
T-shirt company, 88, 90
Trident, 23
True Type fonts, 230
tutorials, Web design, 34
table-based layouts, 40 Twistori, 251
table tags, 6 typefaces, 228, 234–235. See also fonts;
tables, 166–167 typography
tags TypeTester, 32, 33
adding multiple classes to, 66–67 Typographic Desk Reference, The, 224
binding styles to, 50 typography, 225–241
creating basic style for, 50 as component of style guide, 194
how CSS acts on, 50 core Web fonts, 226–227
inline styles for, 92–93 downloadable fonts, 230–231
purpose of, 6, 50 fluid, 232–237
styling, 60–61 improvements in Web, 32
weight of, 114 previewing, 32
text styling text, 238–241
aligning, 130, 132, 133 Web-safe fonts, 32, 228–229, 234, 306–
capitalizing, 130 308
editing, 98 Typogridphy, 278
replacement, 266

U
sizing, 236
styling, 130–133, 238–241
underlining, 8, 130, 133, 216, 246
using placeholder, 196 UGSMAG, 50, 71
text-align property, 132, 133 underlining, 8, 130, 133, 216, 246
text-decoration property, 132, 133 underscore hack, 158, 260, 276, 321, 323
text editors, 98 Uniform Resource Locators, 309. See also
text-indent property, 132, 133 URLs
text replacement, 266 Unix, 20, 21
text-shadow property, 172, 173 unordered lists, 168
text-spacing properties, 130 Urban Dictionary, 122, 124
text styles, 130–133, 238–241 <url> variable, 125
text-transform property, 132, 133 URLs, 125, 281, 309. See also links
TextEdit, 98 usability reviews, 250
thegridsystem.org, 210 user feedback
Threadless, 88, 90 and beta launches, 204
tiling, image, 136–137, 190 and dynamic pseudo-classes, 84, 170

335
 and link pseudo-classes, 80 jargon, 255
making changes based on, 180 meaning of acronym, 44
and mood boards, 188 Web applications, 30–33
user interface, 192 Web browsers, 18–23. See also specific
UXBooth, 250 browsers
alternatives to leading, 22, 23
and CSS, 18, 20–21, 44, 317

V
Validation Service, W3C CSS, 274, 276, 277,
and design enhancements, 172, 254
and downloadable fonts, 230
and font sizes, 236
321 graphics-based, 8
validator.w3.org, 275 layout engines for, 23
values legacy, 18
as component of style rules, 52 Macintosh, 18, 20–21
types of, 124–125 most commonly used, 18
variables, 125 and outlines, 174
Verdana font, 226, 227 and rounded corners, 174
vertical-align property, 132, 133 and shadows, 172
vertical menus, 248, 251 viewing Web page on different, 19
video, 14 Windows, 20–21
visibility, 144–145 Web design, 179–207
visibility value, 144, 145 adapting for print, 281
visited state, 80, 81, 82, 244, 298 best practices, 284
visual comps and browser viewport, 150
adjusting margins/padding in, 186 building site, 192–203
comparing with actual Web site, 26 choosing tools for, 17
cutting chrome from, 192 deploying site, 204–205
and fluid typography, 232 vs. designing for other media, 150, 180
purpose of, 190 dynamic nature of, 180
and site-planning process, 180 as iterative process, 180, 206–207
static vs. dynamic, 82 making CSS central part of, 179
tips for creating, 190 overview of process, 180–181
voxLibris page-flow considerations, 184–185
code for, 291–301 planning phase, 182–191
inspiration for, 292 source of news and updates on, 2
as model for design process, 180 standards, 275
testing, 196
tools. See Web designer’s toolbox

W
W3C
Web Designer Wall, 34, 36
Web designer’s toolbox, 17–34
code editors, 28–29
design ideas, 34
and CSS, 44 Firefox add-ons, 24–27
CSS Validation Service, 274, 276, 277, 321 online tools, 30–33
CSS Work Group, 158 tutorials, 34

336
 Web browsers, 18–23 -webkit-box-shadow property, 172, 173
Web pages. See also Web sites weight, rule, 112, 114–115
adding structure to, 50 white-space property, 130, 131
core components of, 1–3 width, fluid vs. fixed, 184–185, 186, 218
creating printer-friendly version of, 118 width property, 148–151
embedding styles in, 94–95 Wii, 23
fluid vs. fixed, 184–185, 218 Windows
meta information for, 210 code editors, 28, 29
planning structure of, 186 core Web fonts, 226
setting default styles for, 210, 216–217 operating system fonts, 228
“skin” of, 257. See also chrome text editor, 98
structural elements, 210 Web browsers, 20–21
tailoring for specific media, 118–119 Web-safe fonts, 306
viewing on different browsers, 19 wire frames, 182, 186–187
viewing on mobile devices, 280 Word, Microsoft, 98
viewing printed, 281 word processors, 98
Web-safe fonts, 32, 228–229, 234, 306–308 word-spacing property, 130, 131
Web sites. See also Web pages WordPress, 39
analyzing CSS for, 29 World Wide Web Consortium, 44. See also W3C
applying styles to entire, 96
choosing color palette for, 30
choosing fonts for, 225, 234–235. See also
fonts
deploying, 180
X
XML, 12, 14
designing. See Web design
getting user feedback on. See feedback
navigation for. See navigation
planning, 180, 182–191
testing, 180, 196
Y
YAML, 278
vs. Web applications, 30
Web standards, 275 YUI Grids, 278
Web technologies, 2, 4
Web typography, 225–241
as component of style guide, 194
core Web fonts, 226–227
Z
z-index property, 164–165
downloadable fonts, 230–231
fluid, 232–237 Zen Garden, CSS, 40, 42–43
improvements in, 32
previewing, 32
styling text, 238–241
Web-safe fonts, 32, 228–229, 234, 306–
308
Webdings font, 226, 227
WebKit, 23
-webkit-border-radius property, 174, 175

337
Get free online access
to this book for 45 days!
And get access to thousands more by signing
up for a free trial to Safari Books Online!
With the purchase of this book you have instant online,
searchable access to it for 45 days on Safari Books Online!
And while you’re there, be sure to check out Safari Books
Online’s on-demand digital library and their free trial offer
(a separate sign-up process). Safari Books Online subscribers
have access to thousands of technical, creative and business
books, instructional videos, and articles from the world’s
leading publishers.

Simply visit www.peachpit.com/safarienabled and

enter code JNZJSAA to try it today.