Table Of Content
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
