CSS AdvancedLesson 74Free preview

CSS Variables

This lesson is part of CSS · All levels

Summary

Custom properties allow us to store values like colors or sizes with a specific name, and then reuse them anywhere. The variable is written with the prefix two stripes `--` and is called using the function `var()`. Because it's run by a browser, the value can be changed during runtime, including via JavaScript.

Key points

Declaration: `--color-main: #2980b9;` then used: `color: var(--color-main)`
`var()` can be given a fallback: `var(--tinggi, 200px)`
`:root` is a common place to define a variable to be valid across the entire page
Variable values are dynamic and can be changed by JavaScript

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.