Variables
Part of the Practical Frontend section of Coddy's HTML journey — lesson 1 of 35.
As you create bigger and more complex websites, managing repeated colors, sizes, or fonts gets harder. Changing one value means updating many places.
CSS variables let you save these values as names (like --main-color) and reuse them throughout your CSS. Change the variable once, and it updates everywhere automatically.
They are very helpful for keeping code clean and consistent, and many developers use them to build modern websites.
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.
Cheat sheet
CSS variables let you save values as names and reuse them throughout your CSS. They help keep code clean and consistent.
Define variables with -- prefix and use them with var():
:root {
--main-color: blue;
}
.element {
color: var(--main-color);
}Change the variable once and it updates everywhere automatically.
Try it yourself
This lesson doesn't include a code challenge.
Test yourselfThis lesson includes a short quiz. Start the lesson to answer it and track your progress.