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

Bizarrely, even though CSS talks about inheritance, classes can't "inherit" in this way. The best you can really do is this:

.center, .content { align: center; }
.content { /* ... */ }

Also I'd strongly suggest you not do "naked" class selectors like this. Use ID or tag in addition to class where possible:

div.center, div.content { align: center; }
div.content { /* ... */ }

I say this because if you do your selectors as broad as possible it ends up becoming unmanageable (in my experience) once you get large stylesheets. You end up with unintended selectors interacting with each other to the point where you create a new class (like .center2) because changing the original will affect all sorts of things you don't want.

Answer 2

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.

<!-- Regular message module -->
<p class="baseModule message">
    I am a regular message.
</p>

<!-- Error message module -->
<p class="baseModule message error">
    I am an error message. My background color is red.
</p>

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!

Answer 3

In standard CSS, it's not possible to do this, though it would be nice.

For something like that you'd need to use SASS or similar, which "compiles" to CSS.