WEB-CSS-001
Style rules
A style rule connects a selector to declarations. A declaration needs a property, a colon and a valid value.
Build with DEX · 49 reference entries
CSS reference
Shape readable layouts with selectors, spacing, flexbox, grid, responsive type and accessible interaction states.
Start with the content and the available space. These examples cover practical CSS rules without importing legacy browser hacks or resetting useful accessibility defaults.
Entry index
Choose an entry or use Find on page to look for a term. Each number identifies an educational reference; production checks need their own recorded result.
- Style rules
- Classes and IDs
- Combinators
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Visible keyboard focus
- Cascade and inheritance
- Selector specificity
- Cascade layers
- Custom properties
- Shorthand resets
- Border-box sizing
- Display and normal flow
- Spacing and logical properties
- Borders and corners
- Backgrounds and gradients
- Colour values and opacity
- Text contrast
- Outlines and shadows
- Flexible rows
- Flexible item sizing
- Grid tracks
- Responsive card grids
- Alignment and gaps
- Source order
- Positioned and sticky elements
- Stacking contexts
- Overflow and long content
- Fluid container widths
- Image fit and aspect ratio
- Font stacks
- Readable line height
- Fluid type
- Wrapping and truncation
- Relative units
- Width media queries
- Container queries
- Dark colour schemes
- Forced-colour modes
- Touch and pointer capabilities
- Reduced motion
- Transitions
- Keyframe animations
- Transforms
- Print styles
- Visibility and interaction
- Modern reset choices
- Feature queries
- Columns for suitable reading content
Rules and selectors
WEB-CSS-002
Classes and IDs
Use classes for reusable styling. An id identifies one element and has higher selector specificity than a class.
Example and documentation
.notice { padding: 1rem; }
#main-content { scroll-margin-top: 5rem; }Documentation: CSS documentation
WEB-CSS-003
Combinators
Use descendant, child or sibling combinators to express the actual element relationship instead of relying on long brittle selector chains.
Example and documentation
.card > h2 { margin-block-start: 0; }
label + input { display: block; }Documentation: CSS documentation
WEB-CSS-004
Attribute selectors
Target a meaningful attribute or value when it describes the state you want to style.
Example and documentation
input[type="email"] { max-inline-size: 30rem; }
[aria-invalid="true"] { border-color: #a50020; }Documentation: CSS documentation
WEB-CSS-005
Pseudo-classes and pseudo-elements
A pseudo-class selects a state or relationship. A pseudo-element styles a particular part; generated decoration should not carry essential instructions.
Example and documentation
a:hover { text-decoration-thickness: 2px; }
p::first-letter { font-weight: 700; }Documentation: CSS documentation
WEB-CSS-006
Visible keyboard focus
Keep a visible focus indicator on links and controls. Focus-visible lets the browser decide when a focus ring is particularly useful.
Example and documentation
button:focus-visible, a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }Documentation: CSS documentation
WEB-CSS-007
Cascade and inheritance
The cascade resolves competing declarations; inheritance passes selected properties from a parent. Inspect computed styles when a result is unexpected.
Example and documentation
body { color: #222; font-family: system-ui, sans-serif; }
button { font: inherit; }Documentation: CSS documentation
WEB-CSS-008
Selector specificity
Keep selectors modest so later changes remain predictable. Where is useful when a grouping should add no specificity of its own.
Example and documentation
:where(article, aside) a { text-underline-offset: .2em; }Documentation: CSS documentation
WEB-CSS-009
Cascade layers
Use named layers to define an intentional order between groups of rules. Unlayered normal declarations still take precedence over normal layered rules.
Example and documentation
@layer reset, base, components;
@layer components { .card { padding: 1rem; } }Documentation: CSS documentation
WEB-CSS-010
Custom properties
Store reusable design values in custom properties. A fallback handles a missing value at the point of use.
Example and documentation
:root { --space: 1rem; --accent: #9b1234; }
.card { padding: var(--space, 1rem); }Documentation: CSS documentation
WEB-CSS-011
Shorthand resets
A shorthand can reset related longhand values that you did not write. Check the computed result before replacing a carefully configured property group.
Example and documentation
.panel { background-color: #fff; background-image: none; }Documentation: CSS documentation
Box and flow
WEB-CSS-012
Border-box sizing
Border-box includes padding and borders inside the declared width, which helps prevent unexpected overflow.
Example and documentation
*, *::before, *::after { box-sizing: border-box; }Documentation: CSS documentation
WEB-CSS-013
Display and normal flow
Understand normal flow before adding positioning. A block fills its available inline space; inline content flows with text.
Example and documentation
.badge { display: inline-block; }
.stack { display: block; }Documentation: CSS documentation
WEB-CSS-014
Spacing and logical properties
Use logical spacing when the layout should follow the document's writing direction. Gap belongs to a layout container; margin belongs to an item.
Example and documentation
.card { padding-block: 1rem; padding-inline: 1.25rem; }
.card + .card { margin-block-start: 1rem; }Documentation: CSS documentation
WEB-CSS-015
Borders and corners
Use a border to separate regions without relying only on a shadow. Match corner radius to the site's existing visual system.
Example and documentation
.card { border: 1px solid #767676; border-radius: .75rem; }Documentation: CSS documentation
WEB-CSS-016
Backgrounds and gradients
Backgrounds are decorative. Put meaningful images in HTML so they can have appropriate text alternatives.
Example and documentation
.banner { background: linear-gradient(135deg, #fff4f6, #ffffff); }Documentation: CSS documentation
WEB-CSS-017
Colour values and opacity
Choose readable foreground and background pairs. Opacity affects the entire element and its descendants; an alpha colour affects that colour alone.
Example and documentation
.notice { color: #222; background-color: rgb(255 240 244 / .9); }Documentation: CSS documentation
WEB-CSS-018
Text contrast
Check the actual foreground and background combination, including hover and disabled designs. WCAG AA generally needs 4.5:1 for ordinary text.
Example and documentation
/* Verify this pair with a contrast checker. */
.copy { color: #222; background: #fff; }Documentation: CSS documentation
WEB-CSS-019
Outlines and shadows
An outline can mark focus without changing layout dimensions. A shadow provides visual depth but should not be the only state indicator.
Example and documentation
.control:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.card { box-shadow: 0 2px 8px rgb(0 0 0 / .08); }Documentation: CSS documentation
Layout
WEB-CSS-020
Flexible rows
Flexbox arranges items along one main axis. Allow wrapping when a row of controls must fit a smaller screen.
Example and documentation
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }Documentation: CSS documentation
WEB-CSS-021
Flexible item sizing
Use flex-basis, grow and shrink deliberately. A flexible text region often needs min-inline-size zero to shrink beside another item.
Example and documentation
.summary { flex: 1 1 18rem; min-inline-size: 0; }
.icon { flex: 0 0 auto; }Documentation: CSS documentation
WEB-CSS-022
Grid tracks
Grid controls rows and columns. Use minmax with a zero minimum when long content must not force a fractional track wider.
Example and documentation
.layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem; }Documentation: CSS documentation
WEB-CSS-023
Responsive card grids
Let available width determine the number of columns while keeping each card within the container.
Example and documentation
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }Documentation: CSS documentation
WEB-CSS-024
Alignment and gaps
Use justify-content along the relevant main axis and align-items on the cross axis. Their visual direction depends on the layout mode.
Example and documentation
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }Documentation: CSS documentation
WEB-CSS-025
Source order
Keep the reading and keyboard order meaningful in HTML. Visual reordering with order or grid placement does not rewrite the document's logical order.
Example and documentation
/* Put items in their intended reading order in HTML. */
.steps { display: flex; flex-direction: column; }Documentation: CSS documentation
WEB-CSS-026
Positioned and sticky elements
Sticky positioning needs an inset and is affected by scrolling ancestors. Test that a sticky region leaves enough space for the page content.
Example and documentation
.section-nav { position: sticky; inset-block-start: 0; }Documentation: CSS documentation
WEB-CSS-027
Stacking contexts
A larger z-index only competes within its stacking context. Inspect ancestors with transforms, opacity or positioning before raising a number.
WEB-CSS-028
Overflow and long content
Keep long values and code samples inside their component. Allow scrolling where preserving formatting is necessary.
Example and documentation
pre { max-inline-size: 100%; overflow-x: auto; }
.long-url { overflow-wrap: anywhere; }Documentation: CSS documentation
WEB-CSS-029
Fluid container widths
Combine a readable maximum width with flexible outer space. Avoid a fixed page width that exceeds a narrow viewport.
Example and documentation
.content { inline-size: min(70rem, calc(100% - 2rem)); margin-inline: auto; }Documentation: CSS documentation
WEB-CSS-030
Image fit and aspect ratio
Reserve a media region with aspect-ratio. Contain preserves the whole image; cover fills the box and can crop it.
Example and documentation
.product-image { aspect-ratio: 4 / 3; inline-size: 100%; object-fit: contain; }Documentation: CSS documentation
Type and responsiveness
WEB-CSS-031
Font stacks
Provide a sensible fallback stack. Use font inheritance for controls so forms remain visually consistent with the surrounding text.
Example and documentation
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
input, button { font: inherit; }Documentation: CSS documentation
WEB-CSS-032
Readable line height
Use a unitless line-height so it scales with text. Keep long paragraphs within a comfortable measure.
Example and documentation
article { max-inline-size: 70ch; line-height: 1.6; }Documentation: CSS documentation
WEB-CSS-033
Fluid type
Clamp sets a minimum, a preferred fluid value and a maximum. Check browser zoom and text enlargement after choosing the range.
Example and documentation
h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); }Documentation: CSS documentation
WEB-CSS-034
Wrapping and truncation
Allow descriptions and translated labels to wrap. Use truncation only when the full content remains available through another clear route.
Example and documentation
.description { white-space: normal; overflow-wrap: anywhere; }Documentation: CSS documentation
WEB-CSS-035
Relative units
Rem follows the root font size; em follows the relevant font-size context. Viewport units track the viewport, so test mobile browser controls.
Example and documentation
.panel { padding: 1rem; }
.label { letter-spacing: .02em; }Documentation: CSS documentation
WEB-CSS-036
Width media queries
Choose breakpoints where the content needs a layout change. A CSS number and its unit belong together without a space.
Example and documentation
@media (max-width: 48rem) { .layout { grid-template-columns: 1fr; } }Documentation: CSS documentation
WEB-CSS-037
Container queries
A container query adapts a component to its available container space. Establish containment on the parent before querying its inline size.
Example and documentation
.card-shell { container-type: inline-size; }
@container (min-width: 30rem) { .card-content { display: grid; grid-template-columns: 1fr 1fr; } }Documentation: CSS documentation
WEB-CSS-038
Dark colour schemes
A colour-scheme preference is a starting point for a complete theme. Check borders, controls, images and every text state together.
Example and documentation
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }Documentation: CSS documentation
WEB-CSS-039
Forced-colour modes
Use semantic borders and system colours where needed so controls remain recognisable when a user overrides the palette.
Example and documentation
@media (forced-colors: active) { .card { border: 1px solid CanvasText; } }Documentation: CSS documentation
WEB-CSS-040
Touch and pointer capabilities
Use hover and pointer queries for optional refinements. Keep every essential action usable without hover.
Example and documentation
.button { min-block-size: 2.75rem; }
@media (hover: hover) { .button:hover { text-decoration: underline; } }Documentation: CSS documentation
Motion and output
WEB-CSS-041
Reduced motion
Respect a request for less motion. Target the moving component and retain a useful final state.
Example and documentation
.notice { transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .notice { transition: none; } }Documentation: CSS documentation
WEB-CSS-042
Transitions
Name the properties that should animate instead of transitioning every change. Prefer short feedback that does not delay an action.
Example and documentation
.button { transition: background-color .15s ease, color .15s ease; }Documentation: CSS documentation
WEB-CSS-043
Keyframe animations
Use keyframes for a defined sequence. Provide a reduced-motion treatment and avoid flashing or automatically moving essential reading content.
Example and documentation
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
.notice { animation: reveal .2s ease-out; }Documentation: CSS documentation
WEB-CSS-044
Transforms
Transforms change visual presentation without moving surrounding flow content. Test overlap and hit targets when scaling or translating controls.
Example and documentation
.icon { transform: rotate(90deg); transform-origin: center; }Documentation: CSS documentation
WEB-CSS-045
Print styles
Remove navigation and decorative backgrounds from a printed lesson while keeping its content, links and code readable.
Example and documentation
@media print { nav, .print-hide { display: none; } pre { white-space: pre-wrap; } }Documentation: CSS documentation
WEB-CSS-046
Visibility and interaction
Display none removes a box; visibility hidden keeps its layout space. Opacity zero alone can leave an element interactive.
WEB-CSS-047
Modern reset choices
Reset only the browser defaults the design needs to change. Retain useful list markers, form affordances and focus indicators.
Example and documentation
body { margin: 0; }
img { max-inline-size: 100%; block-size: auto; }
button, input, select, textarea { font: inherit; }Documentation: CSS documentation
WEB-CSS-048
Feature queries
Use supports to enhance a working baseline when a particular CSS feature is available.
Example and documentation
@supports (text-wrap: balance) { h1 { text-wrap: balance; } }Documentation: CSS documentation
WEB-CSS-049
Columns for suitable reading content
Multiple columns can suit short reference material on wide screens. Keep a single-column reading path on small screens.
Example and documentation
.terms { column-width: 20rem; column-gap: 2rem; }
.terms > li { break-inside: avoid; }Documentation: CSS documentation
Continue learning
Reviewed . Send a correction through contact and corrections, including the entry number and supporting documentation.