Custom Properties in CSS3

Custom Properties in CSS3

CSS3 allows you to define custom properties, also known as CSS variables, that you can use throughout your stylesheets. This makes it easier to maintain and update your styles, especially if you have a large or complex website.

html

<div class="container">

  <div class="box">Box 1</div>

  <div class="box">Box 2</div>

  <div class="box">Box 3</div>

</div>

css

:root {

  --box-color: blue;

}

.container {

  display: flex;

  justify-content: center;

}

.box {

  width: 200px;

  height: 200px;

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

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

}

.box:hover {

  --box-color: red;

}

In this example, we have defined a custom property --box-color in the :root selector. We have used this property