To define a custom property, begin the name with two dashes (--). For example, this declaration defines a custom property named --accent-color:

 --accent-color: hsl(102, 37%, 75%);

Next you add your custom property to the element that you want to use as the ancestor. In almost every case you’ll want the top of the HTML document (that is, the html element) to be the ancestor, and in your CSS you can reference that element using the :root selector:

 :root {
     --accent-color: hsl(102, 37%, 75%);
 }

I've added this rule to the CSS Editor, but nothing changes when you run the code because we haven’t yet applied the custom property as a variable. That comes next.