CSS

Selectors

/* Element selector */
p { color: blue; }

/* Class selector */
.card { padding: 1rem; }

/* ID selector */
#header { height: 60px; }

/* Attribute selectors */
[type="text"] { border: 1px solid gray; }
[href^="https"] { color: green; }     /* starts with */
[href$=".pdf"] { color: red; }        /* ends with */
[class*="btn"] { cursor: pointer; }   /* contains */

/* Combinators */
div p { }      /* descendant */
div > p { }    /* direct child */
div + p { }    /* adjacent sibling */
div ~ p { }    /* general sibling */

/* Pseudo-classes */
a:hover { }    /* mouse over */
a:active { }   /* being clicked */
a:visited { }  /* visited link */
input:focus { }
input:disabled { }
li:first-child { }
li:last-child { }
li:nth-child(2n) { }  /* even items */
li:nth-child(2n+1) { } /* odd items */
p:not(.special) { }

/* Pseudo-elements */
p::before { content: "→ "; }
p::after { content: " ←"; }
p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
::selection { background: yellow; }

Units

/* Absolute units */
width: 100px;                       /* pixels - fixed size */
width: 1in;                         /* inches */
width: 2.54cm;                      /* centimeters */
width: 12pt;                        /* points (1pt = 1/72 inch) */

/* Relative units */
font-size: 1rem;                    /* relative to root font size (16px default) */
font-size: 1em;                     /* relative to parent font size */
width: 50%;                         /* percentage of parent */
width: 100vw;                       /* 100% of viewport width */
height: 100vh;                      /* 100% of viewport height */
width: 100dvw;                      /* dynamic viewport width (mobile-friendly) */
height: 100dvh;                     /* dynamic viewport height (mobile-friendly) */
font-size: 4vmin;                   /* 4% of viewport's smaller dimension */
font-size: 4vmax;                   /* 4% of viewport's larger dimension */
width: 50ch;                        /* width of "0" character */
height: 2lh;                        /* line height of element */

/* Container query units */
width: 50cqw;                       /* 50% of container width */
height: 50cqh;                      /* 50% of container height */

Box Model

.box {
  /* Content dimensions */
  width: 300px;
  height: 200px;
  min-width: 100px;
  max-width: 500px;

  /* Padding (inside border) */
  padding: 10px;                    /* all sides */
  padding: 10px 20px;               /* vertical | horizontal */
  padding: 10px 20px 15px 25px;     /* top | right | bottom | left */

  /* Logical properties (adapt to writing direction) */
  padding-inline: 1rem;             /* left and right (horizontal languages) */
  padding-block: 1rem;              /* top and bottom */
  padding-inline-start: 1rem;       /* left in LTR, right in RTL */
  padding-inline-end: 1rem;         /* right in LTR, left in RTL */
  margin-inline: auto;              /* center horizontally */
  margin-block: 2rem;
  inset-inline: 0;                  /* left: 0; right: 0; */
  inset-block: 0;                   /* top: 0; bottom: 0; */
  inline-size: 100%;                /* width in horizontal writing mode */
  block-size: 50vh;                 /* height in horizontal writing mode */

  /* Border */
  border: 1px solid black;
  border-radius: 8px;

  /* Margin (outside border) */
  margin: 0 auto;                   /* center horizontally */

  /* Box sizing */
  box-sizing: border-box;           /* include padding/border in width */
}

Flexbox

/* Container properties */
.flex-container {
  display: flex;
  flex-direction: row;              /* row | row-reverse | column | column-reverse */
  flex-wrap: wrap;                  /* nowrap | wrap | wrap-reverse */
  justify-content: center;          /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;              /* flex-start | flex-end | center | stretch | baseline */
  align-content: center;            /* for multi-line flex containers */
  gap: 1rem;                        /* gap between items */
}

/* Item properties */
.flex-item {
  flex: 1;                          /* shorthand for grow, shrink, basis */
  flex-grow: 1;                     /* how much item should grow */
  flex-shrink: 0;                   /* how much item should shrink */
  flex-basis: 200px;                /* initial size */
  align-self: flex-end;             /* override align-items for this item */
  order: 2;                         /* change visual order */
}

Grid

/* Container properties */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;           /* three columns */
  grid-template-columns: repeat(3, 1fr);        /* three equal columns */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* responsive */
  grid-template-rows: 100px auto 100px;
  gap: 1rem;                                    /* row and column gap */
  row-gap: 1rem;
  column-gap: 2rem;
  justify-items: center;                        /* align items horizontally */
  align-items: center;                          /* align items vertically */
}

