book

Modern CSS: Master the Key Concepts of CSS for Modern Web Development

Name: Modern CSS: Master the Key Concepts of CSS for Modern Web Development
Author: Joe Attardi
ISBN: 9798868817274

by Joe Attardi

September 2025

Beginner to intermediate

371 pages

5h 55m

English

Apress

Read now

Unlock full access

Modern CSS
Introduction
Acknowledgments
Table of Contents
About the Author
About the Technical Reviewer
1. Introduction to CSS
Anatomy of a CSS RuleRule SyntaxProperty ConflictsCommentsAt-RulesHow CSS Is UsedInline StylesInternal StylesheetsExternal StylesheetsBrowser SupportWeb ResourcesCanIUse.comMDN Web DocsHow CSS Works in the BrowserThe Document Object Model (DOM)The CSS Object Model (CSSOM)The Render TreeLayout and PaintSummary
2. CSS Rules and Selectors
Basic Selector TypesThe Universal SelectorElement SelectorsID SelectorsClass SelectorsAttribute SelectorsCompound SelectorsMultiple Independent SelectorsSelector CombinatorsDescendant CombinatorChild CombinatorSubsequent Sibling CombinatorNext Sibling CombinatorUsing Multiple CombinatorsPseudo-classesInteraction StateDocument StructureNegating a SelectorThe:has Pseudo-classThe:is Pseudo-classPseudo-elementsSpecificitySpecificity RankingsCalculating SpecificityThe Escape Hatch: !importantNesting CSS RulesSummary
3. Basic CSS Concepts
The Box ModelBox SizingBox Sizing with content-boxBox Sizing with border-boxAspect RatioBlock and Inline ElementsBlock ElementsInline ElementsPadding and Margin with Inline ElementsInline-Block ElementsCSS UnitsThe px UnitThe em UnitThe rem UnitViewport Units: vw and vhThe % UnitOther UnitsNo UnitsFunctionsThe calc FunctionThe min and max FunctionsColorsNamed ColorsRGB ColorsSpecifying an Alpha ValueHSL ColorsTransparentNewer Color SyntaxColor SchemesOverflowHandling OverflowUsing overflow: hiddenUsing overflow: scroll and overflow: autoCSS VariablesUsing VariablesUsing Variables with the calc FunctionSummary
4. Basic Styling
Property ValuesGlobal KeywordsShorthand and Multiple ValuesBordersSetting the Border ColorSetting the Border WidthSetting the Border StyleSetting All Properties with the ShorthandSpecifying Border CollapseSetting a Border Radius for Rounded CornersBox ShadowsOpacityHiding ElementsUsing display: noneUsing visibility: hiddenSetting opacity to 0OutlineSummary

5. Backgrounds and Gradients
Solid Background ColorsBackground ImagesApplying a Background Image with the background-image PropertyRepeating a Background with the background-repeat PropertyMoving the Background Image with the background-position PropertyCustomizing the Size with the background-size PropertyThe background-clip PropertyUsing the Shorthand background PropertyCustomizing Scroll Behavior with the background-attachment PropertyBackground GradientsLinear GradientsAdding Color StopsUsing TransparencyChanging the Gradient DirectionCustomizing Color StopsRadial GradientsCustomizing the Shape and PositionCustomizing the SizeCustomizing Color StopsMultiple GradientsConic GradientsCustomizing the AngleCustomizing Color StopsCombining BackgroundsSummary
6. Text Styling
Basic Text Stylingfont-familyFont SizeText ColorFont WeightFont StyleUnderlining with text-decorationOther Text EffectsTransforming to UppercaseLetter SpacingFont VariantText LayoutText IndentWhitespaceTruncating TextHorizontal AlignmentVertical AlignmentUsing Web FontsRegistering a Font with the @font-face RuleDeclaring Different Web Font StylesA Word of Caution on Web FontsText ShadowApplying a Gradient to TextSummary
7. Layout and Positioning
PaddingMarginCentering an Element with margin: autoMargin CollapsePositioning ElementsStatic PositioningRelative PositioningAbsolute PositioningFixed PositioningSticky PositioningZ-index and Stacking ContextsStacking ContextsFloatsClearing FloatsWidth and HeightIntrinsic vs. Extrinsic SizeThe min-content and max-content KeywordsUsing Multiple ColumnsSummary
8. Transforms
The X-, Y-, and Z-axesPerspectiveRotateRotation AxisRotation OriginRotating Around the Z-axisRotating Around the X-axisRotating Around the Y-axisRotating in Three DimensionsTranslateTranslating Along the Z-axisTranslating in an Arbitrary Direction with translate3dTranslating with the translate CSS PropertyScaleScaling with the scale CSS PropertySkewApplying Multiple TransformsPutting It All Together: Making a CubeSummary
9. Transitions and Animations
TransitionsTransition Time UnitsAnimating an Element’s Initial State with @starting-styleEasing FunctionsAnimationsBasic Animation PropertiesDelaying the Start of the AnimationThe Animation Fill ModeRunning an Animation Multiple TimesRunning an Animation BackwardPausing and Resuming an AnimationApplying Multiple AnimationsApplying Multiple Animations That Change the Same PropertyPerformance ImplicationsProperty TypesLayout PropertiesPaint PropertiesComposite PropertiesGiving a Hint As to What Properties Will Be AnimatedAvoiding Simultaneous AnimationsConsidering AccessibilityScroll-Driven AnimationsSummary
10. Flexbox
Basic ConceptsCreating a Flex ContainerDirectionAxisA Basic Flexbox LayoutAdding Space Between ItemsSizing of Flex ItemsWrapping Flex ItemsGrowing Flex Items to Fill Available SpaceShrinking Flex Items to Fit the Available SpaceSetting the Initial Size of a Flex ItemAlignment and SpacingThe Writing ModeControlling Spacing on the Main AxisControlling Alignment on the Cross AxisControlling Spacing in the Cross AxisOverriding Container SettingsChanging the Flex Item OrderAccessibility ConsiderationsFlexbox Layout Use CasesAbsolute CenteringA Flexbox-Based Page LayoutSummary
11. CSS Grid
Basic ConceptsGrid ContainerGrid ItemGrid LinesGrid TracksGrid AreasExplicit and Implicit GridsThe fr UnitDefining a Grid LayoutGrid SizingGrid Sizing FunctionsThe repeat FunctionThe minmax FunctionSizing with auto-fillSizing with auto-fitGrid PositioningSpecifying the Row and ColumnSpanning Multiple Rows or ColumnsNamed Grid LinesNamed Grid AreasGrid Alignmentjustify-itemsalign-itemsjustify-contentalign-contentOverriding for Individual Grid ItemsCSS SubgridSummary
12. Responsive Design
The viewport Meta TagMedia QueriesLogical OperatorsRange SyntaxBreakpointsResponsive Layouts with FlexboxResponsive Layouts with CSS GridUsing auto-fitChanging the Grid Layout with a Media QueryFluid TypographyLimiting the Font Size with the clamp FunctionMaking Images ResponsiveComplete Example: Responsive Page LayoutContainer Size QueriesContainer Query UnitsSummary
13. Wrap Up
Limiting the Scope of CSS Rules with @scopeReading an Element’s AttributesScroll SnappingConfiguring Scroll Snap on the ContainerConfiguring Scroll Snap on ChildrenChecking for Feature Support with @supportsApplying Visual Effects with the filter PropertyMixing Colors with color-mixUtility-First CSSFinal Words
Index

Content preview from Modern CSS: Master the Key Concepts of CSS for Modern Web Development

J. AttardiModern CSShttps://doi.org/10.1007/979-8-8688-1727-4_10

10. Flexbox

Joe Attardi¹

The flexible box layout model, more commonly known as flexbox, is a powerful tool for building layouts with CSS. It’s not quite as powerful as CSS Grid, which we’ll look at in Chapter 11, but it can solve many layout problems.

Flexbox is a one-dimensional layout that can position elements either horizontally or vertically. An element using flexbox as its layout is referred to as a flex container, and the elements inside it are flex items.

Basic Concepts

Let’s go over the basic concepts to understand and use flexbox layouts.

Creating a Flex Container ...

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: 9798868817274Purchase Link Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Modern CSS: Master the Key Concepts of CSS for Modern Web Development

by Joe Attardi

10. Flexbox