CSS Variables Summary

Variables Summary

CSS variables enable theming, dark mode, responsive design, and component APIs. Define on :root, scope locally, override in media queries or modifier classes.

Example

:root {
  --primary: #0d6efd; --font: system-ui, sans-serif;
  --space: 1rem; --radius: 0.5rem;
}
.btn { background: var(--primary); padding: var(--space) calc(var(--space)*2); border-radius: var(--radius); }

CSS

Full Editor

Pro Tip

CSS variables are the foundation of any scalable design system or design token setup.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned