(Document Body) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
(Line Break) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 (Form Button) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 (Canvas for Drawing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198 (Table Caption) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

(Center Alignment) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210 (Citation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 (Code Listing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 (Table Column) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 (Table Column Group) . . . . . . . . . . . . . . . . . . . . . . . . . . 216 (Command) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 (Comment Information) . . . . . . . . . . . . . . . . . . . . . . . . . 220 (List of Prell Data) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 (Denition Description in a Denition List or Content in Details or Figure) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222 (Deleted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224 (Additional Details) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 (Denition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

• (Directory List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230

(Division) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 (Denition List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 (Term in a Denition List or Caption in Figure or Details) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 (Emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 (Embedded Object) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240 (Form Field Grouping) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 (Figure) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 244 (Font Denition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 (Footer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248 (Form for User Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 (Window Region) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 (Frameset Denition) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255 through (Headings) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 (Document Head) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 (Header) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 (Header Group) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263 11. (Horizontal Rule) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 (HTML Document) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 (Italic) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269 (Inline Frame) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 (Inow Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 (Image) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 (Input Form Control) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 (Inserted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 (Index Prompt) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 (Keyboard Input) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 (Key Pair Generation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 (Form Control Label) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 (Positioned Layer) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296 (Descriptive Legend) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 (List Item) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 (Link to External Files or Set Relationships) . . . . . . . . . . . . . 303 (Code Listing) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 (Client-Side Image Map) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 (Marked Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 (Marquee Display) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 (Menu List or Command Menu) . . . . . . . . . . . . . . . . . . . . . 318 (Meta-Information) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 (Scalar Gauge) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 (Multiple Column Text) . . . . . . . . . . . . . . . . . . . . . . . . . . 325 (Navigation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 (No Line Breaks) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 (No Embedded Media Support) . . . . . . . . . . . . . . . . . . 328 (No Frame Support Content) . . . . . . . . . . . . . . . . . . . . 329 (No Script Support Content) . . . . . . . . . . . . . . . . . . . . . . 330 (Embedded Object) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 (Ordered List) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 (Option Grouping) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338 (Option in Selection List) . . . . . . . . . . . . . . . . . . . . . . . . . . 339 (Form Output) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341

(Paragraph) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343 (Object Parameter) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 (Plain Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 (Preformatted Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 (Progress Indicator) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350 (Quote) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 351 (Ruby Parentheses) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 (Ruby Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 (Ruby Annotation) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 357 (Strikethrough) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 (Sample Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360

12. xii HTML & CSS: The Complete Referencexii HTML & CSS: The Complete Reference (Extra Space) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 (Text Span) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 (Strikeout Text) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 (Strong Emphasis) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 13. 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

and 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 519 5 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 C o n t e n t s xiii 14. xiv HTML & CSS: The Complete Referencexiv 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 oat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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. 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 overow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 6 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 C o n t e n t s xv 16. xvi HTML & CSS: The Complete Referencexvi HTML & CSS: The Complete Reference Implemented CSS3 and Browser-Specic 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-reect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 lter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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. marquee-play-count . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 678 marquee-speed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 679 marquee-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 680 mask . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 681 mask-attachment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682 mask-box-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 682 mask-clip . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 683 mask-composite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 mask-image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 684 mask-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685 mask-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 685 mask-position-x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 686 mask-position-y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687 mask-repeat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 687 mask-size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 688 opacity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690 outline-offset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 690 outline-radius . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691 overow-style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 691 overow-x . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 692 overow-y . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693 perspective . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 693 perspective-origin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 694 resize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 695 ruby-align . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 696 ruby-overhang . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 697 ruby-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698 scrollbar-3dlight-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 698 scrollbar-arrow-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699 scrollbar-base-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 699 scrollbar-darkshadow-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 700 scrollbar-face-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701 scrollbar-highlight-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 701 scrollbar-shadow-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 702 scrollbar-track-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703 size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 703 text-align-last . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704 text-autospace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 704 text-ll-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 text-justify . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705 text-kashida-space . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 706 text-overow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 707 text-rendering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708 text-shadow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 708 text-stroke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710 text-stroke-color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 710 text-stroke-width . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711 text-underline-position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 711 transform . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 712 C o n t e n t s xvii 18. xviii HTML & CSS: The Complete Referencexviii 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 Modier 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 Microsofts 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. CSS Color Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 773 CSS Color-Related Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 776 Browser-Safe Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779 D URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Basic Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 783 Server Address . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 784 Directory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786 Filename . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 787 Fragment Identier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788 Protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 788 Other Features of URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789 Data URIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 791 Other Emerging URL Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 794 Relative URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 795 Using the 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 . . . . . . . . . . . . . . 798 E Reading a Document Type Denition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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 C o n t e n t s xix 20. This page intentionally left blank 21. Acknowledgments T 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 amount of effort required, I want to make sure that all those that helped are given their due. First, I want to acknowledge the numerous fixes and improvements that came from the feedback from 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 who helped on this book project in some direct or indirect way. I cant specifically thank and mention the dozens of employees we have at PINT and my other firm Port80 Software who keep the lights on, but Ill call a few out who warrant some extra kudos. Christie Sorenson once again helped this time with heavy lifting particularly in the CSS effort, and I can safely say that she has learned, relearned, and even forgotten more about Web development than probably anyone I know, besides maybe myself. Looking forward to more project fun in the future, Christie! Plenty of other PINTsters helped. Rob McFarlane, Andrew Simpkins, and Bryan Sleiter helped 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 away upstairs. Glenn Dawson addressed my many server changes and helped debug some annoying aspects of HTML5. Dan Whitworth assisted on a few chapters here and there and probably 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 deeper insights than I could have ever arrived at on my own. Daisy Bhonsle kept up a very long-standing proofing relationship, and I am very glad she always helps out. The student certainly has become the master. The folks at McGraw-Hill Professional are always a pleasure to work with. Meghan Riley helped guide me along, and Megg Morin didnt 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 to finish, 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. I n t r o d u c t i o n xxiii Introduction T he fifth edition of this book represents a significant change in structure and content to address HTML5. The book is similar to the previous edition in maybe a third of the content; otherwise, it is an all-new effort. Most obviously, as compared to the previous editions, which focused mainly on XHTML and HTML 4, this edition focuses on HTML5, which represents both a return to the markup past and the unveiling of an exciting future of Web applications. However, we do retain some information from previous editions because in order for this work to be truly complete, we must not focus only on the future but also present all the elements supported in browsers today, including the archaic, proprietary, and standard (X)HTML tags. These will still be encountered for years to come, and we want this book to provide the reference you need in addressing their syntax. CSS coverage has been expanded greatly to fully cover CSS 2.1 as well as every proprietary and emerging CSS 3 property supported in one or more popular shipping browsers circa 2009. No value judgment is made; if Internet Explorer has supported a proprietary CSS feature for the last decade, its included. However, we do avoid presenting CSS features that are truly speculative in great depth, but where appropriate, we summarize or present pointers to the emerging syntax. The ramification of the increased markup and CSS coverage is simply the book doesnt have space left to do everything it did before. Teaching nearly everything about HTML and CSS in prose form and then presenting a complete syntax reference for the technologies would have produced a book well over 2,000 pages. We were well on the way to that when we adjusted our efforts to create what you have in your hands, a solid reference book that may be used for years to come. This isnt to say that learning material is not present at all. There are very solid introductory chapters for the markup and CSS sections, which should succinctly address details and standards issues. There just isnt a step-by-step cookbook for each element or property. Given the maturity of the Web industry, we aimed not for the complete tutorial, but instead for the complete reference. It should go without saying that more markup changes to HTML and CSS are inevitable. HTML5, in particular, is a complete moving target, and rather than punting on it, we took the best shot at its first release version as it settled in late 2009. Because of the inevitable changes given HTML5s rapid evolution, the support Web site, http://htmlref.com, should be considered an important bookmark for readers looking for updates or the unavoidable correction. xxiiixxiii 24. This page intentionally left blank 25. I Core Markup CHAPTER 1 Traditional HTML and XHTML CHAPTER 2 Introducing HTML5 CHAPTER 3 HTML and XHTML Element Reference PART 26. This page intentionally left blank 27. 1 Traditional HTML and XHTML M arkup languages are ubiquitous in everyday computing. Although you may not realize it, word processing documents are filled with markup directives indicating the structure and often presentation of the document. In the case of traditional word processing documents, these structural and presentational markup codes are more often than not behind the scenes. However, in the case of Web documents, markup in the form of traditional Hypertext Markup Language (HTML) and its Extensible Markup Language (XML)-focused variant, XHTML, is a little more obvious. These not-so-behind-the-scenes markup languages are used to inform Web browsers about page structure and, some might argue, presentation as well. First Look at HTML and XHTML In the case of HTML, markup instructions found within a Web page relay the structure of the document to the browser software. For example, if you want to emphasize a portion of text, you enclose it within the tags and , as shown here: This is important text! 33 CHAPTER 28. 4 P a r t I : C o r e M a r k u p4 P a r t I : C o r e M a r k u p When a Web browser reads a document that has HTML markup in it, it determines how to render it onscreen by considering the HTML elements embedded within the document: So, an HTML document is simply a text file that contains the information you want to publish and the appropriate markup instructions indicating how the browser should structure or present the document. Markup elements are made up of a start tag, such as , and typically, though not always, an end tag, which is indicated by a slash within the tag, such as . The tag pair should fully enclose any content to be affected by the element, including text and other HTML markup. NOTE There is a distinction between an element (for example, strong) and the tags ( and ) that are used by the element. However, you will likely often find the word tag used in place of element in many if not most discussions about HTML markup. This observation even includes historically relevant documents discussing HTML1 written by Tim Berners-Lee, the founding father of the Web. Fortunately, despite any imprecision of word choice that people may exhibit when discussing markup, meaning is usually well understood and this should not be a tremendous concern. Under traditional HTML (not XHTML), the close tag for some elements is optional because their closure can be inferred. For example, a

tag cannot enclose another

tag, and thus the closing

tag can be inferred when markup like this is encountered:

This is a paragraph.

This is also a paragraph. Such shortened notations that depend on inference may be technically correct under the specification, but stylistically they are not encouraged. It is always preferable to be precise, so use markup like this instead:

This is a paragraph.

This is also a paragraph.

1 Historic intro to HTML that clearly uses the term tag instead of element www.w3.org/History/19921103- hypertext/hypertext/WWW/MarkUp/Tags.html 29. C h a p t e r 1 : Tr a d i t i o n a l H T M L a n d X H T M L 5C h a p t e r 1 : Tr a d i t i o n a l H T M L a n d X H T M L 5 PARTI There are markup elements, called empty elements, which do not enclose any content, thus need no close tags at all, or in the case of XHTML use a self-close identification scheme. For example, to insert a line break, use a single
tag, which represents the empty br element, because it doesnt enclose any content and thus has no corresponding close tag:
However, in XML markup variants, particularly XHTML, an unclosed tag is not allowed, so you need to close the tag
or, more commonly, use a self-identification of closure like so:
The start tag of an element might contain attributes that modify the meaning of the tag. For example, in HTML, the simple inclusion of the noshade attribute in an tag, as shown here: indicates that there should be no shading applied to this horizontal rule. Under XHTML, such style attributes are not allowed, because all attributes must have a value, so instead you have to use syntax like this: As the preceding example shows, attributes may require values, which are specified with an equal sign; these values should be enclosed within double or single quotes. For example, using standard HTML syntax, specifies four attributes for this tag that are used to provide more information about the use of the included image. Under traditional HTML, in the case of simple alphanumeric attribute values, the use of quotes is optional, as shown here:

Regardless of the flexibility provided under standard HTML, you should always aim to use quotes on all attributes. You will find that doing so makes markup more consistent, makes upgrading to stricter markup versions far easier, and tends to help reduce errors caused by inconsistency.

30. 6 P a r t I : C o r e M a r k u p6 P a r t I : C o r e M a r k u p A graphical overview of the HTML markup syntax shown so far is presented here: Hello HTML and XHTML World Given these basics of HTML syntax, it is best now to look at an example document to see its application. Our first complete example written in strict HTML 4 is shown here: Hello HTML 4 WorldWelcome to the World of HTML

HTML really isn't so hard!

Soon you will using HTML.

You can put lots of text here if you want. We could go on and on with fake text for you to read, but let's get back to the book.

ONLINE http://htmlref.com/ch1/html4helloworld.html A simple modification of the initial line is really all that is necessary to make this an HTML5 example, the comment and text is changed so you can keep the examples straight: Hello HTML5 WorldWelcome to the Future World of HTML5

HTML5 really isn't so hard!

Example Heading Tag Name Attribute Name Attribute Affected ContentStart Tag HTML Element Attribute Value End Tag 31. C h a p t e r 1 : Tr a d i t i o n a l H T M L a n d X H T M L 7C h a p t e r 1 : Tr a d i t i o n a l H T M L a n d X H T M L 7 PARTI

Soon you will using HTML.

You can put lots of text here if you want. We could go on and on with fake text for you to read, but let's get back to the book.

ONLINE http://htmlref.com/ch1/html5helloworld.html In the case of XHTML, which is a form of HTML that is based upon the syntax rules of XML, we really dont see many major changes yet in our example: Hello XHTML WorldWelcome to the World of XHTML

XHTML really isn't so hard either!

Soon you will using XHTML too.

There are some differences between XHTML and HTML but with some precise markup you'll see such differences are easily addressed.