Wiley CSS Web Design For Dummies Mar 2005 ISBN 0764584251 pdf
CSS Web Design
FOR
DUMmIES
‰
by Richard Mansfield
CSS Web Design
FOR
DUMmIES
‰
® CSS Web Design For Dummies Published by Wiley Publishing, Inc.
111 River Street Hoboken, NJ 07030-5774 Copyright © 2005 by Wiley Publishing, Inc., Indianapolis, Indiana Published by Wiley Publishing, Inc., Indianapolis, Indiana Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by
any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permittedunder Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permis-
sion of the Publisher, or authorization through payment of the appropriate per-copy fee to the CopyrightClearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to
the Publisher for permission should be addressed to the Legal Department, Wiley Publishing, Inc., 10475Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, e-mail: .
brandreview@wiley.com
Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the
Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, and related trade
dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United
States and other countries, and may not be used without written permission. All other trademarks are the
property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor
mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REP-
RESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CON-
TENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT
LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CRE-
ATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CON-
TAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE
UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR
OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A
COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE
AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION
OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FUR-
THER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFOR-
MATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE.
For general information on our other products and services, please contact our Customer Care Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit www.wiley.com/techsupport .
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may
not be available in electronic books. Library of Congress Control Number: 2005920081ISBN: 0-7645-8425-1 Manufactured in the United States of America
10
9
8
7
6
5
4
3
2
1
1O/QS/QT/QV/IN
About the Author
Richard Mansfield was the editor of COMPUTE! Magazine from 1981 to 1987.
During that time, he wrote hundreds of magazine articles and two columns. From 1987 to 1991, he was editorial director and partner at Signal Research. He began writing books full-time in 1991 and has written 36 computer books since 1982. Of those, four became bestsellers: Machine Language for Beginners (COMPUTE! Books), The Second Book of Machine Language (COMPUTE! Books), The Visual Guide to Visual Basic (Ventana), and The Visual Basic
Power Toolkit (Ventana, coauthored by Evangelos Petroutsos). His books
combined have sold more than 500,000 copies worldwide and have been translated into 12 languages. Richard’s recent titles include Office 2003 Application Development All-in-One
Desk Reference For Dummies, Visual Basic .NET All-in-One Desk Reference For Dummies, Visual Basic .NET Weekend Crash Course, Visual Basic .NET Database Programming For Dummies, Visual Basic 6 Database Programming For Dummies (all published by Wiley), Hacker Attack (Sybex), and The Wi-Fi Experience: Everyone’s Guide to 802.11b Wireless Networking (Pearson Education, coauthored by Harold Davis).
Dedication This book is dedicated to David Lee Roach.
Author’s Acknowledgments
I want to thank acquisitions editor Katie Feltman for her thoughtful and help- ful advice. I’ve worked with Katie before, and she knows her stuff. I was also lucky to have two strong editors improve this book. Project editor Linda Morris asks the right questions, makes lots of good suggestions, and overall stands in as a representative of the reader. She requests clarification when necessary, and ensures that the reader will find consistent, useful informa- tion. She deserves credit for her taste and the high quality of her editing.
The technical editor, Vanessa Williams, reviewed the entire manuscript for technical quality. For that I thank her. I’m happy to report that she found few flaws in the programming code, but I’m certainly glad to have an opportunity to fix the few flaws she did spot. Vanessa also suggested alternative CSS tech- niques and additional resources, deepening the technical information avail- able in the book.
To these, and all the other good people at Wiley who contributed to the book, my thanks for the time and care they took to ensure quality every step along the way to publication.
Publisher’s Acknowledgments We’re proud of this book; please send us your comments through our online registration form .
Some of the people who helped bring this book to market include the following: Acquisitions, Editorial, and Media Development
Project Editor: Linda Morris Acquisitions Editor: Katie Feltman Copy Editor: Linda Morris Technical Editor: Vanessa Williams Editorial Manager: Carol Sheehan Media Development Manager:
Laura VanWinkle Media Development Supervisor:
Richard Graves Editorial Assistant: Amanda Foxworth Cartoons: Rich Tennant
(www.the5thwave.com) Composition Services
Project Coordinator: Adrienne Martinez Layout and Graphics: Carl Byers, Andrea Dahl, Lauren Goddard, Joyce Haughey, Stephanie D. Jumper, Melanee Prendergast
Proofreaders: Leeann Harney, Jessica Kramer Indexer: TECHBOOKS Production Services Publishing and Editorial for Technology Dummies
Richard Swadley, Vice President and Executive Group Publisher Andy Cummings, Vice President and Publisher Mary Bednarek, Executive Acquisitions Director Mary C. Corder, Editorial Director
Publishing for Consumer Dummies Diane Graves Steele, Vice President and Publisher Joyce Pepple, Acquisitions Director
Composition Services Gerry Fahey, Vice President of Production Services Debbie Stailey, Director of Composition Services
Contents at a Glance
Introduction ................................................................1
Part I: The ABCs of CSS .............................................13
Chapter 1: CSS Fulfills a Promise ...................................................................................15 Chapter 2: Getting Results with CSS ............................................................................31 Chapter 3: Up and Running with Selectors ..................................................................47 Part II: Looking Good with CSS ...................................67 Chapter 4: Taking a Position ..........................................................................................69 Chapter 5: All About Text ..............................................................................................85 Chapter 6: Managing Details in Style Sheets ..............................................................107 Chapter 7: Styling It Your Way .....................................................................................127 Part III: Adding Artistry: Design and Compositionwith CSS .................................................................153
Chapter 8: Web Design Basics ......................................................................................155 Chapter 9: Spacing Out with Boxes .............................................................................169 Chapter 10: Organizing Your Web Pages Visually ....................................................183 Chapter 11: Designing with Auto and Inline Elements ..............................................197 Chapter 12: Handling Tables and Lists (And Doing Away with Tables) ..................................................................................207
Chapter 13: Creating Dramatic Visual Effects ............................................................233 Part IV: Advanced CSS Techniques ............................251 Chapter 14: Specializing in Selection ..........................................................................253 Chapter 15: CSS Moves into the Future ......................................................................265 Chapter 16: Programmatic CSS ....................................................................................279 Chapter 17: Testing and Debugging ............................................................................297 Part V: The Part of Tens ...........................................317 Chapter 18: Ten Great CSS Tips and Tricks ................................................................319 Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important) ....................................................................................................329
Index .......................................................................339
Table of Contents
Introduction..................................................................1
Creating Compelling Designs .........................................................................1 Separating Content from Style .......................................................................1 Benefiting from the Cascade ..........................................................................2 The End of the Browser Wars ........................................................................3 Who Should Read This Book .........................................................................4
For designers, would-be designers, programmers, and developers alike .........................................................................5 Making do in a shaky economy ...........................................................5
Plain, Clear English .........................................................................................6 How to Use This Book ....................................................................................6 Foolish Assumptions ......................................................................................7 How This Book Is Organized ..........................................................................8
Part I: The ABCs of CSS .........................................................................8 Part II: Looking Good with CSS ............................................................9 Part III: Adding Artistry: Design and Composition with CSS ............9 Part IV: Advanced CSS Techniques ...................................................10 Part V: The Part of Tens ......................................................................10 Conventions Used in This Book ..................................................................11 Special symbols ...................................................................................11 Avoid typos: find all the code online ................................................12 What you need to get started ............................................................12 Icons used in this book .......................................................................12
Part I: The ABCs of CSS ..............................................13
Chapter 1: CSS Fulfills a Promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Improving HTML ...........................................................................................15 Getting Efficient with CSS .............................................................................17 Changing Web design for the better .................................................17 Being ready for anything ....................................................................18 Designers Want to Design ............................................................................20 Where CSS Fits with the Tools You Already Use .......................................22 Getting Practical ............................................................................................24 Look for CSS features in your current software ..............................24 Resources on the Web ........................................................................24 Avoiding Browser Compatibility Problems ................................................25 Getting Dramatic with Filters .......................................................................26CSS Web Design For Dummies
Chapter 2: Getting Results with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . .31 Starting from Scratch ....................................................................................31 Selectors and Such: CSS Syntax ...................................................................33 Properties refer to attributes .............................................................34 Grouping ...............................................................................................35 Showing Some Class .....................................................................................35 Specifying All-Purpose Properties ..............................................................37 Using an ID Selector ......................................................................................38 Specifying more than one class .........................................................40 Capitalizing on case-sensitivity .........................................................40 Just stay in lowercase .........................................................................41 When Styles Cascade ....................................................................................41 Visualizing specificity .........................................................................41 Understanding CSS specificity ...........................................................43 Grasping Inheritance ....................................................................................45 Chapter 3: Up and Running with Selectors . . . . . . . . . . . . . . . . . . . . . .47 Working with Universal Selectors ...............................................................48 Using Multiple Declarations .........................................................................49 Using Attributes as Selectors ......................................................................50 The Simplest Attribute Selector ..................................................................52 Matching attribute selection types ...................................................53 Matching partial attribute values ......................................................53 Matching exact attribute values ........................................................54 Building Your First Style Sheet ....................................................................54 Transforming a Word document into a Web page ...........................55 Visualizing levels of specificity ..........................................................57 Creating an External Cascading Style Sheet ..............................................59 The importance of !Important ...........................................................60 The importance of being closest .......................................................62 Omit semicolons ..................................................................................62 Everything must be important ..........................................................62 Adding New Selectors ...................................................................................63 When Cascades Collide ................................................................................64 Part II: Looking Good with CSS ...................................67 Chapter 4: Taking a Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 Relativity Explained ......................................................................................72 Flow Versus Positioning, Floating Versus Coordinates ............................73 Controlling Layout with Offsetting .............................................................76 Moving Deeper into Positioning ..................................................................79 Stacking Elements on Top of Each Other with the Z-Axis ........................81 Combining Stacking with Translucence .....................................................82
Chapter 5: All About Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85 Thinking About User Interfaces ..................................................................85 Substituting Fonts .........................................................................................86 Types of Type ................................................................................................87 Avoiding monospace ...........................................................................90 Using system styles .............................................................................91 All Roads Lead to Rome ...............................................................................92 Simplicity above all .............................................................................92 When you’re not too picky about typeface .....................................94 Using Font Variants .......................................................................................94 Specifying Font Weight .................................................................................95 Using the Font-Variant for Small Caps ........................................................96 Simple Font-Style ...........................................................................................96 Choosing the Right Typeface Size ...............................................................97 Specifying relative sizes ......................................................................97 Controlling font size with greater precision ....................................98 Specifying Absolute Measured Sizes ..........................................................99 Font: The All-Purpose Property .................................................................100 Adjusting Line Height .................................................................................101 Decorating Text with Underlining and Strikethrough ............................103 Transforming Text with Capitalization .....................................................104 Shading with Drop-Shadowing ...................................................................105 Chapter 6: Managing Details in Style Sheets . . . . . . . . . . . . . . . . . . .107 Specifying Size and Position ......................................................................107 Measuring length ...............................................................................108 Understanding little em ....................................................................109 Figuring the Percentages ............................................................................111 Adding a Bit of Color ...................................................................................113 Creating special paragraph styles ...................................................115 Calculating color ...............................................................................115 Using the color list ............................................................................116 Coloring borders ...............................................................................118 Using inset border colors .................................................................119 Where does light come from? ..........................................................121 Coloring the Background ...........................................................................123 Chapter 7: Styling It Your Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Kerning for Better Headlines .....................................................................127 True kerning .......................................................................................129 Ultra kerning ......................................................................................131 Vertical Tightening ......................................................................................133 Adjusting percentages ......................................................................133 Understanding baselines ..................................................................135 CSS3 Introduces Kerning Mode .................................................................135 Table of Contents
Word spacing ...............................................................................................135 Aligning Text ................................................................................................138
Vertical aligning .................................................................................138 Using descriptive values ..................................................................139 Aligning by percentages ...................................................................140
Horizontal Alignment ..................................................................................141 Indenting Text ..............................................................................................142 Texturing ......................................................................................................143 Setting Individual Background Properties ...............................................147
No background inheritance ..............................................................148 Special repeats ...................................................................................148
Background Positioning .............................................................................149
Part III: Adding Artistry: Design and Composition with CSS ...............................................153 Chapter 8: Web Design Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 Organizing with White Space .....................................................................156 Take a second look ............................................................................156 Getting on balance ............................................................................156 Emphasizing an Object with Silhouetting ................................................159 Adding Drop Caps .......................................................................................160 Trapping White Space ................................................................................163 Following the Rule of Thirds ......................................................................164 The four hot spots .............................................................................165 Background image positioning ........................................................166 Keeping It Appropriate ...............................................................................168 Chapter 9: Spacing Out with Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . .169 Getting a Grip on Boxes ..............................................................................169 Adding a border .................................................................................171 Adding padding .................................................................................171 Adding a margin .................................................................................172 Vertical Positioning .....................................................................................173 Horizontal Positioning ................................................................................176 Breaking Up Text with Horizontal Lines ...................................................178 Chapter 10: Organizing Your Web Pages Visually . . . . . . . . . . . . . . .183 Managing Borders .......................................................................................184 Specifying a simple border ...............................................................184 Choosing from lotsa border styles ..................................................186 Mixing and matching styles .............................................................188 Specifying border width ...................................................................189 Coloring a border ..............................................................................190 CSS Web Design For Dummies
Floating About .............................................................................................191 Canceling a Float with Clear ......................................................................194
Chapter 11: Designing with Auto and Inline Elements . . . . . . . . . . .197 Employing Auto to Control Layout ...........................................................197 Specifying margins ............................................................................200 Centering ............................................................................................201 Using !DOCTYPE to force IE to comply ...........................................201 Vertical Positioning with Auto ...................................................................202 Handling Inline Elements ............................................................................203 Chapter 12: Handling Tables and Lists (And Doing Away with Tables) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .207 List Styles O’ Plenty ....................................................................................208 Getting exotic with the list-style-image property ..........................210 Positioning lists .................................................................................211 Putting it all together ........................................................................213 Managing Tables ..........................................................................................213 Stalking invisible .gifs ........................................................................213 Employing the table-layout property .............................................214 Avoiding properties not supported by IE .......................................216 Doing Without Tables .................................................................................216 Positioning where you will ...............................................................217 Placing content willy-nilly ................................................................217 Loving your layout a little too much ...............................................222 Creating Columns that Resize with the Browser .....................................224 Building Fixed Columns ..............................................................................228 Chapter 13: Creating Dramatic Visual Effects . . . . . . . . . . . . . . . . . . .233 Impressing with Static Filters ...................................................................234 Dazzling with Transition Filters ................................................................238 Fading Between Images ..............................................................................243 Transitions between Pages ........................................................................246 Part IV: Advanced CSS Techniques ............................251 Chapter 14: Specializing in Selection . . . . . . . . . . . . . . . . . . . . . . . . . .253 Getting Specific with Inheritance ..............................................................253 Grasping tree structure ....................................................................254 Parents versus ancestors .................................................................254 When a root sits above the tree ......................................................255 The shaky tree ...................................................................................256 Offspring Inheriting .....................................................................................257 Table of Contents
CSS Web Design For Dummies
Contextual Selectors ...................................................................................257 Selecting by context rather than grouping ....................................258 Descending deeper ............................................................................261 Styling distant descendants .............................................................262
Thwarting Descendant Selectors ..............................................................263 Selectors Using Attributes .........................................................................264
Chapter 15: CSS Moves into the Future . . . . . . . . . . . . . . . . . . . . . . . .265 Getting to Know CSS3 .................................................................................265 Working with Mozilla-supported CSS3 features .............................266 Setting opacity ...................................................................................268 Discovering False Pseudo-Classes ............................................................269 Hyperlink formatting with pseudo-classes ....................................270 Hovering with pseudo-classes .........................................................272 Adding your own class name to a pseudo-class ............................272 Selecting first children ......................................................................273 Employing Fake Pseudo-Elements ............................................................273 Creating quick drop caps with first-letter ......................................274 Using the first-line element for special lines of text ......................275 The Future of Pseudo .................................................................................275 Enabling, disabling ............................................................................276 Checking radio buttons and check boxes ......................................276 Figuring Out Dubious Descendant Selectors ...........................................277 Chapter 16: Programmatic CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279 Extending CSS with Scripting .....................................................................279 Executing Scripts Automatically upon Loading ......................................282 Using the Right Tools for the Job ..............................................................283 Modifying CSS Styles through Programming ...........................................284 Changing styles ..................................................................................284 Changing the rules ............................................................................288 Timing Things Right ....................................................................................290 Grasping countdown timers ............................................................293 Employing metronome timers .........................................................294 Chapter 17: Testing and Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . .297 Checking Punctuation .................................................................................297 Validating Your Work ..................................................................................300 Ignoring Fringe Browsers ...........................................................................301 Going back in time .............................................................................301 What if you must consider compatibility? .....................................301 Checking compatibility charts .........................................................302 Sniffing browsers ...............................................................................302 Forcing users to upgrade ..................................................................303
Table of Contents
Trying Out the W3C Validator ...................................................................304 Hoping for helpful error messages ..................................................307 Identifying property value problems ..............................................308
Validating HTML ..........................................................................................309 Meeting some requirements ............................................................310 Finding a better bug trap ..................................................................314
Debugging Script .........................................................................................315
Part V: The Part of Tens ............................................317 Chapter 18: Ten Great CSS Tips and Tricks . . . . . . . . . . . . . . . . . . . . .319 Letting Users Control Font Size .................................................................319 Making Sure Your Borders Show Up .........................................................320 Watching Out for Color Clash ....................................................................320 Centering for Everyone ..............................................................................320 Timing Blurring and Other Effects ............................................................321 Debugging Script .........................................................................................323 Finding a List Apart (Get It?) .....................................................................324 Using Your Own Bullets in Lists ................................................................324 Specifying Graphics Locations ..................................................................325 Combining Classes ......................................................................................326 Aunt Mildred’s Glazed Carrots ..................................................................327 Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
Keeping Current via the Internet ...............................................................330 Upgrading HTML Web Pages to CSS .........................................................330 Finding Good Tutorials and Reference Information ...............................330 Remembering Inheritance ..........................................................................331 The SelectORacle: Getting Explanations About Complicated Rules ....332 Providing Alternatives ................................................................................332 Letting the User Decide ..............................................................................333 Exploring Visual Studio ..............................................................................335 Rediscovering Columns ..............................................................................336 Playing with Positions ................................................................................337
Index........................................................................339
CSS Web Design For Dummies
Introduction
elcome to the world of Cascading Style Sheets (CSS). With CSS, you can design gorgeous and highly effective Web sites. CSS offers power
W
and flexibility to Web site developers and designers. This book shows you how to use CSS to make your Web pages come alive. Marketing experts like to say that the box helps sell the jewelry. CSS does several useful things, but one of the most important is to help you design much more attractive packages to hold your Web page contents.
Creating Compelling Designs
CSS allows you to separate presentation from content when building a Web site. Put another way, HTML itself is rather limited in what it can effectively display. It’s fine for holding or describing content (such as a paragraph of text), but the appearance of raw HTML Web pages isn’t very stylish (to put it kindly). With HTML, you often can’t find an easy way — or any way at all — to display the content so that it looks really good when someone views it in a browser. Using CSS techniques, you can often make your site much more attractive, and at the same time, enforce style rules that help unify the entire site’s appearance across all its pages. In this book, you find out how to wrap your online content in appealing visual designs using CSS, including special dramatic effects such as animated transi- tions between images or entire pages. Style sheets can provide striking, well- designed containers into which relatively plain HTML content is poured.
The best Web pages aren’t merely efficient, logical, and stable — they also
look really cool. The end result of employing CSS is a more attractive Web site with a more coherent, effective overall design.
Separating Content from Style
CSS also improves efficiency by allowing you to separate content from the styles that control the content’s appearance. You can describe your CSS styles in the header section of a Web page — thereby moving them up and out of
CSS Web Design For Dummies
the HTML code. Or you can even put your CSS style rules in entirely separate files. A Web page’s HTML resides in one file. It merely includes a link specify- ing the location of the independent CSS file that contains the style rules (how a Heading 1 headline or paragraph elements are supposed to look, where they’re positioned, how big they are, what texture underlies them, and so on). If you’re a designer working on a Web page with a programmer, it’s more efficient for you to separate your code from the programmer’s HTML or script code. A designer can work on an external CSS style sheet, rather than wading through the programmer’s HTML files and trying to manage style attributes embedded within the HTML code. The HTML programmer will appreciate this, and so will you, the CSS designer. No more stepping on each other’s toes. Of course, many Web sites are designed by a single person wearing many hats: HTML, script, and CSS can all be written by one talented individual. This book doesn’t neglect that audience. Most of the CSS examples in this book are contained within HTML pages, demonstrating how the entire page works in harmony. You can just load the book’s examples into your browser and see the delightful results immediately. An entire chapter is even devoted to scripting, so that you can get your feet wet with interactive dynamic CSS effects as well.
Benefiting from the Cascade
CSS offers various kinds of benefits. For example, a single style sheet can cas-
cade its effects through all the pages in a Web site. One side of effect of this is
that if you decide to change your site’s default body font from Arial to Times New Roman, you need make that change only once within the style sheet, rather than hunting down all the attributes throughout the entire set of HTML code files that make up your site. Another benefit of using CSS is that the style sheet only needs to be downloaded once to the user’s computer. Thereafter, it’s called up from a local cache, resulting in smaller HTML pages. Your Web pages load faster into the user’s browser — still a major consideration for the 60 percent or so of online Americans who still don’t have broadband high- speed Internet connections.
If you’ve already worked with CSS, this book will sharpen your skills and show you lots of new techniques. You’ll take your Web design to the next level. If you’re new to CSS, you’re in the right place: You’ll find just what you need here to build unified, attractive, inviting Web sites.
This book shows you, the CSS designer, how best to exploit, expand, adminis- ter, and write code for Web pages. The book covers all the essentials of CSS,
Introduction
with many step-by-step examples showing how to manage the various ele- ments of CSS, including: ⻬ How to design Web pages without using tables ⻬ Understanding CSS inheritance ⻬ Best coding techniques ⻬ Page elements (spacing, fonts, colors, and so on) ⻬ Practical ways to integrate CSS into new or existing Web sites ⻬ Syntax rules, properties, and values ⻬ How CSS works together with HTML and scripting ⻬ Embedded and external style sheets ⻬ Advanced visual effects such as transitions ⻬ Selectors and declarations ⻬ The latest CSS3 features
The End of the Browser Wars
CSS has been available for several years, but, like DHTML (dynamic HTML for Web page animation effects), CSS languished because of the browser wars. Basically, Netscape’s Navigator and Microsoft’s Internet Explorer attempted to enforce different, proprietary standards. Now that Netscape is all but dead in the marketplace and standards have become relatively stable because of the dominance of Internet Explorer, CSS has become a major technology for the creation and design of first-rate Web sites. Some incompatibility issues still exist, but this book deals with them only occasionally. Why? Because often you need not write complex, workaround code to take into account an audi- ence so small that, practically speaking, many Web pages simply ignore them.
That said, I realize that some designers are forced to deal with browser com- patibility issues, so I do explore the topic in some depth in Chapter 17. You see how to detect which browser and version the user has and how to take appropriate steps to deal with it in your Web page code. I also tell you where to find the best compatibility charts online; how to see what your page looks like and test its behavior in non-compliant browsers; and how to automati- cally redirect a browser to a different Web page or Web site if that browser can’t deal with your CSS code.
A few years ago, people were moving from Netscape to Internet Explorer, but a large percent of your Web site’s audience was still using Netscape. You had to write CSS (and HTML and scripting) that worked effectively in both browsers.
CSS Web Design For Dummies
That’s simply no longer true. The migration is over; Netscape is merely a ghost wandering the halls of the computer history museums. Most CSS books waste lots of space on compatibility issues. I’ve decided to greatly reduce coverage of that topic for precisely the same reason that today’s newspapers infrequently devote space to the Gulf War of 1991. That war’s over. Same with Netscape and the other, minor browsers like Opera that have a small user base. History and popular opinion has elected Internet Explorer (IE) as the standard — who are we to argue? One exception is Mozilla Firefox, which is coming out of left field and could eventually challenge Internet Explorer’s dominance in the browser arena. Firefox is an “open source” — in other words, “no charge” — piece of software. Of course, Internet Explorer is also sometimes described as free. True, it comes “free” with Windows, but as we all know, that’s not precisely the same as no charge. You do buy Windows, and its browser is a feature of Windows that you get bundled into the operating system. Another meaning of open source is that the code, the programming underly- ing the Firefox browser, is available to anyone. Lots of good programmers are writing interesting plug-ins and modifications that you can add to Firefox to give it new features. Firefox is fast, sleek, and overall pretty stable. In fact, it’s not under constant attack by hackers, as is IE. There are two reasons for this: not too many people are using Firefox (yet), so the payoff of using it to spread viruses is rather poor. Second, virus authors are frequently in sympathy with the ideals of the open source software community, and, shall we say, less inclined to appreciate Microsoft. So, watch out, IE. Firefox, or something similar, could eventually gain market share and, possibly, eventually become the browser standard. But for now, more than 95 percent of browser users are looking at your Web page through