- [Instructor] Custom properties introduce

a new level of configuration and customization to CSS

and being able to hook into

and manipulate these custom properties using JavaScript,

opens up a whole new dimension of possibilities.

In this example, I've used custom properties

to set the color and background color

of each of the link items.

You'll notice here, I'm setting up the color

to use the custom property color,

and then there's a fallback value, black,

if we don't have color defined,

and the same thing for background color.

There's a variable or a custom property called BG color

and then a fallback call for transparent

if there is no custom property defined.

I'm using these fallbacks because in the main style sheet,

there is no custom properties to find.

These two colors here,

the color and background color are never defined.

There are some other custom properties

defined at the very top.

If we go look, we have max width and white space,

but there's no color and no BG color.

This is one example of how we can use custom properties

to do really advanced styling for individual items

because although color and BG color are not defined

in the style sheet,

they are defined in line on one of the elements.

You can see it here.

We have the element, then a style attribute,

and then we have color and BG color defined

and as a result,

these custom properties kick in for this one element here.

So that means we can define

how the styling is going to happen in our style sheet

and then use custom properties only where necessary

in line in the elements themselves,

which is really cool

and we can see how this could easily be extended

using JavaScript by injecting custom property values

into elements when needed.

So this begs the obvious question,

how do we access custom properties using JavaScript?

The answer is the same way we've been doing it so far.

So here's an example of how to access

the in line custom properties for that element.

We first go grab the element itself,

and then we say console.log(listItem), so the element,

style, and then use getPropertyValue

and call for the property value.

Run this in the browser and you see in the console,

we have the value for that property.

And this is the value of the custom property

defined in line.

We can go back and look at it.

It's this value right here.

You'll also notice I'm using get property value here

because the custom property name starts with two dashes

and as we've now learned,

two dashes as a JavaScript property name does not work.

If we try to say listItemstyle.--color,

it simply wouldn't work.

It would be a syntax error,

so here we have to use get property value.

It also means we can't do some of this traversing

that we've been doing previously

because the custom properties are just different.

So that's in line styles and it makes sense.

What about style sheets?

You'll remember in my style sheet,

I've defined some custom properties here at the very top.

So this is the first rule.

That means if I go and say document.styleSheets[0],

I get the first style sheet.

Then I can go in and grab the CSS rules

on the first element from that.

So I'll say console.log(styleSheet).

That gives me the current style sheet

and then I'll say cssRules.

And here I want the first rule

so that has index number zero.

And then I want to know about the custom properties.

So here I have max width and white space.

So let's say style.getPropertyValue and --max=width.

Save, back in the browser, 70 VW.

And that's really all there is to it.

Custom properties behave exactly the same way

as any other CSS property.

The only thing you need to keep in mind is that

there are no JavaScript defined property names for these.

So these camel case property names,

because the custom properties always start with dash dash.

So here you have to use getPropertyValue

to get at the property value.

(upbeat electronic music)