Results for “style”
Small, practical examples. Search by task or narrow things down below.
Make an inline element a block
CSS: Learn how to make an inline element a block in a complete browser example.
CSS✓ Tested
Make keyboard focus visible
CSS: Learn how to make keyboard focus visible in a complete browser example.
CSS✓ Tested
Move a box visually without changing its layout slot
CSS: Transforms change the painted geometry while leaving surrounding normal-flow layout unchanged.
CSS✓ Tested
Override cross-axis alignment for one item
CSS: Align-self changes one item without changing its siblings’ alignment.
CSS✓ Tested
Paint a gradient without an image file
CSS: Linear-gradient generates a CSS background image from color stops.
CSS✓ Tested
Place fixed-size boxes on the same line
CSS: Inline-block allows dimensions while participating in inline layout.
CSS✓ Tested
Position a badge relative to its container
CSS: A positioned ancestor establishes the containing block for an absolutely positioned child.
CSS✓ Tested
Position an item from the writing direction’s start edge
CSS: Logical insets follow direction, so inline-start is the right side in this RTL container.
CSS✓ Tested
Preserve an aspect ratio
Reserve a 16:9 CSS box without a fixed height.
CSS✓ Tested
Preserve line breaks while collapsing repeated spaces
CSS: Pre-line retains newlines but does not preserve all whitespace like pre-wrap does.
CSS✓ Tested
Preserve whitespace while wrapping
Use CSS pre-wrap for multiline text that retains spaces.
CSS✓ Tested
Prevent an item from shrinking
CSS: Flex-shrink zero preserves a required size even when the container overflows.
CSS✓ Tested