Coloring multiple elements with a single CSS declaration

Question

I'm new to web development in general and I am stil just a novice in HTML and CSS.

I am currently trying to minimize the number of declarations in my stylesheet to clean it up, but I have come across something I need help with.

Anyway, here is the code I'm asking about:

#div1,
#div2,
#div3 {
    width: 100px; height: 100px;
    border: 1px solid #f00; 
    background-color: #0f0; 
    float: left; margin: auto 5px auto;
    position: relative; left: 10px; top: 10px;
}

Here, each div has a green background color. What I'm trying to do is set a different color for each div in a single declaration.

Is this possible?

Thanks. Appreciate any and all help.

Answer 1

The cleanest way to style these elements would be to put a common class on them, and only style the individual divs for their differences (the color).

.box {
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
  float: left;
  margin: auto 5px auto;
  position: relative;
  left: 10px;
  top: 10px;
}
#div1 {
  background-color: #0f0;
}
#div2 {
  background-color: #0ff;
}
#div3 {
  background-color: #ff0;
}

<div class="box" id="div1"></div>
<div class="box" id="div2"></div>
<div class="box" id="div3"></div>