From the course: CSS: Variable Fonts

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Use custom properties for easier styling

Use custom properties for easier styling - CSS Tutorial

From the course: CSS: Variable Fonts

Start my 1-month free trial

Use custom properties for easier styling

“

- [Instructor] Having to re-declare all the different variation axis values every time you want to make a change to just one axis can be tedious, and it's also a good way of introducing accidental errors and omissions, and you just end up writing a ton of CSS that you have to then maintain to keep consistency. To get around this whole problem, we have custom properties. If you're not familiar with CSS custom properties, they're effectively CSS variables, and you can read all about them on the MDN web docs. They work like this, first you declare a custom property, and you do that by giving it a name that is prefixed with two dashes. Here I've declared the custom property on the :root selector, that's a selector that wraps around absolutely everything in the document, including the HTML element itself. Then, after you've given your custom property a name, you place a value after the colon. This can be any property value,…

Contents