css - Variables - The var() Function Part 3: Using CSS Variables in Different Properties

CSS Variables Can Be Used in Multiple Properties

They are not limited to colors and can be used for sizes, borders, fonts, and more.

Example 5: Using Variables for Font Styling

:root {

  --font-size: 16px;

  --font-family: Arial, sans-serif;

}

p {

  font-size: var(--font-size);

  font-family: var(--font-family);

}

Explanation:

--font-size and --font-family store values that can be applied across multiple elements.

Example 6: Border Styles with Variables

:root {

  --border-width: 2px;

  --border-color: gray;

}

.box {

  border: var(--border-width) solid var(--border-color);

}

Explanation:

The border property combines multiple variables, making customization easy.