book

CSS: The Definitive Guide, 3rd Edition

Name: CSS: The Definitive Guide, 3rd Edition
Author: Eric Meyer
ISBN: 9780596527334

by Eric Meyer

November 2006

Intermediate to advanced

538 pages

17h 6m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Dedication
Preface
Conventions Used in This BookProperty ConventionsUsing Code ExamplesHow to Contact UsSafari® EnabledAcknowledgments
1. CSS and Documents
1.1. The Web’s Fall from Grace1.1.1. What a Mess1.2. CSS to the Rescue1.2.1. Rich Styling1.2.2. Ease of Use1.2.3. Using Your Styles on Multiple Pages1.2.4. Cascading1.2.5. Compact File Size1.2.6. Preparing for the Future1.3. Elements1.3.1. Replaced and Nonreplaced Elements1.3.1.1. Replaced elements1.3.1.2. Nonreplaced elements1.3.2. Element Display Roles1.3.2.1. Block-level elements1.3.2.2. Inline-level elements1.4. Bringing CSS and XHTML Together1.4.1. The link Tag1.4.1.1. Attributes1.4.1.2. Alternate style sheets1.4.2. The style Element1.4.3. The @import Directive1.4.4. Actual Style Rules1.4.4.1. Backward accessibility1.4.5. CSS Comments1.4.6. Inline Styles1.5. Summary
2. Selectors
2.1. Basic Rules2.1.1. Rule Structure2.1.2. Element Selectors2.1.3. Declarations and Keywords2.2. Grouping2.2.1. Grouping Selectors2.2.1.1. The universal selector2.2.2. Grouping Declarations2.2.3. Grouping Everything2.3. Class and ID Selectors2.3.1. Class Selectors2.3.2. Multiple Classes2.3.3. ID Selectors2.3.4. Deciding Between Class and ID2.4. Attribute Selectors2.4.1. Simple Attribute Selection2.4.2. Selection Based on Exact Attribute Value2.4.3. Selection Based on Partial Attribute Values2.4.4. A Particular Attribute Selection Type2.5. Using Document Structure2.5.1. Understanding the Parent-Child Relationship2.5.2. Descendant Selectors2.5.3. Selecting Children2.5.4. Selecting Adjacent Sibling Elements2.6. Pseudo-Classes and Pseudo-Elements2.6.1. Pseudo-Class Selectors2.6.1.1. Link pseudo-classes2.6.1.2. Dynamic pseudo-classes2.6.1.3. Real-world issues with dynamic styling2.6.1.4. Selecting a first child2.6.1.5. Selecting based on language2.6.1.6. Combining pseudo-classes2.6.2. Pseudo-Element Selectors2.6.2.1. Styling the first letter2.6.2.2. Styling the first line2.6.2.3. Restrictions on :first-letter and :first-line2.6.2.4. Style before and after elements2.7. Summary
3. Structure and the Cascade
3.1. Specificity3.1.1. Declarations and Specificity3.1.2. Universal Selector Specificity3.1.3. ID and Attribute Selector Specificity3.1.4. Inline Style Specificity3.1.5. Importance3.2. Inheritance3.3. The Cascade3.3.1. Sorting by Weight and Origin3.3.2. Sorting by Specificity3.3.3. Sorting by Order3.3.4. Non-CSS Presentational Hints3.4. Summary
4. Values and Units
4.1. Numbers4.2. Percentages4.3. Color4.3.1. Named Colors4.3.2. Colors by RGB4.3.2.1. Functional RGB colors4.3.2.2. Hexadecimal RGB colors4.3.2.3. Bringing the colors together4.3.2.4. Web-safe colors4.4. Length Units4.4.1. Absolute Length Units4.4.1.1. Working with absolute lengths4.4.2. Relative Length Units4.4.2.1. em and ex units4.4.2.2. Practical issues with em and ex4.4.2.3. Pixel lengths4.4.2.4. Pixel theory4.4.2.5. What to do?4.5. URLs4.5.1. Keywords4.5.1.1. inherit4.6. CSS2 Units4.7. Summary
5. Fonts
5.1. Font Families5.1.1. Using Generic Font Families5.1.2. Specifying a Font Family5.1.2.1. Using quotation marks5.2. Font Weights5.2.1. How Weights Work5.2.2. Getting Bolder5.2.3. Lightening Weights5.3. Font Size5.3.1. Absolute Sizes5.3.2. Relative Sizes5.3.3. Percentages and Sizes5.3.4. Font Size and Inheritance5.3.5. Using Length Units5.4. Styles and Variants5.4.1. Fonts with Style5.4.2. Font Variations5.5. Stretching and Adjusting Fonts5.6. The font Property5.6.1. Adding the Line Height5.6.2. Using Shorthands Properly5.6.3. Using System Fonts5.7. Font Matching5.7.1. Font-Face Rules5.7.1.1. Font-name matching5.7.1.2. Intelligent font matching5.7.1.3. Font synthesis5.7.1.4. Font download5.8. Summary
6. Text Properties
6.1. Indentation and Horizontal Alignment6.1.1. Indenting Text6.1.2. Horizontal Alignment6.2. Vertical Alignment6.2.1. The Height of Lines6.2.1.1. Constructing a line6.2.1.2. Assigning values to line-height6.2.1.3. Line height and inheritance6.2.2. Vertically Aligning Text6.2.2.1. Baseline alignment6.2.2.2. Superscripting and subscripting6.2.2.3. Bottom feeding6.2.2.4. Getting on top6.2.2.5. In the middle6.2.2.6. Percentages6.2.2.7. Length alignment6.3. Word Spacing and Letter Spacing6.3.1. Word Spacing6.3.2. Letter Spacing6.3.3. Spacing and Alignment6.4. Text Transformation6.5. Text Decoration6.5.1. Weird Decorations6.6. Text Shadows6.6.1. Handling Whitespace6.6.2. Text Direction6.7. Summary
7. Basic Visual Formatting
7.1. Basic Boxes7.1.1. The Containing Block7.1.2. A Quick Refresher7.2. Block-Level Elements7.2.1. Horizontal Formatting7.2.1.1. Horizontal properties7.2.1.2. Using auto7.2.1.3. More than one auto7.2.1.4. Negative margins7.2.1.5. Percentages7.2.1.6. Replaced elements7.2.2. Vertical Formatting7.2.2.1. Vertical properties7.2.2.2. Percentage heights7.2.2.3. Auto heights7.2.2.4. Collapsing vertical margins7.2.2.5. Negative margins7.2.3. List Items7.3. Inline Elements7.3.1. Line Layout7.3.2. Basic Terms and Concepts7.3.3. Inline Formatting7.3.4. Inline Nonreplaced Elements7.3.4.1. Building the boxes7.3.4.2. Vertical alignment7.3.4.3. Managing the line-height7.3.4.4. Scaling line heights7.3.4.5. Adding box properties7.3.5. Inline Replaced Elements7.3.5.1. Adding box properties7.3.5.2. Replaced elements and the baseline7.4. Altering Element Display7.4.1. Changing Roles7.4.2. Inline-Block Elements7.4.3. Run-in Elements7.4.3.1. Computed values7.5. Summary
8. Padding, Borders, and Margins
8.1. Basic Element Boxes8.1.1. Width and Height8.1.2. Margins Versus Padding8.2. Margins8.2.1. Length Values and Margins8.2.2. Percentages and Margins8.2.3. Replicating Values8.2.4. Single-Side Margin Properties8.2.5. Negative and Collapsed Margins8.2.6. Margins and Inline Elements8.3. Borders8.3.1. Borders and Backgrounds8.3.2. Borders with Style8.3.2.1. Multiple styles8.3.2.2. Single-side styles8.3.3. Border Widths8.3.3.1. No border at all8.3.4. Border Colors8.3.4.1. Transparent borders8.3.5. Shorthand Border Properties8.3.6. Global Borders8.3.7. Borders and Inline Elements8.4. Padding8.4.1. Percentage Values and Padding8.4.2. Single-Side Padding8.4.3. Padding and Inline Elements8.4.4. Padding and Replaced Elements8.5. Summary

