CSS Fundamentals
Selectors, the cascade, the box model, colours, units, typography and the core properties.
This is an overview — pick a sub-topic below.
Sub-topics (27)
CSS Selectors
Patterns that choose which elements a rule styles: type (`p`), class (`.card`), id (`#main`), universal (`*`), groups (`h1, h2`).
Specificity
When rules conflict, the more specific selector wins: inline > id > class/attribute/pseudo-class > type.
The Cascade
How browsers resolve conflicting declarations: origin and importance → cascade layers → specificity → source order.
CSS Inheritance
Some properties (color, font, line-height) pass from parent to children; others (margin, border) don't.
Box Model
Every element is a box: content + padding + border + margin.
Display
Controls how a box behaves: `block`, `inline`, `inline-block`, `flex`, `grid`, `none`, `contents`.
Positioning
`static` (default), `relative`, `absolute`, `fixed` and `sticky` with `top`/`right`/`bottom`/`left`.
Margins
Space outside the border. Vertical margins between blocks collapse into the larger one.
Padding
Space inside the border, around the content; takes the element's background.
Borders
Lines around the padding box: width, style and colour, plus `border-radius` for rounded corners.
CSS Colors
Named colours, hex, `rgb()`, `hsl()` and modern `oklch()` with optional alpha.
CSS Units
Absolute (`px`) and relative units: `em` (parent font size), `rem` (root font size), `%`, `vw`/`vh`, `ch`, `fr`.
Typography
Font size, line height, weight, letter spacing and measure (line length) make text readable.
Fonts
Load and use font families with fallbacks.
Backgrounds
`background-color`, `background-image`, `size`, `position`, `repeat` and multiple layers.
Gradients
Smooth colour transitions: `linear-gradient`, `radial-gradient`, `conic-gradient`.
Shadows
`box-shadow` for elements and `text-shadow` for text — depth and emphasis.
Overflow
What happens when content is bigger than its box: `visible`, `hidden`, `scroll`, `auto`, `clip`.
Visibility
`visibility: hidden` hides an element but keeps its space; `display: none` removes it; `opacity: 0` keeps it interactive.
Z-Index
Controls stacking order of positioned elements within a stacking context.
Pseudo-Classes
Select elements by state or position: `:hover`, `:focus-visible`, `:checked`, `:disabled`, `:first-child`, `:nth-child(2n)`, `:not()`, `:is()`, `:has()`.
Pseudo-Elements
Style parts of an element: `::before`, `::after`, `::first-line`, `::placeholder`, `::selection`, `::marker`.
Attribute Selectors
Match elements by attributes: `[disabled]`, `[type="email"]`, `[href^="https"]`, `[href$=".pdf"]`, `[class*="icon"]`.
Combinators
Relationships between selectors: descendant (space), child (`>`), next sibling (`+`), subsequent siblings (`~`).
Custom Properties (CSS Variables)
Reusable values defined with `--name` and read with `var()`; they cascade and can change at run time.
CSS Functions
Built-in functions: `calc()`, `min()`, `max()`, `clamp()`, `var()`, `color-mix()`, `url()`, transforms and gradients.
At-Rules
Instructions starting with `@`: `@media`, `@container`, `@supports`, `@font-face`, `@keyframes`, `@import`, `@layer`, `@property`.
Spotted a mistake or want to add detail? Suggest an improvement — Content Contributors' edits are reviewed by editors before they go live.
Discussion (0)
Sign in or join free to ask questions and discuss this topic.