book

CSS: The Definitive Guide, 5th Edition

by Eric Meyer, Estelle Weyl

May 2023

Intermediate to advanced

1126 pages

30h 2m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Preface
Conventions Used in This BookValue Syntax ConventionsUsing Code ExamplesO’Reilly Online LearningHow to Contact UsAcknowledgmentsEric MeyerEstelle Weyl
1. CSS Fundamentals
A Brief History of (Web) StyleStylesheet ContentsRule StructureVendor PrefixingWhitespace HandlingCSS CommentsMarkupElementsReplaced and Nonreplaced ElementsElement Display RolesBringing CSS and HTML TogetherThe <link> TagThe <style> ElementThe @import DirectiveHTTP LinkingInline StylesSummary
2. Selectors
Basic Style RulesType SelectorsGroupingGrouping SelectorsGrouping DeclarationsGrouping EverythingClass and ID SelectorsClass SelectorsMultiple ClassesID SelectorsDeciding Between Class and IDAttribute SelectorsSimple Attribute SelectorsSelection Based on Exact Attribute ValueSelection Based on Partial Attribute ValuesThe Case-Insensitivity IdentifierUsing Document StructureUnderstanding the Parent-Child RelationshipDefining Descendant SelectorsSelecting ChildrenSelecting Adjacent-Sibling ElementsSelecting Following SiblingsSummary
3. Pseudo-Class and -Element Selectors
Pseudo-Class SelectorsCombining Pseudo-ClassesStructural Pseudo-ClassesLocation Pseudo-ClassesUser Action Pseudo-ClassesUI-State Pseudo-ClassesThe :lang() and :dir() Pseudo-ClassesLogical Pseudo-ClassesThe :has() Pseudo-ClassOther Pseudo-ClassesPseudo-Element SelectorsStyling the First LetterStyling the First LineRestrictions on ::first-letter and ::first-lineThe Placeholder Text Pseudo-ElementThe Form Button Pseudo-ElementGenerating Content Before and After ElementsHighlight Pseudo-ElementsThe Backdrop Pseudo-ElementThe Video-Cue Pseudo-ElementShadow Pseudo-Classes and -ElementsShadow Pseudo-ClassesShadow Pseudo-ElementsSummary
4. Specificity, Inheritance, and the Cascade
SpecificityDeclarations and SpecificityResolving Multiple MatchesZeroed Selector SpecificityID and Attribute Selector SpecificityImportanceInheritanceThe CascadeSorting by Importance and OriginSorting by Element AttachmentSorting by Cascade LayerSorting by SpecificitySorting by OrderWorking with Non-CSS Presentational HintsSummary
5. Values and Units
Keywords, Strings, and Other Text ValuesKeywordsThe all PropertyStringsIdentifiersURLsImagesNumbers and PercentagesIntegersNumbersPercentagesFractionsDistancesAbsolute Length UnitsResolution UnitsRelative Length UnitsRoot-Relative Length UnitsViewport-Relative UnitsFunction ValuesCalculation ValuesMaximum ValuesMinimum ValuesClamping ValuesAttribute ValuesColorNamed ColorsColor KeywordsColors by RGB and RGBaHSL and HSLa ColorsColors with HWBLab ColorsLCH ColorsOklab and OklchUsing color()Applying ColorAffecting Form ElementsInheriting ColorAnglesTime and FrequencyRatiosPositionCustom PropertiesCustom Property FallbacksSummary
6. Basic Visual Formatting
Basic BoxesA Quick PrimerThe Containing BlockAltering Element DisplayChanging RolesHandling Block BoxesLogical Element SizingContent-Based Sizing ValuesMinimum and Maximum Logical SizingHeight and WidthAltering Box SizingBlock-Axis PropertiesAuto Block SizingPercentage HeightsHandling Content OverflowNegative Margins and CollapsingCollapsing Block-Axis MarginsInline-Axis FormattingInline-Axis PropertiesUsing autoNegative MarginsPercentagesReplaced ElementsList ItemsBox Sizing with Aspect RatiosInline FormattingLine LayoutBasic Terms and ConceptsLine HeightsInline Nonreplaced ElementsBuilding the BoxesSetting Vertical AlignmentManaging the Line HeightAdding Box Properties to Nonreplaced ElementsChanging Breaking BehaviorGlyphs Versus Content AreaInline Replaced ElementsAdding Box Properties to Replaced ElementsReplaced Elements and the BaselineInline-Block ElementsFlow DisplayContent DisplayOther Display ValuesElement VisibilityAnimating VisibilitySummary
7. Padding, Borders, Outlines, and Margins
Basic Element BoxesPaddingReplicating ValuesSingle-Side PaddingLogical PaddingPercentage Values and PaddingPadding and Inline ElementsPadding and Replaced ElementsBordersBorders with StyleBorder WidthsBorder ColorsSingle-Side Shorthand Border PropertiesGlobal BordersBorders and Inline ElementsRounding Border CornersImage BordersOutlinesOutline StylesOutline WidthOutline ColorHow They Are DifferentMarginsLength Values and MarginsPercentages and MarginsSingle-Side Margin PropertiesMargin CollapsingNegative MarginsMargins and Inline ElementsSummary
8. Backgrounds
Setting Background ColorsExplicitly Setting a Transparent BackgroundBackground and Color CombinationsClipping the BackgroundWorking with Background ImagesUsing an ImageUnderstanding Why Backgrounds Aren’t InheritedFollowing Good Background PracticesPositioning Background ImagesBackground Repeating (or Lack Thereof)Getting AttachedSizing Background ImagesBringing It All TogetherWorking with Multiple BackgroundsUsing the Background ShorthandCreating Box ShadowsSummary
9. Gradients
Linear GradientsSetting Gradient ColorsPositioning Color StopsSetting Color HintsUnderstanding Gradient Lines: The Gory DetailsRepeating Linear GradientsRadial GradientsSetting Shape and SizePositioning Radial GradientsUsing Radial Color Stops and the Gradient RayHandling Degenerate CasesRepeating Radial GradientsConic GradientsCreating Conic Color StopsRepeating Conic GradientsManipulating Gradient ImagesCreating Special EffectsTriggering Average Gradient ColorsSummary

