HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Custom Properties

CSS Variables (Custom Properties)

CSS Variables allow you to store specific values (like colors, fonts, or sizes) in one place and reuse them throughout your entire stylesheet.

Why use CSS Variables?

Maintainability: If you want to change your brand's primary color, you only change the variable value once, and the whole site updates.
Theming: Makes implementing Light/Dark mode incredibly easy by just swapping the variable values.

Variables are defined with a double hyphen -- inside the :root selector, and called using the var() function.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Define Variables Globally */
    :root {
      --primary-color: #3498db;
      --secondary-color: #2c3e50;
      --bg-color: #ecf0f1;
      --text-color: #333;
      --spacing: 20px;
      --radius: 8px;
    }
    
    body { background-color: var(--bg-color); color: var(--text-color); font-family: sans-serif; padding: var(--spacing); }
    
    .theme-card {
      background: white;
      border-top: 5px solid var(--primary-color);
      padding: var(--spacing);
      border-radius: var(--radius);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    
    .theme-btn {
      background: var(--primary-color);
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      font-weight: bold;
    }
    .theme-btn:hover { background: var(--secondary-color); }
  </style>
</head>
<body>

<div class="theme-card">
    <h2 style="color: var(--primary-color);">CSS Variables Magic</h2>
    <p>This entire card is styled using CSS Variables. The border, text color, spacing, and button color all pull from the :root definitions.</p>
    <button class="theme-btn">Primary Action</button>
  </div>

</body>
</html>

Result

Topics