CSS Core Concepts

Cascading Style Sheets fundamentals — how styles work

What is CSS?

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements — colors, layouts, fonts, animations. The 'cascade' determines which styles win when multiple rules target the same element.

css

// CSS Fundamentals
/* Specificity: inline > ID > class > element */
/* Specificity scores: (0,0,0,0) → (inline, id, class, element) */

body {
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  color: #1a1a2e;
  background: #fafafa;
}

/* CSS Custom Properties (Variables) */
:root {
  --primary: #3b82f6;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card {
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: white;
}

/* Cascade order: (lowest to highest priority) */
/* 1. Browser defaults  2. External stylesheets  3. Internal <style>
   4. Inline styles  5. !important (avoid if possible) */