Custom Properties in CSS3

 Custom Properties in CSS3

Custom Properties, also known as CSS Variables, allow you to define your own variables in CSS3 that can be used throughout your stylesheet. Custom Properties can make it easier to manage and update your styles, especially for large and complex projects.

css

:root {

  --primary-color: blue;

  --secondary-color: red;

}

.button {

  background-color: var(--primary-color);

  color: white;

  padding: 10px;

}

.header {

  background-color: var(--secondary-color);

  color: white;

  padding: 20px;

}

In this example, we have defined two Custom Properties at the root level of our stylesheet. We have used the var() function to reference these Custom Properties in our styles for the .button and .header elements. This makes it easy to update the primary and secondary colors in our styles by simply changing the values of the Custom Properties.