--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); 

Custom properties (--*): CSS variables

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

Custom properties are scoped to the element(s) they are declared on, and participate in the cascade: the value of such a custom property is that from the declaration decided by the cascading algorithm.

Syntax

--somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); 

This value matches any sequence of one or more tokens, so long as the sequence does not contain an disallowed token. It represents the entirety of what a valid declaration can have as its value.

Note: Custom property names are case sensitive — --my-color will be treated as a separate custom property to --My-color.

Formal syntax

<declaration-value>

Example

HTML

<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p> <p id="secondParagraph">This paragraph should have a yellow background and blue text.</p> <div id="container">   <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p> </div> 

CSS

:root {   --first-color: #16f;   --second-color: #ff7; }  #firstParagraph {   background-color: var(--first-color);   color: var(--second-color); }  #secondParagraph {   background-color: var(--second-color);   color: var(--first-color); }  #container {   --first-color: #290; }  #thirdParagraph {   background-color: var(--first-color);   color: var(--second-color); } 

Result

Specifications

See also