Speaking in styles- P1

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

instructions contained in this book or by the computer so ware 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
identi ed throughout this book are used in editorial fashion only and for the
bene t 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 a liation 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
9 8 7 6 5 4 3 2 1
Printed and bound in the United States of America
Project Editor:
Nancy Peterson
Development Editor:
Brenda McLaughlin
Technical Editor:
Dave Artz
Production
Coordinator:
Cory Borman
Copy Editors:
Dan Foster,
Darren Meiss
Compositor:
Jason Cranford Teague

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

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.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Introduction
. . . . . . . . . . . . . . . . . . . . . .
ix
PART 1
A Web Primer
What is a Web Page?
. . . . . . . . . . .
1
HTML, JavaScript, and CSS
. . . . . . . . . . . . . . .
2
What Is the DOM? . . . . . . . . . . . . . . . . . . . . . . . . 4
HTML and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . 6
JavaScript and CSS . . . . . . . . . . . . . . . . . . . . . . 10
Flash and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Web Designer’s Toolbox
. . . . . .
17
Web Browsers
. . . . . . . . . . . . . . . . . . . . . . . . .
18
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
Contents
1
2
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

The Myths of CSS
. . . . . . . . . . . . . .
35
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
Syntax:
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
Semantics:
Making Sense of Styles
. .
89
Where to Put Style Rules
. . . . . . . . . . . . . . . .
90
Inline Styles for an HTML Tag . . . . . . . . . . . . . . . . 92
Embed Styles in a Web Page . . . . . . . . . . . . . . . . 94
External Styles in a Web Site . . . . . . . . . . . . . . . . 96
Adding Notes to CSS
. . . . . . . . . . . . . . . . . . .
104
Inheritance
. . . . . . . . . . . . . . . . . . . . . . . . . . .
106

Overriding Inheritance . . . . . . . . . . . . . . . . . . . . 108
3
5
4
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Order
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
110
Specifi city
. . . . . . . . . . . . . . . . . . . . . . . . . . .
112
Determining a CSS Rule’s Weight. . . . . . . . . . . . 114
Importance
. . . . . . . . . . . . . . . . . . . . . . . . . .
116
Media
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
118
The Cascade
. . . . . . . . . . . . . . . . . . . . . . . . .
120
Vocabulary:
Talking the Talk
. . . . . . .
123
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
6
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
PART 3
Speaking Like a Native
Designing with CSS
. . . . . . . . . . .
179
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
Layout
. . . . . . . . . . . . . . . . . . . . . . . . . . .
209
Structure
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
210
Head and Body . . . . . . . . . . . . . . . . . . . . . . . . 210
The HTML Framework for CSS . . . . . . . . . . . . . . 212
Adding CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Default Styles
. . . . . . . . . . . . . . . . . . . . . . . .
216
Resetting Browser Default Styles . . . . . . . . . . . . 216
Setting Your Default Styles . . . . . . . . . . . . . . . . 216

The Grid
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
218
Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Sections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222
Typography
. . . . . . . . . . . . . . . . . . . . .
225
Font Choices
. . . . . . . . . . . . . . . . . . . . . . . . .
226
Core Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . 226
Web-Safe Fonts . . . . . . . . . . . . . . . . . . . . . . . . 228
Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . 230
7
8
9
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Fluid Typography
. . . . . . . . . . . . . . . . . . . . . .
232
Choosing Typefaces . . . . . . . . . . . . . . . . . . . . . 234
Styling Text
. . . . . . . . . . . . . . . . . . . . . . . . . .
238
Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
Paragraph and Block Quotes . . . . . . . . . . . . . . . 240
Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
Navigation

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

Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
Defi ning Sections
. . . . . . . . . . . . . . . . . . . . .
268
Alternate Version for Ads. . . . . . . . . . . . . . . . . . 268
Final Flourishes . . . . . . . . . . . . . . . . . . . . . . . . 270
The 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
10

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

303
Lengths
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
304
Pixels or Ems? . . . . . . . . . . . . . . . . . . . . . . . . . 304
Fonts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
306
URLs
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
309
Color
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
310
Color Opacity . . . . . . . . . . . . . . . . . . . . . . . . . . 310
C: Fixing Internet Explorer
. . . .
317
Understanding Quirks
. . . . . . . . . . . . . . . . .
318
Fix 1: Doctype Switching
. . . . . . . . . . . . . . .
319
Fix 2: Conditional Styles
. . . . . . . . . . . . . . .
320
Fix 3: Underscore Hack
. . . . . . . . . . . . . . . .
321

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

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.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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.
 is 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 di erent:
Verbalizing the Visual
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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.  e
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  ll in missing details, such as that all four lines should touch
at their ends.
As good as they are becoming at understanding humans, comput-
ers still require that we communicate explicitly when we describe
something, especially when that something is a visual design. A
computer will not  ll in the details.
What is needed is a language that you can use to quickly and pre-
cisely describe your designs in such a way that the computer will
understand them without fault.  at language is called Cascading
Style Sheets (CSS), and it is a language you need to master to be
a successful Web designer.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Why CSS?
Cascading Style Sheets (CSS) is the language you use to tell
computers how you want your designs to look on the Web.
With CSS, you can specify details including widths, heights,
colors, margins, padding, borders, backgrounds, and type styles.
Understanding this language, then, becomes critical to achieving
the best online designs.
One of the constant complaints I hear from designers is that
developers never execute their design correctly. Learning CSS
gives you two important advantages as a designer:
01 Control over how your designs look online. If something
is the wrong color or is not lining up right, you will know
what is wrong and how to  x it.
02  e ability to create better Web designs. Knowing how
CSS works means knowing how to get the best results from
what is possible.
 e good news is that speaking CSS is not that di erent from

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

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
NAME ABBREVIATION
ACTIVE
VERSIONS
Internet Explorer IE 6, 7, 8
Firefox FF 3, 4
Safari Sa 3, 4
Opera Op 8, 9, 10
Chrome Ch 1, 2
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.