9. Colors and Backgrounds
9.1. Colors9.2. Foreground Colors9.2.1. Replacing Attributes9.2.2. Affecting Borders9.2.3. Affecting Form Elements9.2.4. Inheriting Color9.3. Backgrounds9.3.1. Background Color9.3.1.1. Historical issues9.3.1.2. Special effects9.3.2. Background Images9.3.2.1. Using an image9.3.2.2. Why backgrounds aren’t inherited9.3.2.3. Good background practices9.3.3. Repeats with Direction9.3.4. Background Positioning9.3.4.1. Keywords9.3.4.2. Percentage values9.3.4.3. Length values9.3.5. Repeats with Direction (Revisited)9.3.6. Getting Attached9.3.6.1. Interesting effects9.3.7. Bringing It All Together9.4. Summary
10. Floating and Positioning
10.1. Floating10.1.1. Floated Elements10.1.1.1. No floating at all10.1.2. Floating: The Details10.1.3. Applied Behavior10.1.3.1. Negative margins10.1.4. Floats, Content, and Overlapping10.1.5. Clearing10.2. Positioning10.2.1. Basic Concepts10.2.1.1. Types of positioning10.2.1.2. The containing block10.2.1.3. Offset properties10.2.2. Width and Height10.2.2.1. Setting width and height10.2.2.2. Limiting width and height10.2.3. Content Overflow and Clipping10.2.3.1. Overflow10.2.3.2. Content clipping10.2.4. Element Visibility10.2.5. Absolute Positioning10.2.5.1. Containing blocks and absolutely positioned elements10.2.5.2. Placement and sizing of absolutely positioned elements10.2.5.3. Auto-edges10.2.5.4. Placing and sizing nonreplaced elements10.2.5.5. Placing and sizing replaced elements10.2.5.6. Placement on the z-axis10.2.6. Fixed Positioning10.2.7. Relative Positioning10.3. Summary
11. Table Layout
11.1. Table Formatting11.1.1. Visually Arranging a Table11.1.1.1. Table arrangement rules11.1.2. Table Display Values11.1.2.1. Row primacy11.1.2.2. Columns11.1.3. Anonymous Table Objects11.1.3.1. Object insertion rules11.1.4. Table Layers11.1.5. Captions11.2. Table Cell Borders11.2.1. Separated Cell Borders11.2.1.1. Border spacing11.2.1.2. Handling empty cells11.2.2. Collapsing Cell Borders11.2.2.1. Collapsing border layout11.2.2.2. Border collapsing11.3. Table Sizing11.3.1. Width11.3.1.1. Fixed layout11.3.1.2. Automatic layout11.3.2. Height11.3.3. Alignment11.4. Summary
12. Lists and Generated Content
12.1. Lists12.1.1. Types of Lists12.1.2. List Item Images12.1.3. List-Marker Positions12.1.4. List Styles in Shorthand12.1.5. List Layout12.2. Generated Content12.2.1. Inserting Generated Content12.2.2. Specifying Content12.2.2.1. Inserting attribute values12.2.2.2. Generated quotes12.2.3. Counters12.2.3.1. Resetting and incrementing12.2.3.2. Using counters12.2.3.3. Counters and scope12.3. Summary
13. User Interface Styles
13.1. System Fonts and Colors13.1.1. System Fonts13.1.2. System Colors13.2. Cursors13.2.1. Changing the Cursor13.2.1.1. Pointing and selection cursors13.2.1.2. Movement cursors13.2.1.3. Waiting and progressing13.2.1.4. Providing help13.2.1.5. Graphic cursors13.3. Outlines13.3.1. Setting an Outline’s Style13.3.2. Outline Width13.3.3. Coloring an Outline13.3.4. Bringing It All Together13.4. Summary
14. Non-Screen Media
14.1. Designating Medium-Specific Style Sheets14.2. Paged Media14.2.1. Print Styles14.2.1.1. Differences between screen and print14.2.1.2. Defining the page size14.2.1.3. Selecting page types14.2.1.4. Page breaking14.2.1.5. Orphans and widows14.2.1.6. Page-breaking behavior14.2.1.7. Repeated elements14.2.1.8. Elements outside the page14.2.2. Projection Styles14.2.2.1. Setting up slides14.2.2.2. Positioning elements14.2.2.3. Considerations for projection14.3. Aural Styles14.3.1. Speaking14.3.1.1. Punctuation and numbers14.3.1.2. Speaking table headers14.3.1.3. Speech rate14.3.2. Volume14.3.3. Giving Voice14.3.4. Altering the Voice14.3.4.1. Changing the pitch14.3.4.2. Stress and richness14.3.5. Pauses and Cues14.3.5.1. Pauses14.3.5.2. Cues14.3.5.3. Pauses, cues, and generated content14.3.6. Background Sounds14.3.7. Positioning Sounds14.3.7.1. Combining azimuth with elevation14.4. Summary
A. Property Reference
A.1. Visual MediaA.1.1. backgroundA.1.2. background-attachmentA.1.3. background-colorA.1.4. background-imageA.1.5. background-positionA.1.6. background-repeatA.1.7. borderA.1.8. border-bottomA.1.9. border-bottom-colorA.1.10. border-bottom-styleA.1.11. border-bottom-widthA.1.12. border-colorA.1.13. border-leftA.1.14. border-left-colorA.1.15. border-left-styleA.1.16. border-left-widthA.1.17. border-rightA.1.18. border-right-colorA.1.19. border-right-styleA.1.20. border-right-widthA.1.21. border-styleA.1.22. border-topA.1.23. border-top-colorA.1.24. border-top-styleA.1.25. border-top-widthA.1.26. border-widthA.1.27. bottomA.1.28. clearA.1.29. clipA.1.30. colorA.1.31. contentA.1.32. counter-incrementA.1.33. counter-resetA.1.34. cursorA.1.35. directionA.1.36. displayA.1.37. floatA.1.38. fontA.1.39. font-familyA.1.40. font-sizeA.1.41. font-styleA.1.42. font-variantA.1.43. font-weightA.1.44. heightA.1.45. leftA.1.46. letter-spacingA.1.47. line-heightA.1.48. list-styleA.1.49. list-style-imageA.1.50. list-style-positionA.1.51. list-style-typeA.1.52. marginA.1.53. margin-bottomA.1.54. margin-leftA.1.55. margin-rightA.1.56. margin-topA.1.57. max-heightA.1.58. max-widthA.1.59. min-heightA.1.60. min-widthA.1.61. outlineA.1.62. outline-colorA.1.63. outline-styleA.1.64. outline-widthA.1.65. overflowA.1.66. paddingA.1.67. padding-bottomA.1.68. padding-leftA.1.69. padding-rightA.1.70. padding-topA.1.71. positionA.1.72. quotesA.1.73. rightA.1.74. text-alignA.1.75. text-decorationA.1.76. text-indentA.1.77. text-transformA.1.78. topA.1.79. unicode-bidiA.1.80. vertical-alignA.1.81. visibilityA.1.82. white-spaceA.1.83. widthA.1.84. word-spacingA.1.85. z-indexA.2. TablesA.2.1. border-collapseA.2.2. border-spacingA.2.3. caption-sideA.2.4. empty-cellsA.2.5. table-layoutA.3. Paged MediaA.3.1. orphansA.3.2. page-break-afterA.3.3. page-break-beforeA.3.4. page-break-insideA.3.5. widowsA.4. Dropped from CSS2.1A.5. Visual StylesA.5.1. font-size-adjustA.5.2. font-stretchA.5.3. marker-offsetA.5.4. text-shadowA.6. Paged MediaA.6.1. marksA.6.2. pageA.6.3. sizeA.7. Aural StylesA.7.1. azimuthA.7.2. cueA.7.3. cue-afterA.7.4. cue-beforeA.7.5. elevationA.7.6. pauseA.7.7. pause-afterA.7.8. pause-beforeA.7.9. pitchA.7.10. pitch-rangeA.7.11. play-duringA.7.12. richnessA.7.13. speakA.7.14. speak-headerA.7.15. speak-numeralA.7.16. speak-punctuationA.7.17. speech-rateA.7.18. stressA.7.19. voice-familyA.7.20. volume
B. Selector, Pseudo-Class, and Pseudo-Element Reference
B.1. SelectorsB.1.1. Universal SelectorB.1.2. Type SelectorB.1.3. Descendant SelectorB.1.4. Child SelectorB.1.5. Adjacent Sibling SelectorB.1.6. Class SelectorB.1.7. ID SelectorB.1.8. Simple Attribute SelectorB.1.9. Exact Attribute Value SelectorB.1.10. Partial Attribute Value SelectorB.1.11. Beginning Substring Attribute Value SelectorB.1.12. Ending Substring Attribute Value SelectorB.1.13. Arbitrary Substring Attribute Value SelectorB.1.14. Language Attribute SelectorB.2. Pseudo-Classes and Pseudo-ElementsB.2.1. :activeB.2.2. :afterB.2.3. :beforeB.2.4. :first-childB.2.5. :first-letterB.2.6. :first-lineB.2.7. :focusB.2.8. :hoverB.2.9. :langB.2.10. :linkB.2.11. :visited
C. Sample HTML 4 Style Sheet
Index
About the Author
Colophon
Copyright

