CSS Advice

[ControlZ]

I am trying to shrink the size of my css file.

I have 18 styles that are exactly the same EXCEPT each one makes use of a particular (different) bg image.

I am trying to figure out a way to set the link properties for each of these 18 styles without having 18 different styles. They cannot use the "default" link style because it makes use of a different color.

Here is one of the 18 styles:

.club rock {
font: bold normal 16px/20px Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background: URL(../images/rock_04.jpg) no-repeat;
padding-top: 14px;
height: 188px;
padding-left: 20px;
}
.clubrock a:link {
color: #FFF;
text-decoration: underline;
}
.clubrock a:visited {
color: #FFF;
text-decoration: none;
}
.clubrock a:hover {
text-decoration: underline;
color: #FFF;
background-color: #9ACB34;
}

Is there a way to rewrite the code so that I do not have to repeat the link styles (which are the same for ea. of the 18 styles)for each of the 18 styles with different background images?

[daveVk]

If it is Ok to change html then change class="clubrock" to class="club rock" and other 17 to class="club jazz" etc. This assigns 2 class name "club" and "rock" to same element. Put all common stuff in "club" and image per "rock" "jazz" etc.

[ControlZ]

That sounds like it may work - I'll give it a shot.

[ControlZ]

thanks, works fine and saves me lots of extra code