Using CSS variables

CSS Variables are entities defined by authors, or users, of Web pages to contain specific values throughout a document. They are set using custom properties and are accessed using a specific functional notation var().

CSS Variables currently have two forms:

- variables, which are an association between an identifier and a value that can be used in place of any regular values, using the var() functional notation: var(example-variable) returns the value of the example-variable value.

- custom properties, which are special properties of the form --* where * represent the variable name. These are used to define the value of a given variable: --example-variable: 20px; is a CSS declaration, using the custom --* property to set the value of the CSS variable example-variable to 20px.

:root { --main-bg-color: brown;}

.one { color: white; background-color: var(--main-bg-color); margin: 10px; width: 50px; height: 50px; display: inline-block;}