01 0672324091FM 6/13/02 10:40 AM Page i Teach Yourself CSS 24 in Hours Kynn Bartlett 201 West 103rd St., Indianapolis, Indiana, 46290 USA 01 0672324091FM 12/3/02 12:13 PM Page ii Sams Teach Yourself CSS in 24 Hours ACQUISITIONSEDITOR Jill Hayden Copyright © 2002 by Sams Publishing DEVELOPMENTEDITOR All rights reserved. No part of this book shall be reproduced,stored in a Susan Hobbs retrieval system,or transmitted by any means,electronic,mechanical,photo- copying,recording,or otherwise,without written permission from the publisher. MANAGINGEDITOR No patent liability is assumed with respect to the use of the information contained Charlotte Clapp herein. Although every precaution has been taken in the preparation of this PROJECTEDITOR book,the publisher and author assume no responsibility for errors or omissions. Matthew Purcell Nor is any liability assumed for damages resulting from the use of the information contained herein. COPYEDITOR Michael Kopp International Standard Book Number:0-672-32409-1 (Publication Services,Inc.) Library of Congress Catalog Card Number:2002100942 INDEXER Printed in the United States of America Jessica Matthews (Publication Services,Inc.) First Printing:July 2002 Second printing with corrections:December 2002 PRODUCTIONEDITOR Theodore Young,Jr. 05 04 03 02 4 3 2 (Publication Services,Inc.) PROOFREADER Trademarks Phil Hamer All terms mentioned in this book that are known to be trademarks or service (Publication Services,Inc.) marks have been appropriately capitalized. Sams Publishing cannot attest to the TECHNICALEDITOR accuracy of this information. Use of a term in this book should not be regarded Marshall Jansen as affecting the validity of any trademark or service mark. TEAMCOORDINATOR Warning and Disclaimer Amy Patton Every effort has been made to make this book as complete and as accurate as MULTIMEDIADEVELOPER possible,but no warranty or fitness is implied. The information provided is on Dan Scherf an “as is”basis. The author and the publisher shall have neither liability nor INTERIORDESIGNER responsibility to any person or entity with respect to any loss or damages aris- Gary Adair ing from the information contained in this. COVERDESIGNER Aren Howell PAGELAYOUT Jennifer Faaborg Michael Tarleton James Torbit (Publication Services,Inc.) 01 0672324091FM 6/13/02 10:40 AM Page iii Contents at a Glance Introduction 1 Part I Introduction to Cascading Style Sheets 7 Hour 1 Understanding Cascading Style Sheets 9 2 Getting Started with CSS 21 3 Browser Support for CSS 41 4 Using CSS with HTML 61 Part II Core Principles of CSS 79 Hour 5 Selectors 81 6 The CSS Box Model 103 7 Cascading and Inheritance 115 Part III Styling with CSS 129 Hour 8 Fonts and Font Families 131 9 Text Colors and Effects 155 10 Backgrounds and Background Colors 167 11 Styling Links 185 12 Alignment and Spacing 199 13 Borders and Boxes 217 14 Lists 233 15 Styling Tables 247 16 Page Layout in CSS 271 17 Advanced CSS Layout 299 18 Web Design with CSS 323 Part IV Advanced Cascading Style Sheets 341 Hour 19 Advanced Selectors 343 20 CSS for Printing 357 21 Accessibility and Internationalization 371 22 User Interface and Generated Content 387 01 0672324091FM 6/13/02 10:40 AM Page iv Hour 23 CSS and JavaScript 407 24 CSS and XML 429 Part V Appendixes 451 Appendix A How to Read W3C Recommendations 453 B Replacing Presentational HTML with CSS 459 C Glossary 463 Index 471 01 0672324091FM 6/13/02 10:40 AM Page v Contents Introduction 1 Part I Introduction to Cascading Style Sheets 7 Hour 1 Understanding Cascading Style Sheets 9 What Are Cascading Style Sheets? ......................................................................10 Defining Style Sheets ......................................................................................10 Defining Cascading ........................................................................................10 The Origin of Cascading Style Sheets ..................................................................11 The CSS Specifications ..................................................................................12 Other Style Languages ....................................................................................13 CSS in Web Design ..............................................................................................13 How CSS Is Used ............................................................................................14 What CSS Can Do ..........................................................................................16 What CSS Can’t Do ........................................................................................17 When to Use CSS ............................................................................................18 Browser Support ..................................................................................................18 Workarounds for Browser Limitations ............................................................18 Summary ..............................................................................................................18 Q&A ......................................................................................................................19 Workshop ..............................................................................................................20 Quiz ................................................................................................................20 Answers ..........................................................................................................20 Hour 2 Getting Started with CSS 21 Creating a Style Sheet ..........................................................................................21 Software Tools for CSS ..................................................................................22 Naming and Saving a Style Sheet ..................................................................25 Writing CSS Rules ................................................................................................25 The Basic Structure of a CSS Rule ................................................................25 Combining CSS Rules ....................................................................................27 CSS Comments ................................................................................................28 Simple CSS Properties for Text Formatting ....................................................29 Linking a Style Sheet to an HTML Page ............................................................32 A Simple HTML Page for Styling ..................................................................32 Linked Style Sheets in HTML ........................................................................35 Adding More Styles ........................................................................................35 Viewing Your Style Sheet ....................................................................................37 Recommended Browsers ................................................................................37 01 0672324091FM 6/13/02 10:40 AM Page vi vi Sams Teach Yourself CSS in 24 Hours Summary ..............................................................................................................37 Q&A ......................................................................................................................38 Workshop ..............................................................................................................38 Quiz ................................................................................................................38 Answers ..........................................................................................................39 Activity:Create Your First Style Sheet ..........................................................39 Hour 3 Browser Support for CSS 41 The Browser Problem ..........................................................................................42 How Browsers Deal with CSS ........................................................................42 The Importance of Workarounds ....................................................................45 Browser Compatibility Charts ........................................................................46 Web Standards and You ..................................................................................46 CSS Support in Current Browsers ........................................................................47 Internet Explorer ..............................................................................................48 Netscape ..........................................................................................................50 Opera ..............................................................................................................51 Other Browsers ................................................................................................53 Summary ..............................................................................................................56 Browser Support Report Card ........................................................................57 Q&A ......................................................................................................................58 Workshop ..............................................................................................................59 Quiz ................................................................................................................59 Answers ..........................................................................................................59 Activity:Browser Test-drive ..........................................................................59 Hour 4 Using CSS with HTML 61 Types of HTML ....................................................................................................62 HTML 4.01 ......................................................................................................62 XHTML ..........................................................................................................64 Validating HTML ............................................................................................64 Style Sheets in HTML ..........................................................................................65 Linked Style Sheets ........................................................................................65 Embedded Style Sheets ..................................................................................68 Inline Style Attributes ......................................................................................70 Classes and IDs ....................................................................................................71 TheclassAttribute in HTML ........................................................................72 Class Selectors in CSS ....................................................................................73 TheidAttribute in HTML ..............................................................................75 idSelectors in CSS ........................................................................................75 Summary ..............................................................................................................76 Browser Support Report Card ........................................................................76 Q&A ......................................................................................................................76 01 0672324091FM 6/13/02 10:40 AM Page vii Contents vii Workshop ..............................................................................................................77 Quiz ................................................................................................................77 Answers ..........................................................................................................77 Activity:Using HTML and CSS Together ......................................................78 Part II Core Principles of CSS 79 Hour 5 Selectors 81 Simple Selectors ..................................................................................................81 UsingclassandidSelectors ..........................................................................82 The Universal Selector ....................................................................................85 Combining Simple Selectors ................................................................................86 Grouping Selectors ..........................................................................................86 Descendant Selectors ......................................................................................87 Pseudo-classes and Pseudo-elements ..................................................................91 Simple Pseudo-classes ....................................................................................92 Pseudo-elements in CSS ..................................................................................97 Summary ............................................................................................................100 Browser Support Report Card ......................................................................100 Q&A ....................................................................................................................101 Workshop ............................................................................................................101 Quiz ..............................................................................................................101 Answers ........................................................................................................101 Activity ..........................................................................................................102 Hour 6 The CSS Box Model 103 Displaying Content in CSS ................................................................................103 Types of Elements ........................................................................................104 ThedisplayProperty ....................................................................................105 Understanding the Box Model ............................................................................106 Documents as Trees ......................................................................................107 Documents as Boxes ....................................................................................108 Box Display Properties ......................................................................................109 ThemarginProperty ......................................................................................110 TheborderProperty ......................................................................................111 ThepaddingProperty ....................................................................................111 Summary ............................................................................................................112 Browser Support Report Card ......................................................................112 Q&A ....................................................................................................................113 Workshop ............................................................................................................113 Quiz ..............................................................................................................113 Answers ........................................................................................................114 01 0672324091FM 6/13/02 10:40 AM Page viii viii Sams Teach Yourself CSS in 24 Hours Hour 7 Cascading and Inheritance 115 How the Cascade Works ....................................................................................116 Order of the Cascade ....................................................................................118 Cascading and HTML Attributes ..................................................................119 Using!importantin Rules ..........................................................................120 User-defined Style Sheets ..................................................................................121 Importing CSS ....................................................................................................122 The@importRule ..........................................................................................123 Inheritance ..........................................................................................................124 Inherited Values ............................................................................................125 Calculated Values ..........................................................................................125 Specifying Inheritance ..................................................................................125 Summary ............................................................................................................125 Browser Support Report Card ......................................................................126 Q&A ....................................................................................................................126 Workshop ............................................................................................................127 Quiz ..............................................................................................................127 Answers ........................................................................................................127 Activity ..........................................................................................................128 Part III Styling with CSS 129 Hour 8 Fonts and Font Families 131 Specifying Font Properties ................................................................................131 Thefont-weightProperty ............................................................................132 Thefont-variant Property ........................................................................135 Thefont-styleProperty ..............................................................................136 Thefont-stretchProperty ..........................................................................137 Thefont-size-adjustProperty ..................................................................138 ThefontShorthand Property ........................................................................140 Font Families ......................................................................................................141 The Generic Font Families ............................................................................141 Commonly Installed Fonts ............................................................................148 Downloadable Fonts and Font Descriptors ........................................................149 Browser Support for Downloadable Fonts ....................................................150 Summary ............................................................................................................150 Browser Support Report Card ......................................................................151 Q&A ....................................................................................................................151 Workshop ............................................................................................................151 Quiz ..............................................................................................................151 Answers ........................................................................................................152 Activity ..........................................................................................................153 01 0672324091FM 6/13/02 10:40 AM Page ix Contents ix Hour 9 Text Colors and Effects 155 Text Colors ..........................................................................................................155 Specifying Color Values ................................................................................156 Using Color Effectively ................................................................................158 Special Text Effects ............................................................................................159 Thetext-decorationProperty ....................................................................159 Thetext-transformProperty ......................................................................162 Thetext-shadowProperty ............................................................................163 Summary ............................................................................................................164 Browser Support Report Card ......................................................................165 Q&A ....................................................................................................................165 Workshop ............................................................................................................165 Quiz................................................................................................................165 Answers ........................................................................................................166 Activity ..........................................................................................................166 Hour 10 Backgrounds and Background Colors 167 Setting Background Color ..................................................................................168 Thebackground-colorProperty ..................................................................168 Using Background Images ..................................................................................170 Thebackground-imageProperty ..................................................................171 Thebackground-repeatProperty ................................................................174 Thebackground-positionProperty ............................................................177 Thebackground-attachmentProperty ..........................................................180 Thebackground Shorthand Property ............................................................182 Summary ............................................................................................................182 Browser Support Report Card ......................................................................182 Q&A ....................................................................................................................183 Workshop ............................................................................................................183 Quiz ..............................................................................................................183 Answers ........................................................................................................184 Activity ..........................................................................................................184 Hour 11 Styling Links 185 CSS for Link Styling ..........................................................................................185 The:linkand:visitedPseudo-classes ......................................................186 The:activePseudo-class ............................................................................187 The:hoverPseudo-class ..............................................................................188 The:focusPseudo-class ..............................................................................190 Common Link-styling Techniques ....................................................................191 Replacing HTML <body>Attributes ............................................................191 Removing Underlines ....................................................................................192 Mouseover Effects ........................................................................................193