/* Item properties */
.grid-item {
  grid-column: 1 / 3;               /* span from column 1 to 3 */
  grid-column: span 2;              /* span 2 columns */
  grid-row: 1 / 2;
  justify-self: end;                /* align this item horizontally */
  align-self: start;                /* align this item vertically */
}

/* Named grid areas */
.layout {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Typography

.text {
  /* Font properties */
  font-family: 'Arial', sans-serif;
  font-size: 1rem;                  /* 16px default */
  font-weight: 400;                 /* 100-900, normal=400, bold=700 */
  font-style: italic;
  line-height: 1.5;

  /* Text properties */
  text-align: center;               /* left | right | center | justify */
  text-decoration: underline;       /* none | underline | line-through */
  text-transform: uppercase;        /* none | uppercase | lowercase | capitalize */
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  white-space: nowrap;              /* prevent wrapping */
  text-overflow: ellipsis;          /* requires overflow: hidden */
  overflow: hidden;
}

Colors & Backgrounds

.element {
  /* Color formats */
  color: red;                       /* named color */
  color: #ff0000;                   /* hex */
  color: rgb(255, 0, 0);            /* rgb */
  color: rgba(255, 0, 0, 0.5);      /* rgb with alpha */
  color: hsl(0, 100%, 50%);         /* hue, saturation, lightness */
  color: hsla(0, 100%, 50%, 0.5);   /* hsl with alpha */
  color: oklch(70% 0.15 30);        /* lightness, chroma, hue - modern color space */

  /* Backgrounds */
  background-color: #f0f0f0;
  background-image: url('image.jpg');
  background-size: cover;           /* cover | contain | 100% 100% */
  background-position: center;
  background-repeat: no-repeat;
  background: linear-gradient(to right, #ff0000, #0000ff);
  background: radial-gradient(circle, #ff0000, #0000ff);
}

Positioning

.element {
  position: static;                 /* default, normal flow */
  position: relative;               /* relative to normal position */
  position: absolute;               /* relative to positioned ancestor */
  position: fixed;                  /* relative to viewport */
  position: sticky;                 /* switches between relative and fixed */

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 100;                     /* stack order (higher = on top) */
}

/* Centering with position */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Transitions & Animations

/* Transitions */
.button {
  transition: all 0.3s ease;
  transition: background-color 0.3s, transform 0.2s;
  transition-timing-function: ease-in-out; /* linear | ease | ease-in | ease-out */
}
.button:hover {
  background-color: blue;
  transform: scale(1.05);
}

/* Keyframe animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animated {
  animation: fadeIn 0.5s ease-out forwards;
  animation-delay: 0.2s;
  animation-iteration-count: infinite; /* or a number */
  animation-direction: alternate;      /* normal | reverse | alternate */
}

Media Queries

/* Mobile-first approach */
.container {
  width: 100%;
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }
}

/* Other media features */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: white; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Container Queries

/* Define a containment context */
.card-container {
  container-type: inline-size;      /* enable container queries on width */
  container-name: card;             /* optional: name the container */
  /* Shorthand */
  container: card / inline-size;
}

/* Query based on container size */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

/* Query a named container */
@container card (min-width: 600px) {
  .card {
    grid-template-columns: 1fr 2fr;
  }
}

/* Container query units */
.card-title {
  font-size: 1rem;
  font-size: clamp(1rem, 5cqi, 2rem); /* responsive to container */
}

/* Available container units:
   cqw  - 1% of container width
   cqh  - 1% of container height
   cqi  - 1% of container inline size
   cqb  - 1% of container block size
   cqmin - smaller of cqi or cqb
   cqmax - larger of cqi or cqb
*/

CSS Variables

/* Define variables in :root */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --border-radius: 8px;
}

/* Use variables */
.card {
  background-color: var(--primary-color);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

/* Fallback value */
.element {
  color: var(--undefined-var, black);
}

Common Patterns

/* Reset box-sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Truncate text */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Aspect ratio */
.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

Vendor Prefixes

/* Browser-specific prefixes for experimental features */
.element {
  -webkit-appearance: none;         /* Chrome, Safari, Edge */
  -moz-appearance: none;            /* Firefox */
  -ms-appearance: none;             /* Internet Explorer */
  appearance: none;                 /* Standard (always include last) */
}

/* Common prefixed properties */
.box {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  -webkit-text-stroke: 1px black;   /* text outline (WebKit only) */

  -webkit-line-clamp: 3;            /* limit text to N lines */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* User select */
.no-select {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Scrollbar styling (WebKit) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

/* Note: Use autoprefixer in build tools to add prefixes automatically */

CSS Versions

Note: Since CSS3, the specification is split into independent modules that evolve at their own pace. There is no monolithic "CSS4"—instead, features like container queries, cascade layers (@layer), and :has() selector are part of newer module levels.