Integrated HTML and CSS: A Smarter, Faster Way to Learn

414 Pages·2005·17.771 MB·English

by  Virginia DeBolt

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 !