O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

CSS Pocket Reference, 5th Edition

Book Description

When you’re working with CSS and need an answer now, this concise yet comprehensive quick reference provides the essential information you need. Revised and updated for CSS3, this fifth edition is ideal for intermediate to advanced web designers and developers.

You’ll find a short introduction to the key concepts of CSS and alphabetical summaries of CSS selectors and properties. You’ll also discover information on new properties, including grid, flexbox, clipping, masking, and compositing.

  • Quickly find the information you need
  • Explore CSS concepts, values, selectors and queries, and properties
  • Learn how new features complement and extend your CSS practices
  • Discover new properties including animations, grid, flexbox, masking, filtering, and compositing in this new edition

Table of Contents

  1. Preface
    1. Conventions Used in This Book
    2. Using Code Examples
    3. O’Reilly Safari
    4. How to Contact Us
  2. 1. Basic Concepts
    1. Adding Styles to HTML
      1. Inline Styles
      2. Embedded Stylesheets
      3. External Stylesheets
    2. Rule Structure
    3. At-rules
    4. Comments
    5. Style Precedence
      1. Specificity Calculations
      2. Inheritance
      3. The Cascade
    6. Element Classification
      1. Nonreplaced Elements
      2. Replaced Elements
    7. Element Display Roles
      1. Block-Level
      2. Inline-Level
    8. Basic Visual Layout
      1. Block-Level Layout
      2. Inline Layout
    9. Floating
    10. Positioning
      1. Types of Positioning
      2. The Containing Block
    11. Flexible Box Layout
    12. Grid Layout
    13. Table Layout
      1. Table Arrangement Rules
      2. Fixed Table Layout
      3. Automatic Table Layout
      4. Collapsing Cell Borders
      5. Vertical Alignment Within Cells
  3. 2. Values
    1. Keywords
    2. Color Values
    3. Number Values
    4. Percentage Values
    5. Length Values
      1. Absolute Length Units
      2. Relative Length Units
    6. Fraction Values
    7. URIs
    8. Angles
    9. Times
    10. Frequencies
    11. Position
    12. Strings
    13. Identifiers
    14. Attribute Values
    15. Calculation Values
    16. Variable Values
  4. 3. Selectors and Queries
    1. Selectors
      1. Universal Selector
      2. Type Selector
      3. Descendant Selector
      4. Child Selector
      5. Adjacent Sibling Selector
      6. General Sibling Selector
      7. Class Selector
      8. ID Selector
      9. Simple Attribute Selector
      10. Exact Attribute Value Selector
      11. Partial Attribute Value Selector
      12. Beginning Substring Attribute Value Selector
      13. Ending Substring Attribute Value Selector
      14. Arbitrary Substring Attribute Value Selector
      15. Language Attribute Selector
    2. Structural Pseudo-Classes
      1. :empty
      2. :first-child
      3. :first-of-type
      4. :lang
      5. :last-child
      6. :last-of-type
      7. :nth-child(an±b)
      8. :nth-last-child(an±b)
      9. :nth-last-of-type(an±b)
      10. :nth-of-type(an±b)
      11. :only-child
      12. :only-of-type
      13. :root
    3. The Negation Pseudo-Class
      1. :not(e)
    4. Interaction Pseudo-Classes
      1. :active
      2. :checked
      3. :disabled
      4. :enabled
      5. :focus
      6. :hover
      7. :link
      8. :target
      9. :visited
    5. Pseudo-Elements
      1. ::after
      2. ::before
      3. ::first-letter
      4. ::first-line
    6. Media Queries
      1. Basic Concepts
      2. Media Query Values
      3. Media Features
    7. Feature Queries
  5. 4. Property Reference
    1. Inheritance and Animation
    2. Value Syntax Conventions
    3. Universal Values
    4. Properties
      1. align-content Inh. N Anim. N
      2. align-items Inh. N Anim. N
      3. align-self Inh. N Anim. N
      4. all Inh. N Anim. N
      5. animation Inh. N Anim. N
      6. animation-delay Inh. N Anim. N
      7. animation-direction Inh. N Anim. N
      8. animation-duration Inh. N Anim. N
      9. animation-iteration-count Inh. N Anim. N
      10. animation-name Inh. N Anim. N
      11. animation-play-state Inh. N Anim. N
      12. animation-timing-function Inh. N Anim. N
      13. backface-visibility Inh. N Anim. N
      14. background Inh. N Anim. P
      15. background-attachment Inh. N Anim. N
      16. background-blend-mode Inh. N Anim. N
      17. background-clip Inh. N Anim. N
      18. background-color Inh. N Anim. Y
      19. background-image Inh. N Anim. N
      20. background-origin Inh. N Anim. N
      21. background-position Inh. N Anim. Y
      22. background-repeat Inh. N Anim. N
      23. background-size Inh. N Anim. Y
      24. border Inh. N Anim. P
      25. border-bottom Inh. N Anim. P
      26. border-bottom-color Inh. N Anim. Y
      27. border-bottom-left-radius Inh. N Anim. Y
      28. border-bottom-right-radius Inh. N Anim. Y
      29. border-bottom-style Inh. N Anim. N
      30. border-bottom-width Inh. N Anim. Y
      31. border-collapse Inh. Y Anim. Y
      32. border-color Inh. N Anim. Y
      33. border-image Inh. N Anim. P
      34. border-image-outset Inh. N Anim. Y
      35. border-image-repeat Inh. N Anim. N
      36. border-image-slice Inh. N Anim. P
      37. border-image-source Inh. N Anim. N
      38. border-image-width Inh. N Anim. Y
      39. border-left Inh. N Anim. P
      40. border-left-color Inh. N Anim. Y
      41. border-left-style Inh. N Anim. N
      42. border-left-width Inh. N Anim. Y
      43. border-radius Inh. N Anim. Y
      44. border-right Inh. N Anim. P
      45. border-right-color Inh. N Anim. Y
      46. border-right-style Inh. N Anim. N
      47. border-right-width Inh. N Anim. Y
      48. border-spacing Inh. Y Anim. Y
      49. border-style Inh. N Anim. N
      50. border-top Inh. N Anim. P
      51. border-top-color Inh. N Anim. Y
      52. border-top-left-radius Inh. N Anim. Y
      53. border-top-right-radius Inh. N Anim. Y
      54. border-top-style Inh. N Anim. N
      55. border-top-width Inh. N Anim. Y
      56. border-width Inh. N Anim. Y
      57. bottom Inh. N Anim. P
      58. box-decoration-break Inh. N Anim. N
      59. box-shadow Inh. N Anim. Y
      60. box-sizing Inh. N Anim. N
      61. caption-side Inh. Y Anim. N
      62. clear Inh. N Anim. N
      63. clip-path Inh. N Anim. P
      64. clip-rule Inh. N Anim. N
      65. color Inh. Y Anim. Y
      66. content Inh. N Anim. N
      67. counter-increment Inh. N Anim. N
      68. counter-reset Inh. N Anim. N
      69. cursor Inh. Y Anim. N
      70. direction Inh. Y Anim. Y
      71. display Inh. N Anim. N
      72. empty-cells Inh. Y Anim. N
      73. filter Inh. N Anim. Y
      74. flex Inh. N Anim. P
      75. flex-basis Inh. N Anim. P
      76. flex-direction Inh. N Anim. N
      77. flex-flow Inh. N Anim. N
      78. flex-grow Inh. N Anim. Y
      79. flex-shrink Inh. N Anim. Y
      80. flex-wrap Inh. N Anim. N
      81. float Inh. N Anim. N
      82. font Inh. Y Anim. P
      83. font-family Inh. Y Anim. N
      84. font-feature-settings Inh. Y Anim. N
      85. font-kerning Inh. Y Anim. N
      86. font-size Inh. Y Anim. P
      87. font-size-adjust Inh. Y Anim. Y
      88. font-stretch Inh. Y Anim. N
      89. font-style Inh. Y Anim. N
      90. font-synthesis Inh. Y Anim. N
      91. font-variant Inh. Y Anim. N
      92. font-weight Inh. Y Anim. N
      93. grid Inh. N Anim. N
      94. grid-area Inh. N Anim. N
      95. grid-auto-columns Inh. N Anim. N
      96. grid-auto-flow Inh. N Anim. N
      97. grid-auto-rows Inh. N Anim. N
      98. grid-column Inh. N Anim. N
      99. grid-column-end Inh. N Anim. N
      100. grid-column-gap Inh. N Anim. Y
      101. grid-column-start Inh. N Anim. N
      102. grid-gap Inh. N Anim. Y
      103. grid-row Inh. N Anim. N
      104. grid-row-end Inh. N Anim. N
      105. grid-row-gap Inh. N Anim. Y
      106. grid-row-start Inh. N Anim. N
      107. grid-template-areas Inh. N Anim. N
      108. grid-template-columns Inh. N Anim. N
      109. grid-template-rows Inh. N Anim. N
      110. height Inh. N Anim. Y
      111. hyphens Inh. Y Anim. N
      112. isolation Inh. N Anim. N
      113. justify-content Inh. N Anim. N
      114. left Inh. N Anim. P
      115. letter-spacing Inh. Y Anim. Y
      116. line-break Inh. Y Anim. Y
      117. line-height Inh. Y Anim. Y
      118. list-style Inh. Y Anim. N
      119. list-style-image Inh. Y Anim. N
      120. list-style-position Inh. Y Anim. N
      121. list-style-type Inh. Y Anim. N
      122. margin Inh. N Anim. Y
      123. margin-bottom Inh. N Anim. Y
      124. margin-left Inh. N Anim. Y
      125. margin-right Inh. N Anim. Y
      126. margin-top Inh. N Anim. Y
      127. mask Inh. N Anim. P
      128. mask-clip Inh. N Anim. N
      129. mask-composite Inh. N Anim. N
      130. mask-image Inh. N Anim. N
      131. mask-mode Inh. N Anim. N
      132. mask-origin Inh. N Anim. N
      133. mask-position Inh. N Anim. P
      134. mask-repeat Inh. N Anim. Y
      135. mask-size Inh. N Anim. P
      136. mask-type Inh. N Anim. N
      137. max-height Inh. N Anim. P
      138. max-width Inh. N Anim. P
      139. min-height Inh. N Anim. Y
      140. min-width Inh. N Anim. Y
      141. mix-blend-mode Inh. N Anim. N
      142. object-fit Inh. N Anim. N
      143. object-position Inh. N Anim. Y
      144. opacity Inh. N Anim. Y
      145. order Inh. N Anim. Y
      146. orphans Inh. N Anim. Y
      147. outline Inh. N Anim. P
      148. outline-color Inh. N Anim. Y
      149. outline-offset Inh. N Anim. N
      150. outline-style Inh. N Anim. N
      151. outline-width Inh. N Anim. Y
      152. overflow Inh. N Anim. N
      153. overflow-wrap Inh. Y Anim. Y
      154. overflow-x Inh. N Anim. N
      155. overflow-y Inh. N Anim. N
      156. padding Inh. N Anim. Y
      157. padding-bottom Inh. N Anim. Y
      158. padding-left Inh. N Anim. Y
      159. padding-right Inh. N Anim. Y
      160. padding-top Inh. N Anim. Y
      161. page Inh. N Anim. N
      162. page-break-after Inh. N Anim. N
      163. page-break-before Inh. N Anim. N
      164. page-break-inside Inh. Y Anim. N
      165. perspective Inh. N Anim. Y
      166. perspective-origin Inh. N Anim. P
      167. position Inh. N Anim. N
      168. quotes Inh. Y Anim. N
      169. resize Inh. N Anim. N
      170. right Inh. N Anim. P
      171. shape-image-threshold Inh. N Anim. Y
      172. shape-margin Inh. N Anim. Y
      173. shape-outside Inh. N Anim. P
      174. size Inh. N Anim. N
      175. tab-size Inh. Y Anim. Y
      176. table-layout Inh. Y Anim. N
      177. text-align Inh. Y Anim. N
      178. text-align-last Inh. Y Anim. N
      179. text-decoration Inh. N Anim. N
      180. text-indent Inh. Y Anim. Y
      181. text-orientation Inh. Y Anim. Y
      182. text-rendering Inh. Y Anim. Y
      183. text-shadow Inh. N Anim. Y
      184. text-transform Inh. Y Anim. N
      185. top Inh. N Anim. P
      186. transform Inh. N Anim. P
      187. transform-origin Inh. N Anim. P
      188. transform-style Inh. N Anim. N
      189. transition Inh. N Anim. N
      190. transition-delay Inh. N Anim. N
      191. transition-duration Inh. N Anim. N
      192. transition-property Inh. N Anim. N
      193. transition-timing-function Inh. N Anim. N
      194. unicode-bidi Inh. N Anim. Y
      195. vertical-align Inh. N Anim. P
      196. visibility Inh. Y Anim. N
      197. white-space Inh. N Anim. N
      198. widows Inh. N Anim. Y
      199. width Inh. N Anim. Y
      200. word-break Inh. Y Anim. Y
      201. word-spacing Inh. Y Anim. Y
      202. writing-mode Inh. Y Anim. Y
      203. z-index Inh. N Anim. Y
  6. Index