The snippet library.
Small, practical examples. Search by task or narrow things down below.
Set a readable font size
CSS: Learn how to set a readable font size in a complete browser example.
CSS✓ Tested
Set an explicit font weight
CSS: Numeric font weights express typographic emphasis independently of a specific font family.
CSS✓ Tested
Set explicit grid row heights
CSS: Grid-template-rows controls each declared row’s block-axis track size.
CSS✓ Tested
Set readable line spacing
Use a unitless CSS line-height that scales with the font size.
CSS✓ Tested
Set space between text lines
CSS: Learn how to set space between text lines in a complete browser example.
CSS✓ Tested
Show a pressed pointer state
CSS: Active applies during the pointer press rather than after the click has finished.
CSS✓ Tested
Show keyboard focus
Use a visible CSS outline when an input receives keyboard focus.
CSS✓ Tested
Size a child relative to its containing block
CSS: A percentage width is based on the containing block’s available width.
CSS✓ Tested
Size a panel relative to viewport height
CSS: Viewport height units track the browser viewport rather than the parent element.
CSS✓ Tested
Space items with gap
Use CSS gap instead of margins between flex children.
CSS✓ Tested
Span a grid item across multiple columns
CSS: Grid-column span counts tracks and includes the gaps between them.
CSS✓ Tested
Specify a flex item’s initial main size
CSS: Flex-basis establishes the starting main-axis size before growth or shrinkage.
CSS✓ Tested