Question

I was looking to join 2 styles together to make a super style for easy use and customisation of my page.

Is it possible to define something like this? (if so how)

.bold { font-weight: bold;}
.color1 {color: white;}

.boldColor {.bold; .color1;}

where .boldColor is effectively

.boldColor {font-weight:bold; color:white;}

I want this so that I can have styles thoughout the page and be able to easily change the colors in many places in 1 place. I’m currently using <p class="bold color"> but some of my class defs are becoming long so I’d like to be able to use <p class="boldColor">

Thanks

Answer 1

You can’t do exactly what you are asking for but you can get similar effects by using a comma to separate multiple css selectors that share the same properties.

.bold, .boldColor {
    font-weight: bold;
}

.color1, .boldColor {
    color: white;
}

This way class="boldColor" will have the same effect as class="color1 bold".