Speaking in styles- P1

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

94
lượt xem 12
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Speaking in styles- P1: 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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Speaking in styles- P1

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark
{ speaking in styles } FUN D A M E N TA L S O F CS S for WE B DESIGNERS jason cranford teague se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
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-ﬁ, 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. se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Contents In trod u ction . . . . . . . . . . . . . . . . . . . . . . ix PART 1 A Web Primer Wh a t 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 Design er’ 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 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
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 Se m 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 se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Order . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Speciﬁcity . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
PART 3 Speaking Like a Native D e sign in g with CSS . . . . . . . . . . . 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 ayo u 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 Ty p o gra p hy . . . . . . . . . . . . . . . . . . . . . 225 9 Font Choices . . . . . . . . . . . . . . . . . . . . . . . . . 226 Core Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . 226 Web-Safe Fonts . . . . . . . . . . . . . . . . . . . . . . . . 228 Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . 230 se 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 Naviga tion . . . . . . . . . . . . . . . . . . . . . . 243 10 CSS Sprites . . . . . . . . . . . . . . . . . . . . . . . . . . 244 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 11 Ch rome . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Using Transparent Images . . . . . . . . . . . . . . 258 Fixing Transparent PNGs in IE6 . . . . . . . . . . . . . 260 Deﬁning the Grid. . . . . . . . . . . . . . . . . . . . . . 262 Columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Rows. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Logos and Forms . . . . . . . . . . . . . . . . . . . . . 266 Logos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Deﬁning Sections . . . . . . . . . . . . . . . . . . . . . 268 Alternate Version for Ads. . . . . . . . . . . . . . . . . . 268 Final Flourishes . . . . . . . . . . . . . . . . . . . . . . . . 270 12 T h e La st 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 Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
APPENDIXES A : voxLib ris Cod e . . . . . . . . . . . . . .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 : C SS 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 I n d ex . . . . . . . . . . . . . . . . . . . . . . . . . . . .324 se 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 waterm
Introduction se 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 waterm
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 se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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: Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
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. se 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 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). Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
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. se 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 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm
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 02 h1 { color: red; } 03 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 se purchase PDF Split-Merge on www.verypdf.com to remove this watermark.