From the course: CSS: Variables and Fluid Layouts

Unlock the full course today

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

Configure CSS custom properties

Configure CSS custom properties - CSS Tutorial

From the course: CSS: Variables and Fluid Layouts

Start my 1-month free trial

Configure CSS custom properties

“

- [Female narrator] Now that you've heard a little background about custom properties, let's see how to configure them and use them in your CSS. Declaring a variable is really easy. First of all, configure your CSS declaration with a selector and a declaration body, just as you always do. Notice here I'm using the pseudo-class of root. This is a more specific selector than the usual HTML element selector, which may be an advantage. The root selector also selects the full root of the document where the HTML elements selector may not do that, and that may matter especially if you're manipulating these values with JavaScript. By using the root selector, you're making any variable declarations here available to your full document, wherever you'd like to call on the variables. So essentially anything that's here is scoped globally. Inside of the declaration body, declare your variables starting with a double hyphen…

Contents