Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 201 West 103rd St., Indianapolis, Indiana, 46290 USA Teach Yourself in 24 Hours Kynn Bartlett CSS 01 0672324091FM 6/13/02 10:40 AM Page i Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Sams Teach Yourself CSS in 24 Hours Copyright © 2002 by Sams Publishing All rights reserved. No part of this book shall be reproduced, stored in a retrieval system, or transmitted by any means, electronic, mechanical, photo- copying, recording, or otherwise, without written permission from the publisher. No patent liability is assumed with respect to the use of the information contained herein. Although every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions. Nor is any liability assumed for damages resulting from the use of the information contained herein. International Standard Book Number: 0-672-32409-1 Library of Congress Catalog Card Number: 2002100942 Printed in the United States of America First Printing: July 2002 Second printing with corrections: December 2002 05 04 03 02 4 3 2 Trademarks All terms mentioned in this book that are known to be trademarks or service marks have been appropriately capitalized. Sams Publishing cannot attest to the accuracy of this information. Use of a term in this book should not be regarded as affecting the validity of any trademark or service mark. Warning and Disclaimer Every effort has been made to make this book as complete and as accurate as possible, but no warranty or fitness is implied. The information provided is on an “as is” basis. The author and the publisher shall have neither liability nor responsibility to any person or entity with respect to any loss or damages aris- ing from the information contained in this. ACQUISITIONS EDITOR Jill Hayden DEVELOPMENT EDITOR Susan Hobbs MANAGING EDITOR Charlotte Clapp PROJECT EDITOR Matthew Purcell COPY EDITOR Michael Kopp (Publication Services, Inc.) INDEXER Jessica Matthews (Publication Services, Inc.) PRODUCTION EDITOR Theodore Young, Jr. (Publication Services, Inc.) PROOFREADER Phil Hamer (Publication Services, Inc.) TECHNICAL EDITOR Marshall Jansen TEAM COORDINATOR Amy Patton MULTIMEDIA DEVELOPER Dan Scherf INTERIOR DESIGNER Gary Adair COVER DESIGNER Aren Howell PAGE LAYOUT Jennifer Faaborg Michael Tarleton James Torbit (Publication Services, Inc.) 01 0672324091FM 12/3/02 12:13 PM Page ii Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 3Browser Support for CSS 41 4Using CSS with HTML 61 Part II Core Principles of CSS 79 Hour 5 Selectors 81 6The CSS Box Model 103 7 Cascading and Inheritance 115 Part III Styling with CSS 129 Hour 8 Fonts and Font Families 131 9Text 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 iii Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Hour 23 CSS and JavaScript 407 24 CSS and XML 429 Part V Appendixes 451 Appendix A How to Read W3C Recommendations 453 BReplacing Presentational HTML with CSS 459 CGlossary 463 Index 471 01 0672324091FM 6/13/02 10:40 AM Page iv Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 v Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 The class Attribute in HTML 72 Class Selectors in CSS 73 The id Attribute in HTML 75 id Selectors in CSS 75 Summary 76 Browser Support Report Card 76 Q&A 76 01 0672324091FM 6/13/02 10:40 AM Page vi Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 Using class and id Selectors 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 The display Property 105 Understanding the Box Model 106 Documents as Trees 107 Documents as Boxes 108 Box Display Properties 109 The margin Property 110 The border Property 111 The padding Property 111 Summary 112 Browser Support Report Card 112 Q&A 113 Workshop 113 Quiz 113 Answers 114 Contents vii 01 0672324091FM 6/13/02 10:40 AM Page vii Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 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 !important in Rules 120 User-defined Style Sheets 121 Importing CSS 122 The @import Rule 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 The font-weight Property 132 The font-variant Property 135 The font-style Property 136 The font-stretch Property 137 The font-size-adjust Property 138 The font Shorthand 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 viii Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. Hour 9 Text Colors and Effects 155 Text Colors 155 Specifying Color Values 156 Using Color Effectively 158 Special Text Effects 159 The text-decoration Property 159 The text-transform Property 162 The text-shadow Property 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 The background-color Property 168 Using Background Images 170 The background-image Property 171 The background-repeat Property 174 The background-position Property 177 The background-attachment Property 180 The background 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 :link and :visited Pseudo-classes 186 The :active Pseudo-class 187 The :hover Pseudo-class 188 The :focus Pseudo-class 190 Common Link-styling Techniques 191 Replacing HTML <body> Attributes 191 Removing Underlines 192 Mouseover Effects 193 Contents ix 01 0672324091FM 6/13/02 10:40 AM Page ix Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... webdev@samspublishing.com Mail: Mark Taber Associate Publisher Sams Publishing 800 East 96th Street Indianapolis, IN 4 6240 USA Reader Services For more information about this book or any other Sams Publishing title, visit our Web site at www.samspublishing.com Type either the ISBN (excluding hyphens) or the title of a book into the Search field to find the page you’re looking for Introduction Way back in. .. book, Sams Teach Yourself CSS in 24 Hours, comes with a promise to you, the reader The promise is that in 24 hours—or less—I’ll have you up and running with CSS, producing your own style sheets that rival those of Web grandmasters To do this, I’ve broken down that 24- hour period into 24 lessons of one hour or less Now, let’s be honest—you really should not try to do everything in the book in 24 hours... fonts CSS Level 2 includes and extends all properties and values defined in CSS Level 1 In this book, I won’t make a distinction between a property that originated in CSS Level 1 and CSS Level 2; Level 2 is the current standard and the definitions in CSS2 supercede those in CSS1 Other Style Languages CSS isn’t the only style language, but it’s the primary one used on the Web Some other style languages include... called CSS- P—were introduced in CSS Level 1 and allow you Understanding Cascading Style Sheets to format a Web page without using tables Some of the things you can do with CSS to affect the graphical layout of the page include • Setting a background graphic and controlling its location, tiling, and scrolling • Drawing borders and outlines around sections of a page • Setting vertical and horizontal margins... as a CSS editor; as I’m assuming you can create HTML files, anyone reading this book should have access to a text editor In Hour 2, I’ll give you some specific pointers to CSS editors The CSSin24hours.com Web Site This book has a companion site maintained by the author—that’s me—at http://www.CSSin24hours.com/ At that site, you’ll find • Downloadable copies of all code samples in the book • Live links... “Danger, Will Robinson!” warning alarm If there’s a possibility of you turning down the wrong path, I’ll be there to steer you clear of it 5 6 Sams Teach Yourself CSS in 24 Hours Ready, Set, Go! Are you eager to start? Ready your browser, sit yourself in front of your computer in a comfortable position, and go on to the first hour! Let me know how well you’ve done at teaching yourself Cascading Style Sheets;... centered in a box with a thin outline You can do some of this in HTML using tags and various attributes, but that can get cumbersome and difficult to maintain When you define your presentation styles in CSS, it becomes quick and easy to apply new styles that can affect all styles on a page or even the whole site—without having to edit the source HTML at all! Defining Cascading The term “Cascading” in. .. Cascading Style Sheets specifications The following 3 4 Sams Teach Yourself CSS in 24 Hours browsers are recommended; you should have at least one of the following browsers installed on your system: • Internet Explorer 6.0 (or higher) for Windows (http://www.microsoft.com/ windows/ie/) • Internet Explorer 5.1 (or higher) for Macintosh (http://www.microsoft.com/mac/) • Netscape 6.2.1 (or higher) for Windows,... underlining • Indenting or centering text • Stretching and adjusting text size and line spacing • Transforming sections of text to upper-, lower-, or mixed-case • Adding drop-capitals and other special effects These are all accomplished by creating CSS rules to set properties on text Graphical Appearance and Layout CSS can also be used to change the look of the entire page CSS properties for positioning—sometimes... 357 Categories of Media Types 358 Linking and Importing Media-specific Style Sheets 359 Using the @media Rule 360 CSS Properties for the print Medium 361 Browsers and Printing 361 Measurements for Printing 361 Defining the Page with @page 362 Setting Page Breaks 364 Designing CSS for Print 366 Summary 367 Browser . Property 244 Summary 245 Browser Support Report Card 245 Q&A 245 Workshop 246 Quiz 246 Answers 246 Activity 246 Hour 15 Styling Tables 247 Table Formatting. 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