CSS - Properties Index

Overview

Estimated time: 10–15 minutes

Use this index as a checklist and quick reference to navigate lessons by property category.

Index

Selectors & Cascade

• specificity, !important — see Specificity & !important
• :not(), :is(), pseudo-classes/elements — see Pseudo-classes and Pseudo-elements

Box Model

• margin, padding — Margins & Padding
• border, border-radius — Borders & Outline
• outline, outline-offset — Borders & Outline
• box-sizing — Box Sizing
• width, height, min/max-* — Dimensions & Sizing

Colors & Backgrounds

• color — Colors
• background-* — Backgrounds, Gradients
• opacity — Shadows & Opacity
• mix-blend-mode, backdrop-filter, filter — Filters & Blend

Typography

• font-*, @font-face — Fonts & Web Fonts
• text-*, line-height, letter/word-spacing, hyphens, white-space — Text

Layout

• display — Display
• position, inset/top/right/bottom/left, z-index — Position & Z-Index
• overflow, text-overflow — Overflow
• flex-*, gap — Flexbox
• grid-*, gap, place-* — Grid
• columns — Multi Column

Responsive & Feature Queries

• @media — Media Queries
• @supports — @supports
• units (px, em, rem, vw/vh, ch) — Units

Transforms & Motion

• transform, transform-origin — Transforms
• transition-* — Transitions
• animation-*, @keyframes — Animations

Variables & Functions

• --custom-props, var() — Variables
• calc(), min(), max(), clamp() — Functions & Math
• @property — @property

For full syntax and browser support, see MDN’s CSS reference; this tutorial complements it with structured examples and patterns.