Content preview from CSS: The Definitive Guide, 3rd Edition

About the Author

Eric A. Meyer has been working with the Web since late 1993 and is an internationally recognized expert on the subjects of HTML, CSS, and web standards. A widely read author, he is also the founder of Complex Spiral Consulting (www.complexspiral.com), which counts among its clients America Online; Apple Computer, Inc.; Wells Fargo Bank; and Macromedia, which described Eric as "a critical partner in our efforts to transform Macromedia Dreamweaver MX 2004 into a revolutionary tool for CSS-based design."

Beginning in early 1994, Eric was the visual designer and campus web coordinator for the Case Western Reserve University web site, where he also authored a widely acclaimed series of three HTML tutorials and was Project Coordinator for the online version of the Encyclopedia of Cleveland History and the Dictionary of Cleveland Biography, the first encyclopedia of urban history published fully and freely on the Web.

Author of Eric Meyer on CSS and More Eric Meyer on CSS (New Riders), Cascading Style Sheets: The Definitive Guide (O'Reilly), and CSS2.0 Programmer's Reference (Osborne/McGraw-Hill), as well as numerous articles for the O'Reilly Network, Web Techniques, and Web Review, Eric also created the CSS Browser Compatibility Charts and coordinated the authoring and creation of the W3C's official CSS Test Suite. He has lectured to a wide variety of organizations, including Los Alamos National Laboratory, the New York Public Library, Cornell University, and the University ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Publisher Resources

ISBN: 0596527330Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

CSS: The Definitive Guide, 3rd Edition

by Eric Meyer

About the Author

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.