Your SlideShare is downloading. ×
HTML & CSS: The Complete Reference 5th Edition
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML & CSS: The Complete Reference 5th Edition

2,347
views

Published on

Written by a Web development expert, the fifth edition of this trusted resource has been thoroughly revised and reorganized to address HTML5, the revolutionary new Web standard. The book covers all …

Written by a Web development expert, the fifth edition of this trusted resource has been thoroughly revised and reorganized to address HTML5, the revolutionary new Web standard. The book covers all the elements supported in today's Web browsers--from the standard (X)HTML tags to the archaic and proprietary tags that may be encountered.

HTML & CSS: The Complete Reference, Fifth Edition contains full details on CSS 2.1 as well as every proprietary and emerging CSS3 property currently supported. Annotated examples of correct markup and style show you how to use all of these technologies to build impressive Web pages. Helpful appendixes cover the syntax of character entities, fonts, colors, and URLs. This comprehensive reference is an essential tool for professional Web developers.

Master transitional HTML 4.01 and XHTML 1.0 markup
Write emerging standards-based markup with HTML5
Enhance presentation with Cascading Style Sheets (CSS1 and CSS 2.1)
Learn proprietary and emerging CSS3 features
Learn how to read (X)HTML document type definitions (DTDs)
Apply everything in an open standards-focused fashion
Thomas A. Powell is president of PINT, Inc. (pint.com), a nationally recognized Web agency. He developed the Web Publishing Certificate program for the University of California, San Diego Extension and is an instructor for the Computer Science Department at UCSD. He is the author of the previous bestselling editions of this book and Ajax: The Complete Reference, and co-author of JavaScript: The Complete Reference.

