Can we include common css class in another css class?

Question

I am a CSS newbie. I am just wondering, is that possible to include one common class into another class?

for example,

.center {align: center};
.conte         


        

Answer 1

This is where the Cascading in Cascading Style Sheets comes in to play.

Think of your html element or widget/module (group of nested html elements) as an object. You know you're going to have objects that share the same properties so you'll want to create a reusable class they can utilize.

.baseModule {align: center;}

Say your module is a message (error, flash...). So you "extend" or "include" your .baseModule class because all messages will be center aligned (see final html example).

.message {border: 1px solid #555;}

Furthermore you want your error messages to have a red background. Additionally you can overwrite the border property from .baseModule.message here if you wanted it to be a different color or something.

.error {background-color: red;}

So now you have a few css definitions that can be reused with ease.

    I am a regular message.




    I am an error message. My background color is red.

To relate this to your question you'd basically leverage multiple class names for maximum reusability. Granted ie6 doesn't support chained selectors (class1.class2.class3), but it's still a neat trick!