start learning
Image 1
28030201102030

CSS Custom Properties

CSS Custom Properties are user-defined variables in CSS that hold specific values and can be used within the scope of a CSS rule or across an entire document. They are defined using the -- prefix followed by a name and assigned a value using the var() function. Once defined, the custom property can be referenced and reused multiple times within the same stylesheet or across different stylesheets.

Let's say you want to define a custom property for the primary color of your website. You can define it like this:


:root {
  --primary-color: #007bff;
}

Here, :root represents the root element (typically <html>), and --primary-color is the name of the custom property. The value assigned to it is #007bff, which represents a shade of blue.

You can then use the custom property in your CSS rules:


.header {
  background-color: var(--primary-color);
}

.button {
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

In this example, the --primary-color custom property is used as the background color for the .header class and as the text color and border color for the .button class. By updating the value of --primary-color in one place, such as changing it to a different shade of blue or a completely different color, the changes will automatically propagate throughout your stylesheets wherever the custom property is used.

CSS Custom Properties provide a convenient way to centralize and manage reusable values, making your CSS code more flexible, modular, and easier to maintain.