Published in: Education

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,347
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML & CSS:The Complete Reference, Fifth Edition
  • 2. About the AuthorThomas A. Powell (tpowell@pint.com) is a long-timeindustry veteran. After an early stint at CERFnet in theearly ‘90s, he founded Powell Internet Consulting (laterrenamed PINT) in 1994, a Web design and consulting servicesfirm. Today, PINT (pint.com) provides Web development,design, and consulting services to large and small corporationsall over the United States in a variety of industries. Beyond his involvement at PINT, Thomas is heavilyinvolved in the academic community. He developed theUniversity of California, San Diego Extension Web Publishingprogram in the late 1990s and continues to teach classes therein Web development and design. He is also an instructor forthe UCSD Computer Science Department, where he teachesclasses in Web development and the theory of programminglanguages. Mr. Powell is well published, and his work has appearedin numerous trade publications. He continues to publishregularly in Network World. He also has published numerousbooks on Web technology and design, including Ajax: TheComplete Reference, JavaScript: The Complete Reference, andmany others. His books have been translated into over12 languages and are used around the world both in industryand college settings.About the Technical EditorJames H. (Jim) Pence is a full-time writer, editor, speaker,singer, and performance chalk artist. Jim broke into bookpublishing in 2001 with How to Do Everything with HTML,a how-to book on Web authoring, written “by a nontechie fornontechies,” and published by McGraw-Hill Professional. Hefollowed this book the same year with another book forMcGraw-Hill: Cascading Style Sheets: A Beginner’s Guide.McGraw-Hill published a second edition of Jim’s HTMLbook, re-titled How to Do Everything with HTML & XHTML,in 2003. Jim is also a published novelist. He is the author of BlindSight (Tyndale, 2003), a suspense/thriller novel set in themind-control cults, and The Angel (Kregel, 2006), set againstthe backdrop of the euthanasia and physician-assisted suicidemovements. Jim moved into “true crime” writing with hislatest book, Terror by Night (Tyndale, 2009). Terror by Night isthe true story of the brutal 2008 murders of the Caffey familyin Emory, Texas. You can learn more about Jim’s books andother creative projects at his Web site: www.jamespence.com.
  • 3. HTML & CSS:The Complete Reference, Fifth Edition Thomas A. Powell New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto
  • 4. Copyright © 2010 by The McGraw-Hill Companies. All rights reserved. Except as permitted under the United States Copyright Act of 1976, nopart of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without theprior written permission of the publisher.ISBN: 978-0-07-174170-5MHID: 0-07-174170-4The material in this eBook also appears in the print version of this title: ISBN: 978-0-07-149629-2, MHID: 0-07-149629-7.All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name,we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark. Wheresuch designations appear in this book, they have been printed with initial caps.McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate trainingprograms. To contact a representative please e-mail us at bulksales@mcgraw-hill.com.Information has been obtained by McGraw-Hill from sources believed to be reliable. However, because of the possibility of human ormechanical error by our sources, McGraw-Hill, or others, McGraw-Hill does not guarantee the accuracy, adequacy, or completeness of anyinformation and is not responsible for any errors or omissions or the results obtained from the use of such information.TERMS OF USEThis is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGraw-Hill”) and its licensors reserve all rights in and to the work.Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy ofthe work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute,disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your ownnoncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail tocomply with these terms.THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THEACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANYINFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLYDISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OFMERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that thefunctions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill norits licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damagesresulting therefrom. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no circumstancesshall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result fromthe use of or inability to use the work, even if any of them has been advised of the possibility of such damages. This limitation of liability shallapply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise.
  • 5. Contents at a Glance Part I Core Markup 1 Traditional HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2 Introducing HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 3 HTML and XHTML Element Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133Part II Core Style 4 Introduction to CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 5 CSS Syntax and Property Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 6 CSS3 Proprietary and Emerging Features Reference . . . . . . . . . . . . . . . . . . 613Part III Appendixes A Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 B Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751 C Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765 D URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 E Reading a Document Type Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801 Index ........................................................... 809 v
  • 6. This page intentionally left blank
  • 7. Contents Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxiiiPart I Core Markup 1 Traditional HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 First Look at HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Hello HTML and XHTML World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Viewing Markup Locally . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Viewing Markup with a Web Server . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 HTML and XHTML: Version History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 HTML and XHTML DTDs: The Specifications Up Close . . . . . . . . . . . . . . . . 16 Document Type Statements and Language Versions . . . . . . . . . . . . . 18 (X)HTML Document Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 The Document Head . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 The Document Body . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Browsers and (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 The Doctype Switch and Browser Rendering Modes . . . . . . . . . . . . . 39 The Rules of (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 HTML Is Not Case Sensitive, XHTML Is . . . . . . . . . . . . . . . . . . . . . . . 41 Attribute Values May Be Case Sensitive . . . . . . . . . . . . . . . . . . . . . . . . 42 (X)HTML Is Sensitive to a Single Whitespace Character . . . . . . . . . . 42 (X)HTML Follows a Content Model . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Elements Should Have Close Tags Unless Empty . . . . . . . . . . . . . . . . 43 Unused Elements May Minimize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Elements Should Nest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Attributes Should Be Quoted . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Entities Should Be Used for Special Characters . . . . . . . . . . . . . . . . . . 44 Browsers Ignore Unknown Attributes and Elements . . . . . . . . . . . . . 44 Major Themes of (X)HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Logical and Physical Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Standards vs. Practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Myths and Misconceptions About HTML and XHTML . . . . . . . . . . . 47 The Future of Markup—Two Paths? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 XHTML: Web Page Markup XML Style . . . . . . . . . . . . . . . . . . . . . . . . 49 HTML5: Back to the Future . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 2 Introducing HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Hello HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 Loose Syntax Returns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 XHTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 vii
  • 8. viii HTML & CSS: The Complete Reference HTML5: Embracing the Reality of Web Markup . . . . . . . . . . . . . . . . . . . . . . . 62 Presentational Markup Removed and Redefined . . . . . . . . . . . . . . . . . . . . . . 63 Out with the Old Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 In with the New Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Sample of New Attributes for HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . 66 HTML5 Document Structure Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Adding Semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Marking Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Indicating Dates and Time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Inserting Figures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Specifying Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 HTML5’s Open Media Effort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 <video> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 <audio> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Media Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Client-Side Graphics with <canvas> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Drawing and Styling Lines and Shapes . . . . . . . . . . . . . . . . . . . . . . . . 85 Drawing Arcs and Curves . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Scaling, Rotating, and Translating Drawings . . . . . . . . . . . . . . . . . . . . 93 Using Bitmaps in Drawings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Text Support for canvas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 <canvas> Conclusions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 HTML5 Form Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 New Form Field Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Validating Data Entry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Autocomplete Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Miscellaneous Usability Improvements . . . . . . . . . . . . . . . . . . . . . . . . 105 Emerging Elements and Attributes to Support Web Applications . . . . . . . . 106 menu Element Repurposed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 command Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 meter and progress Elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 details Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 output Element . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 The Uncertain Future of Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 The draggable Attribute and the Drag and Drop API . . . . . . . . . . . . 112 contenteditable Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 spellcheck Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Internationalization Improvements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 HTML5 Metadata Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 data-X Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Microdata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 HTML5: Beyond Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 defer Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 HTML, JavaScript, and the DOM Renewed . . . . . . . . . . . . . . . . . . . . . 121 Standardizing and Extending Ad Hoc JavaScript Conventions . . . . 125 Major HTML5 Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 HTML5 Today or Tomorrow? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 HTML5 as a Catch-All . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 HTML5: Web Politics as Usual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 HTML5: Imperfect Improvement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
  • 9. Contents ix3 HTML and XHTML Element Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Flavors of HTML and XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133 Core Attributes Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 id . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 title . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Language Attributes Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 dir . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 lang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Other Common Attributes Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 accesskey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 contenteditable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 datafld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 dataformatas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 datasrc . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 disabled . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 hidefocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 hspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 tabindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 unselectable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 vspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Common HTML5 Attributes Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 accesskey . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 contenteditable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 contextmenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 data-X (Custom Data Attributes) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 draggable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 hidden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 itemid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 itemprop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 itemref . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 itemscope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 itemtype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 spellcheck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 tabindex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Event Attributes Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 HTML5 Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Internet Explorer’s Extended Event Attributes . . . . . . . . . . . . . . . . . . 147 HTML Element Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 <!-- ... --> (Comment) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 <!-- .[ ].. --> (Conditional Comment) . . . . . . . . . . . . . . . . . . . . . . . . . . 155 <!DOCTYPE> (Document Type Definition) . . . . . . . . . . . . . . . . . . . 157 <a> (Anchor) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 <abbr> (Abbreviation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 <acronym> (Acronym) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
  • 10. x HTML & CSS: The Complete Reference <address> (Address) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168 <applet> (Java Applet) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 <area> (Image Map Area) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 <article> (Article) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 <aside> (Aside) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176 <audio> (Audio) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 <b> (Bold) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 <base> (Base URL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 <basefont> (Base Font) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 <bdo> (Bidirectional Override) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 <bgsound> (Background Sound) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 <big> (Big Font) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 <blink> (Blinking Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 <blockquote> (Block Quote) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 <body> (Document Body) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 <br> (Line Break) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 <button> (Form Button) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 <canvas> (Canvas for Drawing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 <caption> (Table Caption) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 <center> (Center Alignment) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 <cite> (Citation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 <code> (Code Listing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 <col> (Table Column) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 <colgroup> (Table Column Group) . . . . . . . . . . . . . . . . . . . . . . . . . . 216 <command> (Command) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 <comment> (Comment Information) . . . . . . . . . . . . . . . . . . . . . . . . . 220 <datalist> (List of Prefill Data) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 <dd> (Definition Description in a Definition List or Content in Details or Figure) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 <del> (Deleted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 <details> (Additional Details) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 <dfn> (Definition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228 <dir> (Directory List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 <div> (Division) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 <dl> (Definition List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 <dt> (Term in a Definition List or Caption in Figure or Details) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 <em> (Emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 <embed> (Embedded Object) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 <fieldset> (Form Field Grouping) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 <figure> (Figure) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 <font> (Font Definition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 <footer> (Footer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 <form> (Form for User Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 <frame> (Window Region) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 <frameset> (Frameset Definition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 <h1> through <h6> (Headings) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 <head> (Document Head) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 <header> (Header) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 <hgroup> (Header Group) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
  • 11. Contents xi<hr> (Horizontal Rule) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265<html> (HTML Document) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267<i> (Italic) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269<iframe> (Inline Frame) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270<ilayer> (Inflow Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274<img> (Image) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276<input> (Input Form Control) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279<ins> (Inserted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287<isindex> (Index Prompt) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289<kbd> (Keyboard Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291<keygen> (Key Pair Generation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292<label> (Form Control Label) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294<layer> (Positioned Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296<legend> (Descriptive Legend) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298<li> (List Item) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300<link> (Link to External Files or Set Relationships) . . . . . . . . . . . . . 303<listing> (Code Listing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311<map> (Client-Side Image Map) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312<mark> (Marked Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314<marquee> (Marquee Display) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316<menu> (Menu List or Command Menu) . . . . . . . . . . . . . . . . . . . . . 318<meta> (Meta-Information) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320<meter> (Scalar Gauge) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323<multicol> (Multiple Column Text) . . . . . . . . . . . . . . . . . . . . . . . . . . 325<nav> (Navigation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326<nobr> (No Line Breaks) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327<noembed> (No Embedded Media Support) . . . . . . . . . . . . . . . . . . 328<noframes> (No Frame Support Content) . . . . . . . . . . . . . . . . . . . . 329<noscript> (No Script Support Content) . . . . . . . . . . . . . . . . . . . . . . 330<object> (Embedded Object) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331<ol> (Ordered List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335<optgroup> (Option Grouping) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338<option> (Option in Selection List) . . . . . . . . . . . . . . . . . . . . . . . . . . 339<output> (Form Output) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341<p> (Paragraph) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343<param> (Object Parameter) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345<plaintext> (Plain Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347<pre> (Preformatted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348<progress> (Progress Indicator) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350<q> (Quote) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351<rp> (Ruby Parentheses) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353<rt> (Ruby Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355<ruby> (Ruby Annotation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357<s> (Strikethrough) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359<samp> (Sample Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360<script> (Scripting) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 362<section> (Section) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365<select> (Selection List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366<small> (Small Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369<source> (Source) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
  • 12. xii HTML & CSS: The Complete Reference <spacer> (Extra Space) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 <span> (Text Span) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 <strike> (Strikeout Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 <strong> (Strong Emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 <style> (Style Information) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379 <sub> (Subscript) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 381 <sup> (Superscript) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 <table> (Table) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 <tbody> (Table Body) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 <td> (Table Data) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 <textarea> (Multiline Text Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 <tfoot> (Table Footer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 <th> (Table Header) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 <thead> (Table Header) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 <time> (Time) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 <title> (Document Title) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 <tr> (Table Row) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 <tt> (Teletype Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 <u> (Underline) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 415 <ul> (Unordered List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 <var> (Variable) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 <video> (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 <wbr> (Word Break) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 423 <xml> (XML Data Island) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 <xmp> (Example) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Part II Core Style 4 Introduction to CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 Presentational HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 The Slow Rise of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 First Look at CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432 Hello CSS World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 CSS Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 Proprietary CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440 CSS Relationship with Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 The Specification of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443 CSS Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Validating CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447 Breaking the Rules Purposefully? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Applying Style to a Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Linking to a Style Sheet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Embedding Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 456 Importing Style Sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 459 Media Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 Printer-Specific CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Alternative Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 User Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466
  • 13. Contents xiii Document Structure and CSS Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . 468 !important Override . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 id Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 471 class Rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Contextual Selection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Attribute Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Pseudo-Element Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 Pseudo-Class Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 487 CSS Properties Preview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 500 Measurements and Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 CSS and (X)HTML Elements Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . 506 Physical Markup and Overriding Expected Results . . . . . . . . . . . . . . 506 Are <div> and <span> the Most Popular Tags? . . . . . . . . . . . . . . . . . 507 Changing Element Types with display . . . . . . . . . . . . . . . . . . . . . . . . . 508 Controlling White Space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Major Themes of CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513 Separation of Structure and Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514 CSS: More Appropriate and Powerful for Presentation . . . . . . . . . . . 516 Cross-Browser CSS Madness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517 Myths and Misconceptions Related to CSS . . . . . . . . . . . . . . . . . . . . . 517 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5195 CSS Syntax and Property Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 CSS Versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 CSS Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521 Style Inclusion Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 Linked Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 524 Embedded Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Imported Styles—@import . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 CSS Measurements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 CSS Strings and Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Counters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 CSS Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 533 Miscellaneous CSS Constructs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 /* comments */ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 539 @charset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540 @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 540 @media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 @page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 541 !important . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 CSS1 and CSS 2.1 Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 background-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 543 background-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 background-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 544 background-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545
  • 14. xiv HTML & CSS: The Complete Reference background-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546 border . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 border-bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 border-bottom-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 border-bottom-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 border-bottom-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 border-collapse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 border-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549 border-left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550 border-left-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 border-left-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 border-left-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 border-right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 border-right-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 border-right-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 border-right-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 border-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 553 border-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554 border-top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 border-top-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 border-top-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 border-top-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 border-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 caption-side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 clear . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560 clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 560 color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561 content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 counter-increment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564 counter-reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564 cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565 direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 empty-cells . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 float . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 font . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 font-family . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 font-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 font-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 font-variant . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 font-weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 letter-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 line-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 list-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 list-style-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 list-style-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 list-style-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580
  • 15. Contents xv margin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581 margin-bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 margin-left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 margin-right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 margin-top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 max-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584 max-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584 min-height . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585 min-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 585 orphans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 outline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 586 outline-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588 outline-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 outline-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 padding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 padding-bottom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593 padding-left . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593 padding-right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594 padding-top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594 page-break-after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 page-break-before . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 595 page-break-inside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596 position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 596 quotes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597 right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598 table-layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598 text-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599 text-decoration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 599 text-indent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 text-transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 top . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601 unicode-bidi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 vertical-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 white-space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 widows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604 width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 word-spacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606 z-index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 CSS2 and CSS 2.1 Aural Style Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6076 CSS3 Proprietary and Emerging Features Reference . . . . . . . . . . . . . . . . . . 613 The State of CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613 CSS3 Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613 CSS3-Introduced Values and Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . 621 CSS3 Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622 Namespaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624 Media Queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 625 Web Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 626 Miscellaneous CSS3 Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 629
  • 16. xvi HTML & CSS: The Complete Reference Implemented CSS3 and Browser-Specific Features . . . . . . . . . . . . . . . . . . . . . 629 @keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 accelerator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 631 animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632 animation-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633 animation-direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 634 animation-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635 animation-iteration-count . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 636 animation-name . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 637 animation-timing-function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 backface-visibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 640 background-clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 641 background-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 642 background-position-x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 643 background-position-y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644 background-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 644 behavior . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 645 binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649 border-bottom-left-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 650 border-bottom-right-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651 border-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 651 border-radius .............................................. 653 border-top-left-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 654 border-top-right-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655 box-reflect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655 box-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 656 box-sizing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 658 column-break-after . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659 column-break-before . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659 column-count . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 660 column-gap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661 column-rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 661 column-rule-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 662 column-rule-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 663 column-rule-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 664 column-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665 columns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 665 filter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 666 gradient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 671 image-rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 ime-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 673 interpolation-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 layout-grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674 layout-grid-char . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675 layout-grid-line . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 675 layout-grid-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676 layout-grid-type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 676 line-break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677 marquee-direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 677
  • 17. Contents xviimarquee-play-count . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 678marquee-speed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 679marquee-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681mask-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682mask-box-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682mask-clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683mask-composite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684mask-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684mask-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685mask-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685mask-position-x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686mask-position-y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687mask-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687mask-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690outline-offset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690outline-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691overflow-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691overflow-x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692overflow-y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693perspective-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694resize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695ruby-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696ruby-overhang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697ruby-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698scrollbar-3dlight-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698scrollbar-arrow-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699scrollbar-base-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699scrollbar-darkshadow-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700scrollbar-face-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701scrollbar-highlight-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701scrollbar-shadow-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702scrollbar-track-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703text-align-last . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704text-autospace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704text-fill-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705text-justify . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705text-kashida-space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706text-overflow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707text-rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708text-stroke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710text-stroke-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710text-stroke-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711text-underline-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712
  • 18. xviii HTML & CSS: The Complete Reference transform-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 715 transform-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 716 transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 717 transition-delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 717 transition-duration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 718 transition-property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 transition-timing-function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 719 user-select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 720 word-break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721 word-wrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 writing-mode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 722 zoom . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 724 Part III Appendixes A Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727 Encoding Quirks and Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . 728 Traditional HTML Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 731 HTML 4.x and XHTML 1.x Character Entities . . . . . . . . . . . . . . . . . . . . . . . . . 740 Latin Extended-A . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 Latin Extended-B . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 Spacing Modifier Letters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 General Punctuation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 741 Greek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 743 Letter-like Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744 Arrows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745 Mathematical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 746 Technical Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 747 Geometric Shapes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748 Miscellaneous Symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748 Embracing Unicode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 748 B Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751 Specifying Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 751 Fonts for Windows Platform and Browsers . . . . . . . . . . . . . . . . . . . . . 752 Fonts for Macintosh System and Browsers . . . . . . . . . . . . . . . . . . . . . . 755 PC Mac Font Similarity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 757 Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760 Microsoft’s Dynamic Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 760 Standard Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 761 Cross-Browser Downloadable Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . 761 Font Replacement with Images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763 sIFR and Other Text Replacement Techniques . . . . . . . . . . . . . . . . . . . . . . . . . 764 C Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765 (X)HTML Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765 Nonstandard Color Names and Numerical Equivalents . . . . . . . . . . 765 (X)HTML Elements Supporting Color . . . . . . . . . . . . . . . . . . . . . . . . . 772
  • 19. Contents xix CSS Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 773 CSS Color-Related Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776 Browser-Safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779D URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Basic Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Server Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784 Directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786 Filename . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787 Fragment Identifier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788 Protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788 Other Features of URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 Data URIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 791 Other Emerging URL Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794 Relative URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 795 Using the <base> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 795 URL Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 796 Unclear Case Sensitivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Unclear Length Limits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Persistence Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Long, Dirty URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Short, Cryptic URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 797 Location, Not Meaning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 798 Beyond URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 798 New Addressing Schemes: URNs, URCs, and URIs . . . . . . . . . . . . . . 798E Reading a Document Type Definition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801 Element Type Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 801 Occurrence Indicators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 802 Logical Connectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 803 SGML Content Exclusion and Inclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804 Attribute Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 804 SGML and XML Keywords . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805 Parameter Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 806 The DTDs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807 Index ........................................................... 809
  • 20. This page intentionally left blank
  • 21. AcknowledgmentsT he fifth edition of this book might as well be the first edition of a brand-new book. The HTML5 specification marks a return to past ideas and an explosion of future ideas. It took a great deal of work to put this new edition together. Given the amountof effort required, I want to make sure that all those that helped are given their due. First, Iwant to acknowledge the numerous fixes and improvements that came from the feedbackfrom both my students at UCSD and readers around the world. I write these books for you,and I am glad you are putting this information to good use. I would also like to show my appreciation to the many staff members at PINT whohelped on this book project in some direct or indirect way. I can’t specifically thank andmention the dozens of employees we have at PINT and my other firm Port80 Software whokeep the lights on, but I’ll call a few out who warrant some extra kudos. Christie Sorenson once again helped this time with heavy lifting particularly in the CSSeffort, and I can safely say that she has learned, relearned, and even forgotten more aboutWeb development than probably anyone I know, besides maybe myself. Looking forward tomore project fun in the future, Christie! Plenty of other PINTsters helped. Rob McFarlane, Andrew Simpkins, and Bryan Sleiterhelped out with imagery. The project managers, particularly Mine Okano, Robin Nobel,Matt Plotner, and Olivia Chen, gave me moral support and occasional pity as I toiled awayupstairs. Glenn Dawson addressed my many server changes and helped debug someannoying aspects of HTML5. Dan Whitworth assisted on a few chapters here and there andprobably had nightmares about getting a call to really dive in. Joe Lima listened to some of my verbal nonsense and helped guide me to some deeperinsights than I could have ever arrived at on my own. Daisy Bhonsle kept up a very long-standing proofing relationship, and I am very gladshe always helps out. The student certainly has become the master. The folks at McGraw-Hill Professional are always a pleasure to work with. MeghanRiley helped guide me along, and Megg Morin didn’t lose faith, at least not completely.Thanks for being my patron the last decade, Megg! My technical editor, James Pence, probably wondered when this project was going tofinish, and somehow he finished a nontechnical book of his own during the project. xxi
  • 22. xxii HTML & CSS: The Complete Reference Finally, to my friends and family who tried to give me space to write this thing, you deserve the biggest thanks. My children, Graham, Olivia, and Desmond, had to put up with a grouchy dad and far too many absent weekends, so we now return you to our regularly scheduled weekends! Cecilia, you provided a lot of help as well that made things a bit easier on all of us, so thank you for that. Finally, Sylvia, you always support my online efforts, as hard as they may be. I know you, more than anyone, appreciate the importance of this project, considering the role HTML has played in our lives. Thomas A. Powell tpowell@pint.com October 2009
  • 23. Introduction xxiii