What do these double-dash-prefixed CSS properties do?


Css Problem Overview

I met this strange CSS code here:

:root {
    --color-link: #04b;
    --color-link-visited: #551a8b;
    --color-link-minor: #669;
    --color-black: #000;
    --color-grey: #999;
    --font-thin: HelveticaNeue-thin,sans-serif-thin;
    --font-light: HelveticaNeue-Light,sans-serif-light;
    --text-s: 11px;
    --text-s-line-s: 1em;
    --text-s-line-m: 1em;
    --typo-caps: 11px;
    --typo-greenurl: 13px;

I've never seen such CSS properties names before and can't find information about them. But browser inspectors (checked it in Chrome, Safari and Firefox) say they are valid CSS properties, so it must be a CSS standard.

I tried to add my own property and it is valid either:

:root {
    --color-foobar: #000;

What do these properties do? What the CSS standard describes it? Where can I find a reference about it?

Css Solutions

Solution 1 - Css

A double leading dash is used for defining custom properties. For more information, check out this W3C Spec page.

Example from W3C:

:root {
  --main-color: #05c;
  --accent-color: #056;

#foo h1 {
  color: var(--main-color);


All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionFinesseView Question on Stackoverflow
Solution 1 - CssFarhadView Answer on Stackoverflow