CSS custom properties (also known as CSS variables)

CSS custom properties are variables that can be defined in your CSS and reused throughout your stylesheet. They allow you to store values that can be used in multiple places, making it easier to manage and maintain your styles.

How to define a CSS custom property

To define a CSS custom property, you use the -- prefix followed by the name of the variable. The value of the variable is set using the : symbol. For example:

:root {
  --primary-color: blue;
}

This defines a custom property called --primary-color with a value of blue. The :root selector is used to define the variable at the root level of the document, making it available to all elements in the document. You can also define custom properties within other selectors, in which case they will only be available within the scope of that selector.

How to use a CSS custom property

To use a CSS custom property, you can reference it using the var() function. For example:

body {
  color: var(--primary-color);
}

This sets the text color of the body element to the value of the --primary-color custom property, which is blue.

You can also use a default value for the var() function in case the custom property is not defined. For example:

body {
  color: var(--secondary-color, green);
}

This sets the text color of the body element to the value of the --secondary-color custom property, or to green if the --secondary-color custom property is not defined.

Examples

Here are a few examples of how you can use CSS custom properties in your stylesheets:

• Define a color palette:

:root {
  --primary-color: blue;
  --secondary-color: green;
  --tertiary-color: purple;
}

body {
  color: var(--primary-color);
}

a {
  color: var(--secondary-color);
}

button {
  background-color: var(--tertiary-color);
}

• Set base font size and line height:

:root {
  --base-font-size: 16px;
  --base-line-height: 1.5;
}

body {
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
}

• Use a custom property to define a responsive breakpoint:

:root {
  --breakpoint-medium: 768px;
}

@media (min-width: var(--breakpoint-medium)) {
  /* styles for medium and larger screens go here */
}

• Define a gradient using a custom property:

:root {
  --gradient: linear-gradient(to bottom, #ffffff, #000000);
}

body {
  background: var(--gradient);
}

CSS custom properties are a powerful and convenient way to store and reuse values in your stylesheets. They can help you create more maintainable and scalable styles, and make it easier to make global changes to your design.

One thing to keep in mind is that custom properties are only available in modern browsers, so you may need to use feature detection or provide fallback styles for older browsers that do not support them.

I hope this tutorial has helped explain the basics of CSS custom properties. If you have any questions or need further clarification, feel free to ask.

That's it.