Question

I have the following styles in an external CSS file.

.callButton {
  width: 100px;
  height: 25px;
  float: right;
  /* other styles here */
  background-img: url('images/callButton.png');
}

.otherButton {
  width: 100px;
  height: 25px;
  float: right;
  /* same styles from callButton here */
  background-img: url('images/otherButton.png');
}

/* 5 more similar buttons */

As you can see, only the property background-img is different, but I’ve to use different classes for each of them. Is there any way I can use the same classes for the common property and something different (like a variable) for the background-img property?

Answer 1

You’re going to want something like this, methinks:

.button {
    width: 100px;
    height: 25px;
    float: right;
}

.callButton {
    background-img: url('images/callButton.png');
}

.otherButton {
    background-img: url('images/otherButton.png');
}

Then, change your HTML to be:

<span class="button otherButton"></span>