CSS Web Design FOR DUMmIES ‰ 01_584251 ffirs.qxd 2/10/05 11:01 PM Page i TEAM LinG - Live, Informative, Non-cost and Genuine ! 01_584251 ffirs.qxd 2/10/05 11:01 PM Page ii TEAM LinG - Live, Informative, Non-cost and Genuine ! by Richard Mansfield CSS Web Design FOR DUMmIES ‰ 01_584251 ffirs.qxd 2/10/05 11:01 PM Page iii TEAM LinG - Live, Informative, Non-cost and Genuine ! CSS Web Design For Dummies ® Published by Wiley Publishing, Inc. 111 River Street Hoboken, NJ 07030-5774 www.wiley.com 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 permitted under 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 Copyright Clearance 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., 10475 Crosspoint 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. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ. 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: 2005920081 ISBN: 0-7645-8425-1 Manufactured in the United States of America 10987654321 1O/QS/QT/QV/IN 01_584251 ffirs.qxd 2/10/05 11:01 PM Page iv TEAM LinG - Live, Informative, Non-cost and Genuine ! 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). 01_584251 ffirs.qxd 2/10/05 11:01 PM Page v TEAM LinG - Live, Informative, Non-cost and Genuine ! 01_584251 ffirs.qxd 2/10/05 11:01 PM Page vi TEAM LinG - Live, Informative, Non-cost and Genuine ! 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. 01_584251 ffirs.qxd 2/10/05 11:01 PM Page vii TEAM LinG - Live, Informative, Non-cost and Genuine ! Publisher’s Acknowledgments We’re proud of this book; please send us your comments through our online registration form located at www.dummies.com/register/ . 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 01_584251 ffirs.qxd 2/10/05 11:01 PM Page viii TEAM LinG - Live, Informative, Non-cost and Genuine ! 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 Composition with 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 02_584251 ftoc.qxd 2/10/05 11:06 PM Page ix TEAM LinG - Live, Informative, Non-cost and Genuine ! [...]... Informative, Non-cost and Genuine ! xvii xviii CSS Web Design For Dummies TEAM LinG - Live, Informative, Non-cost and Genuine ! Introduction W elcome to the world of Cascading Style Sheets (CSS) With CSS, you can design gorgeous and highly effective Web sites CSS offers power 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... 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 TEAM LinG - Live, Informative, Non-cost and Genuine ! 2 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... TEAM LinG - Live, Informative, Non-cost and Genuine ! 5 6 CSS Web Design For Dummies CSS is loaded with features to improve productivity for Web page design and maintenance, if the designer knows how to exploit them CSS Web Design For Dummies is the handbook that takes the reader from idea to finished site I hope that all my work exploring CSS benefits you, showing you many useful shortcuts and guiding... they’ve never written a line of CSS or HTML, or designed a single Web page And if you’re an experienced CSS designer, better still You’ll find out how to accomplish sophisticated tasks quickly You also discover how to harness the machinery built into CSS You also find out how to leverage your current skills to prepare for the future of CSS programming: moving beyond CSS2 to CSS3 How to Use This Book This... downloadable from this book’s Web site at www.dummies.com/go/csswebdesign The following sections give you a brief description of the book’s five main parts Part I: The ABCs of CSS This first Part introduces CSS, explaining its purposes and fundamental nature You see how common tasks are accomplished and find out all about the elements of CSS design You also discover how CSS improves on HTML and find... .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... 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, administer, and write code for Web pages The book covers all the essentials of CSS, TEAM LinG - Live, Informative, Non-cost and... philosophy underlying CSS behaviors You’d fall asleep, believe me Instead, you get practical advice, and all the necessary information you need to make progress toward your goals TEAM LinG - Live, Informative, Non-cost and Genuine ! 7 8 CSS Web Design For Dummies How This Book Is Organized The overall goal of CSS Web Design For Dummies is to provide an enjoyable and understandable guide for the CSS designer... step-by-step examples showing how to manage the various elements 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... LinG - Live, Informative, Non-cost and Genuine ! 11 12 CSS Web Design For Dummies Avoid typos: find all the code online Every line of code that you see in this book is also available for downloading from the Dummies Web site at www.dummies.com/go/csswebdesign Take advantage of this handy electronic version of the code by downloading it from the Web site so that you can then just copy and paste source . Cascading Style Sheets (CSS) . With CSS, you can design gorgeous and highly effective Web sites. CSS offers power and flexibility to Web site developers and. Mansfield CSS Web Design FOR DUMmIES ‰ 01_584251 ffirs.qxd 2/10/05 11:01 PM Page iii TEAM LinG - Live, Informative, Non-cost and Genuine ! CSS Web Design