10. Floating and Positioning
FloatingFloated ElementsFloating: The DetailsApplied BehaviorFloats, Content, and OverlappingClearingPositioningTypes of PositioningThe Containing BlockOffset PropertiesInset ShorthandsSetting Width and HeightLimiting Width and HeightAbsolute PositioningContaining Blocks and Absolutely Positioned ElementsPlacement and Sizing of Absolutely Positioned ElementsAuto-edgesPlacing and Sizing Nonreplaced ElementsPlacing and Sizing Replaced ElementsPlacement on the Z-AxisFixed PositioningRelative PositioningSticky PositioningSummary
11. Flexible Box Layout
Flexbox FundamentalsA Simple ExampleFlex ContainersUsing the flex-direction PropertyWorking with Other Writing DirectionsWrapping Flex LinesDefining Flexible FlowsUnderstanding AxesArrangement of Flex ItemsFlex Item AlignmentJustifying ContentAligning ItemsAligning Flex LinesUsing the place-content PropertyOpening Gaps Between Flex ItemsFlex ItemsWhat Are Flex Items?Flex Item FeaturesAbsolute PositioningMinimum WidthsFlex-Item-Specific PropertiesThe flex PropertyThe flex-grow PropertyGrowth Factors and the flex PropertyThe flex-shrink PropertyThe flex-basis PropertyThe flex ShorthandThe order PropertyTabbed Navigation RevisitedSummary
12. Grid Layout
Creating a Grid ContainerUnderstanding Basic Grid TerminologyCreating Grid LinesUsing Fixed-Width Grid TracksUsing Flexible Grid TracksFitting Track ContentsRepeating Grid TracksDefining Grid AreasPlacing Elements in the GridUsing Column and Row LinesUsing Row and Column ShorthandsWorking with Implicit GridHandling ErrorsUsing AreasUnderstanding Grid-Item OverlapSpecifying Grid FlowDefining Automatic Grid TracksUsing the grid ShorthandUsing SubgridsDefining Explicit TracksDealing with OffsetsNaming Subgridded LinesGiving Subgrids Their Own GapsGrid Items and the Box ModelSetting Alignment in GridsAligning and Justifying Individual ItemsAligning and Justifying All ItemsDistributing Grid Items and TracksLayering and OrderingSummary
13. Table Layout in CSS
Table FormattingVisually Arranging a TableTable Arrangement RulesSetting Table Display ValuesInserting Anonymous Table ObjectsWorking with Table LayersUsing CaptionsTable Cell BordersSeparated Cell BordersCollapsed Cell BordersTable SizingWidthHeightAlignmentSummary
14. Fonts
Font FamiliesUsing Generic Font FamiliesUsing Quotation MarksUsing Custom FontsUsing Font-Face DescriptorsRestricting Character RangeWorking with Font DisplayCombining DescriptorsFont WeightsHow Weights WorkThe font-weight DescriptorFont SizeUsing Absolute SizesUsing Relative SizesSetting Sizes as PercentagesAutomatically Adjusting SizeFont StyleThe font-style DescriptorFont StretchingThe font-stretch DescriptorFont SynthesisFont VariantsCapital Font VariantsNumeric Font VariantsLigature VariantsAlternate VariantsEast Asian Font VariantsFont Variant PositionFont Feature SettingsThe font-feature-settings DescriptorFont Variation SettingsFont Optical SizingOverride DescriptorsFont KerningThe font PropertyUnderstanding font Property LimitationsAdding the Line HeightUsing the Shorthand ProperlyUsing System FontsFont MatchingSummary
15. Text Properties
Indentation and Inline AlignmentIndenting TextAligning TextAligning the Last LineWord SpacingLetter SpacingSpacing and AlignmentVertical AlignmentAdjusting the Height of LinesVertically Aligning TextText TransformationText DecorationSetting Text Decoration Line PlacementSetting Text Decoration ColorSetting Text Decoration ThicknessSetting Text Decoration StyleUsing the Text Decoration Shorthand PropertyOffsetting UnderlinesSkipping InkUnderstanding Weird DecorationsText RenderingText ShadowsText EmphasisSetting Emphasis StyleChanging Emphasis ColorPlacing Emphasis MarksUsing the text-emphasis ShorthandSetting Text Drawing OrderWhitespaceSetting Tab SizesWrapping and HyphenationHyphenationWord BreakingLine BreakingWrapping TextWriting ModesSetting Writing ModesChanging Text OrientationCombining CharactersDeclaring DirectionSummary
16. Lists and Generated Content
Working with ListsTypes of ListsList-Item ImagesList-Marker PositionsList Styles in ShorthandList LayoutThe ::marker Pseudo-ElementCreating Generated ContentInserting Generated ContentSpecifying ContentDefining CountersDefining Counting PatternsFixed Counting PatternsCyclic Counting PatternsSymbolic Counting PatternsAlphabetic Counting PatternsNumeric Counting PatternsAdditive Counting PatternsExtending Counting PatternsSpeaking Counting PatternsSummary
17. Transforms
Coordinate SystemsTransformingThe Transform FunctionsTranslationScalingElement RotationIndividual Transform Property OrderSkewingMatrix FunctionsSetting Element PerspectiveMore Transform PropertiesMoving the Transform’s OriginChoosing the Transform’s BoxChoosing a 3D StyleChanging PerspectiveDealing with BackfacesSummary
18. Transitions
CSS TransitionsTransition PropertiesLimiting Transition Effects by PropertySetting Transition DurationAltering the Internal Timing of TransitionsDelaying TransitionsUsing the transition ShorthandReversing Interrupted TransitionsAnimatable Properties and ValuesHow Property Values Are InterpolatedInterpolating Repeating ValuesPrinting TransitionsSummary
19. Animation
Accommodating Seizure and Vestibular DisordersDefining KeyframesSetting Up Keyframe AnimationsDefining Keyframe SelectorsOmitting from and to ValuesRepeating Keyframe PropertiesAnimatable PropertiesUsing Nonanimatable Properties That Aren’t IgnoredScripting @keyframes AnimationsAnimating ElementsInvoking a Named AnimationDefining Animation LengthsDeclaring Animation IterationsSetting an Animation DirectionDelaying AnimationsExploring Animation EventsChanging the Internal Timing of AnimationsSetting the Animation Play StateAnimation Fill ModesBringing It All TogetherAnimation, Specificity, and Precedence OrderSpecificity and !importantAnimation Iteration and display: none;Animation and the UI ThreadUsing the will-change PropertyPrinting AnimationsSummary
20. Filters, Blending, Clipping, and Masking
CSS FiltersBasic FiltersColor FilteringBrightness, Contrast, and SaturationSVG FiltersCompositing and BlendingBlending ElementsBlending BackgroundsBlending in IsolationContaining ElementsFloat ShapesShaping with Image TransparencyUsing Inset ShapesAdding a Shape MarginClipping and MaskingClippingClip ShapesClip BoxesClipping with SVG PathsMasksDefining a MaskChanging the Mask’s ModeSizing and Repeating MasksPositioning MasksClipping and Compositing MasksBringing It All TogetherSetting Mask TypesBorder-Image MaskingObject Fitting and PositioningSummary
21. CSS At-Rules
Media QueriesBasic Media QueriesComplex Media QueriesSpecial Value TypesKeyword Media FeaturesForced Colors, Contrast, and Display ModeRanged Media FeaturesDeprecated Media FeaturesResponsive StylingPaged MediaPrint StylesDifferences Between Screen and PrintPage SizePage Margins and PaddingNamed Page TypesPage BreakingOrphans and WidowsPage-Breaking BehaviorRepeated ElementsElements Outside the PageContainer QueriesDefining Container TypesDefining Container NamesUsing Container ShorthandUsing Container At-RulesDefining Container Query FeaturesSetting Container Length UnitsFeature Queries (@supports)Other At-RulesDefining a Character Set for a StylesheetDefining a Namespace for SelectorsSummary
A. Additional Resources
Index
About the Authors

Content preview from CSS: The Definitive Guide, 5th Edition

About the Authors

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 joined Igalia in 2021 as a developer advocate and standards evangelist, a role he originally performed for Netscape Communications in 2001.

Beginning in early 1994, Eric was the visual designer and campus web coordinator for the Case Western Reserve University website, 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.

He is the author of Design for Real Life (A Book Apart), Eric Meyer on CSS and More Eric Meyer on CSS (New Riders), CSS: The Definitive Guide, 4e (O’Reilly), and CSS2.0 Programmer’s Reference (Osborne/McGraw-Hill), as well as numerous articles for A List Apart, Net Magazine, Netscape DevEdge, UX Booth, UX Matters, the O’Reilly Network, Web Techniques, and Web Review. Eric also created the classic CSS Browser Compatibility Charts (a.k.a. “The Mastergrid”) and coordinated the authoring and creation of the W3C’s first official CSS Test Suite.

He has conducted customized training for a wide variety of organizations through his independent consulting, and has delivered keynotes and technical talks at numerous conferences around the world. In 2006, ...

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: 9781098117603Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

CSS: The Definitive Guide, 5th Edition

by Eric Meyer, Estelle Weyl

About the Authors

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.