Academy / Advanced Level: HTML and CSS

CSS Variables (Custom Properties)

CSS Variables (Custom Properties)

CSS Variables allow you to store values (like colors, fonts, or spacing sizes) in variables that can be reused throughout your stylesheet. Custom properties make it easy to update multiple elements simultaneously by changing a single value in one place. This is particularly useful in projects with complex styles or theming needs.

Example of CSS Variables:

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

• --primary-color and --font-size are custom properties (CSS variables) defined under the :root selector.
• You can use these variables in any CSS rule by referencing them with var(--variable-name).