Speaking in styles: fundamentals of CSS for Web designers

361 Pages·2009·15.36 MB·English

by  Teague, Jason Cranford

{ speaking in styles }
for
FUNDAMEN TALS OF CSS 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 [email protected]
Copy Editors: New Riders is an imprint of Peachpit, a division of Pearson Education
Dan Foster,
Darren Meiss Copyright © 2009 Jason Cranford Teague
Compositor:
Notice of Rights
Jason Cranford Teague
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 [email protected].
Glossbrenner
Cover and Interior Notice of Liability
Designer:
Jason Cranford Teague
Th e 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 soft 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
identifi ed throughout this book are used in editorial fashion only and for the
benefi 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 affi 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
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
Introduction ix
. . . . . . . . . . . . . . . . . . . . . .
PART 1 A Web Primer
1 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
2 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
3 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
4 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
5 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
Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Specifi city . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Determining a CSS Rule’s Weight. . . . . . . . . . . . 114
Importance . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Media. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
The Cascade . . . . . . . . . . . . . . . . . . . . . . . . . 120
6 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
PART 3 Speaking Like a Native
7 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
8 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
9 Typography 225
. . . . . . . . . . . . . . . . . . . . .
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
10 Navigation 243
. . . . . . . . . . . . . . . . . . . . . .
CSS Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . 244
Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246
Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
11 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
12 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
APPENDIXES
A 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 B: CSS Values 303
. . . . . . . . . . . . . . . . . .
Lengths . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Pixels or Ems?. . . . . . . . . . . . . . . . . . . . . . . . . 304
Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306
URLs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Color. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310
Color Opacity. . . . . . . . . . . . . . . . . . . . . . . . . . 310
C 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
. . . . . . . . . . . . . . . . . . . . . . . . . . . .