Integrated HTML and CSS: A Smarter, Faster Way to Learn Virginia DeBolt SYBEX® 4378Book.fm Page i Tuesday, November 16, 2004 5:50 PM Integrated HTML and CSS: A Smarter, Faster Way to Learn TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page ii Tuesday, November 16, 2004 5:50 PM TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page iii Tuesday, November 16, 2004 5:50 PM Integrated HTML and CSS: A Smarter, Faster Way to Learn Virginia DeBolt San Francisco London TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page iv Tuesday, November 16, 2004 5:50 PM Publisher: Dan Brodnitz Acquisitions Editor: Willem Knibbe Developmental Editor: Pete Gaughan Production Editor: Leslie Light Technical Editor: Molly Holzschlag Copyeditor: Sally Engelfried Compositor: Laurie Stewart, Happenstance Type-O-Rama Graphic Illustrator: Jeffrey Wilson, Happenstance Type-O-Rama CD Coordinator: Dan Mummert CD Technician: Kevin Ly Proofreaders: Nancy Riddiough, Amy McCarthy, Jim Brook Indexer: Nancy Guenther Cover design and photo-illustration: John Nedwidek, Emdesign Copyright © 2005 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA 94501. World rights reserved. The author(s) created reusable code in this publication expressly for reuse by readers. Sybex grants readers limited permission to reuse the code found in this publica- tion or its accompanying CD-ROM so long as the author(s) are attributed in any application containing the reusable code and thecode itself is never distributed, posted online by electronic transmission, sold, or commercially exploited as a stand-alone product. Aside from this specific exception concerning reusable code, no part of this publication may be stored in a retrieval system, transmitted, or repro- duced in any way, including but not limited to photocopy, photograph, magnetic, or other record, without the prior agreement and writ- ten permission of the publisher. Library of Congress Card Number: 2004109318 ISBN: 0-7821-4378-4 SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc. in the United States and/or other countries. Screen reproductions produced SnapZ Pro X. © 1994–2004 Ambrosia Software, Inc. All rights reserved. The CD interface was created using Macromedia Director, COPYRIGHT 1994, 1997–1999 Macromedia Inc. For more information on Macromedia and Macromedia Director, visit http://www.macromedia.com. Mozilla is a trademark of the Mozilla Foundation. TRADEMARKS: SYBEX has attempted throughout this book to distinguish proprietary trademarks from descriptive terms by following the capitalization style used by the manufacturer. The author and publisher have made their best efforts to prepare this book, and the content is based upon final release software when- ever possible. Portions of the manuscript may be based upon pre-release versions supplied by software manufacturer(s). The author and the publisher make no representation or warranties of any kind with regard to the completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged to be caused directly or indirectly from this book. Manufactured in the United States of America 10 9 8 7 6 5 4 3 2 1 TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page v Tuesday, November 16, 2004 5:50 PM Software License Agreement: Terms and Conditions The media and/or any online materials accompanying this book WARRANTY that are available now or in the future contain programs and/or SYBEX warrants the enclosed media to be free of physical defects text files (the "Software") to be used in connection with the book. for a period of ninety (90) days after purchase. The Software is not SYBEX hereby grants to you a license to use the Software, subject available from SYBEX in any other form or media than that to the terms that follow. Your purchase, acceptance, or use of the enclosed herein or posted to www.sybex.com. If you discover a Software will constitute your acceptance of such terms. defect in the media during this warranty period, you may obtain The Software compilation is the property of SYBEX unless a replacement of identical format at no charge by sending the otherwise indicated and is protected by copyright to SYBEX or defective media, postage prepaid, with proof of purchase to: other copyright owner(s) as indicated in the media files (the "Owner(s)"). You are hereby granted a single-user license to use SYBEX Inc. the Software for your personal, noncommercial use only. You Product Support Department may not reproduce, sell, distribute, publish, circulate, or commer- 1151 Marina Village Parkway cially exploit the Software, or any portion thereof, without the Alameda, CA 94501 written consent of SYBEX and the specific copyright owner(s) of Web:http://www.sybex.com any component software included on this media. In the event that the Software or components include specific After the 90-day period, you can obtain replacement media of license requirements or end-user agreements, statements of condi- identical format by sending us the defective disk, proof of pur- tion, disclaimers, limitations or warranties ("End-User License"), chase, and a check or money order for $10, payable to SYBEX. those End-User Licenses supersede the terms and conditions DISCLAIMER herein as to that particular Software component. Your purchase, acceptance, or use of the Software will constitute your acceptance SYBEX makes no warranty or representation, either expressed of such End-User Licenses. or implied, with respect to the Software or its contents, quality, performance, merchantability, or fitness for a particular pur- By purchase, use or acceptance of the Software you further agree pose. In no event will SYBEX, its distributors, or dealers be liable to comply with all export laws and regulations of the United to you or any other party for direct, indirect, special, incidental, States as such laws and regulations may exist from time to time. consequential, or other damages arising out of the use of or REUSABLE CODEIN THIS BOOK inability to use the Software or its contents even if advised of the The author(s) created reusable code in this publication expressly possibility of such damage. In the event that the Software for reuse by readers. Sybex grants readers limited permission to includes an online update feature, SYBEX further disclaims any reuse the code found in this publication, its accompanying CD- obligation to provide this feature for any specific duration other ROM or available for download from our website so long as the than the initial posting. author(s) are attributed in any application containing the reus- The exclusion of implied warranties is not permitted by some able code and the code itself is never distributed, posted online states. Therefore, the above exclusion may not apply to you. This by electronic transmission, sold, or commercially exploited as a warranty provides you with specific legal rights; there may be stand-alone product. other rights that you may have that vary from state to state. The pricing of the book with the Software by SYBEX reflects the allo- SOFTWARE SUPPORT cation of risk and limitations on liability contained in this agree- Components of the supplemental Software and any offers asso- ment of Terms and Conditions. ciated with them may be supported by the specific Owner(s) of that material, but they are not supported by SYBEX. Information SHAREWARE DISTRIBUTION regarding any available support may be obtained from the This Software may contain various programs that are distrib- Owner(s) using the information provided in the appropriate uted as shareware. Copyright laws apply to both shareware and read.me files or listed elsewhere on the media. ordinary commercial software, and the copyright Owner(s) Should the manufacturer(s) or other Owner(s) cease to offer sup- retains all rights. If you try a shareware program and continue port or decline to honor any offer, SYBEX bears no responsibil- using it, you are expected to register it. Individual programs dif- ity. This notice concerning support for the Software is provided fer on details of trial periods, registration, and payment. Please for your information only. SYBEX is not the agent or principal of observe the requirements stated in appropriate files. the Owner(s), and SYBEX is in no way responsible for providing COPY PROTECTION any support for the Software, nor is it liable or responsible for The Software in whole or in part may or may not be copy-protected any support provided, or not provided, by the Owner(s). or encrypted. However, in all cases, reselling or redistributing these files without authorization is expressly forbidden except as specifically provided for by the Owner(s) therein. TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page vi Tuesday, November 16, 2004 5:50 PM To my two favorite distractions: Montana and Gabriela TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page vii Tuesday, November 16, 2004 5:50 PM Acknowledgments Thanks to Mark Longley for inviting me to join his first HTML class. No one at the local community college had heard of HTML back then, and Mark had to invite people to take the class to prove he could fill it before the administration would let him offer it. He planned a great curriculum that remained strong for many semesters after that. When he decided to stop teaching the class, he passed it on to me, and I taught basic HTML for several years. That teaching experience led to the new approach to teach- ing integrated HTML and CSS that you’ll find in this book. I am grateful to the following wonderful Sybex staffers for their invaluable help in making this book. Thanks to Acquisitions Editor Willem Knibbe for believing in the project and getting it approved. Thanks to Developmental Editor Pete Gaughan for making sure my content was its maximum best and for getting permission to include screen shots of other folks’ software or web- sites. Thanks to Copy Editor Sally Engelfried for fixing my writing errors and holding my horrible passive voice habit in check, and thanks to our proofreaders for giving us all a reality check. Thanks to Production Editor Leslie Light for finding me help from illustrators and keeping me on schedule. And special thanks to Technical Editor Molly E. Holzschlag for agreeing to take on this book and for her outstanding expertise that helped me make sure all the information in the book is correct. The beautiful photograph of Austin’s famous Highway 360 bridge was taken by John Seibel of John Seibel Photography (www.johnseibelphotography.com) in Austin, Texas. I also appreciate the permission to use a sound clip by the jazz trio The Beat Divas (www.madykaye.com/divas). TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page viii Tuesday, November 16, 2004 5:50 PM Contents at a Glance Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xvii Chapter 1 • How to Write XHTML and CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Chapter 2 • Location, Location: Where to Put a Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Chapter 3 • Page Basics: DOCTYPE, Head, Body, and Body Styles . . . . . . . . . . . . . . . . . . 31 Chapter 4 • Headings and Heading Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Chapter 5 • Page Divisions: Div for Structure and Layout . . . . . . . . . . . . . . . . . . . . . . . . . 63 Chapter 6 • Paragraph and Text Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Chapter 7 • Links and Link Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Chapter 8 • Multimedia, Images, and Image Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Chapter 9 • Lists and List Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .215 Chapter 10 • Tables and Table Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Chapter 11 • Forms and Form Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Chapter 12 • Publishing and Testing Your Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 Chapter 13 • CSS for Weblogs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Chapter 14 • Design Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Glossary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 TEAM LinG - Live, Informative, Non-cost and Genuine ! 4378Book.fm Page ix Tuesday, November 16, 2004 5:50 PM Contents Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xvii Chapter 1 • How to Write XHTML and CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Anatomy of a Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 What Are XHTML and HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 What’s the Difference between XHTML and HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 What Is CSS? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Getting Started with XHTML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Opening and Closing Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Empty Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 XHTML: Specific Requirements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Getting Started with CSS Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Selectors and Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Quotation Marks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Real World Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Chapter 2 • Location, Location: Where to Put a Style . . . . . . . . . . . . . . . . . . . . . . . 15 The Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Begin with the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 User Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 External Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Embedded Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Specificity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Using@import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26 Real World Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Chapter 3 • Page Basics: DOCTYPE, Head, Body, and Body Styles . . . . . . . . . . . . . 31 Learn the XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 The Goal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 DOCTYPES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 The XML Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Let’s Get Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 The Head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Saving . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 The Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 Take a Look in a Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 TEAM LinG - Live, Informative, Non-cost and Genuine !