Complete CSS Guide — 2025 Edition

1 · What Is CSS & How Does It Work?

Cascading Style Sheets (CSS) define how HTML content is presented—layout, colour, motion, and even accessibility traits. Browsers apply the cascade algorithm to resolve conflicts and compute the final computed style for every element.

Including CSS

Inline – <h1 style="color:orange">
Internal <style> – in the document <head>
External – <link rel="stylesheet" href="styles.css">
@import – at‑rule inside a style‑sheet (avoid for performance).

Tip: External style‑sheets are cached across pages, offering the best performance & maintainability.

2 · Selectors & Combinators

Basic Selectors

/* Type, class & ID */
p          { … }      /* element */
.alert      { … }      /* class  */
#header     { … }      /* id     */

Combinators

.nav a           { … }  /* descendant      */
.nav > li        { … }  /* direct child     */
.card + .card    { … }  /* adjacent sibling */
h2 ~ p           { … }  /* general sibling  */

Attribute Selectors

[data-state]          { … }
input[type="radio"]   { … }
a[href^="https://"]   { … }

Relational & Logical Selectors (2023‑2025)

:is(), :where() (zero specificity), :not(), and the powerful relational pseudo‑class :has() let you style a parent based on its children and compose complex queries. The :has() selector now enjoys >90 % global support.

/* If an input inside the .field is invalid, outline the .field */
.field:has(input:invalid){
  outline:2px solid red;
}

3 · Pseudo‑Classes & Pseudo‑Elements

Pseudo‑Classes (`:hover`, `:focus-visible`, `:first-child` …)

Describe an element’s state.

Pseudo‑Elements (`::before`, `::marker`, `::selection` …)

Generate or target virtual sub‑parts of an element.

button::before{
  content:"→";
  margin-inline-end:.4em;
}

4 · Cascade, Inheritance & Specificity

The Cascade

When multiple rules match, precedence is determined by origin (author > user > browser), importance (!important), specificity, and source order.

Specificity Formula

(inline, IDs, classes|pseudo‑classes|attrs, elements|pseudo‑elements).

/* 0‑1‑0 */
#brand{…}
/* 0‑0‑2 */
nav .link:hover{…}
/* 1‑0‑0 */
style="…"

Inheritance

Typographic properties (color, font‑family) inherit by default; box‑model properties do not. Use inherit, initial, revert, and revert‑layer to control behaviour.

5 · Units, Sizing & Colour Spaces

Absolute & Relative Units

Absolute: px, cm, pt
Font‑relative: em, rem, ex, ch
Viewport: vw, vh, dvh, lvh, svh
Container: cqw, cqh (see §10)

Modern Colour Spaces (2023‑2025)

Beyond sRGB: lab(), lch(), oklab(), oklch(), and the color-mix() function for dynamic blends.

p{
  color: color-mix(in lch, purple 40%, black);
}

Use clamp() for fluid sizing: clamp(1rem,2vw,1.6rem).

6 · The CSS Box Model

Each element generates boxes with content, padding, border, margin. box-sizing:border-box simplifies layout by including padding + border in width/height.

Overflow & Scroll Timelines

Control overflow with overflow, overflow-x/y. In 2025 you can drive animations with scroll‑timeline for smooth parallax effects.

7 · Display & Positioning

Display

Value	Description
`block`	Starts on new line, full width
`inline`	Flows with text
`inline-block`	Intrinsic size, flows inline
`flex`/`grid`	Modern layout modes
`contents`	Element disappears, children remain

Positioning Schemes

.sticky-bar{
  position: sticky;
  top:0;
}

8 · Modern Layout — Flexbox, Grid & Subgrid

Flexbox

1‑D layout—axis & order control.

.toolbar{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:space-between;
}

Grid & Subgrid (2024 +)

2‑D layout with explicit tracks; subgrid lets children inherit track sizing from ancestors.

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));
  gap:1.2rem;
}
figure{
  display:subgrid;
  grid-template-rows:auto 1fr auto;
}

9 · Multi‑Column & Legacy Flows

Use columns for magazine‑style layouts, fallback to floats/clears when legacy support is critical.

10 · Responsive & Adaptive Design

Media Queries

@media (min-width:48rem){
  nav ul{ flex-direction:row; }
}

Container Queries (Stable since Feb 2023)

Let components adapt to their parent’s size or style.

.card{
  container-type:inline-size;
}

@container (min-width:35cqw){
  .card{ grid-template-columns:14rem 1fr; }
}

Style & State Queries

As of 2025 you can query styles (@container style(--theme:dark)) and scroll states for even richer adaptability.

11 · Typography & Text

Variable fonts (@font-face with font-variation-settings)
Logical properties: margin-inline, text-align:start
Text wrap: text-wrap:balance; for auto balanced headings.

@font-face{
  font-family:"Inter";
  src:url("InterVar.woff2") format("woff2-variations");
}

12 · Transforms, Transitions & Animations

Transitions (implicit)

.btn{
  transition: background .25s ease, transform .3s;
}
.btn:hover{
  background:orange;
  transform:translateY(-2px);
}

@keyframes & Animation‑Timeline

@keyframes pulse{
  50%{ transform:scale(1.06);}
}
.logo{
  animation:pulse 3s infinite alternate;
}

View Transitions API (Chrome & Safari TP)

Smooth page‑to‑page transforms with view-transition-name.

13 · Custom Properties, Math & Layers

:root{
  --radius:1.2rem;
}
.card{
  border-radius:var(--radius);
  border:1px solid oklch(60% 0.18 200);
}
@layer reset, base, components, utilities;

@layer base{
  h1{margin-bottom:.5em;}
}

Layers (@layer) allow you to control cascade order without over‑specificity.

14 · Accessibility & User Preferences

@media (prefers-reduced-motion:reduce)
@media (prefers-color-scheme:dark)
:focus-visible and :target for keyboard navigation

15 · Feature Queries, Tools & Performance Tips

@supports Feature Queries

@supports (grid-template-rows:subgrid){
  .photo-grid{ grid-template-rows:subgrid; }
}

Testing & Tooling

DevTools (Layout, Grid, Animations panels)
Can I Use & caniuse‑lite with Autoprefixer
CSS Audit (Chrome Lighthouse)

Performance Checklist

Use content‑visibility:auto for heavy off‑screen sections.
Prefer logical properties for RTL/LTR without duplication.
Extract critical CSS in <head> and load rest with media="print" onload trick.