Inherit CSS class

Question

I have one base .base{} in my CSS file with couple properties. I want to change only color and other properties to stay same. How to inherit this base class inother classe

Answer 1

i think you can use more than one class in a tag

for example:

<div class="whatever base"></div>
<div class="whatever2 base"></div>

so when you want to chage all div's color you can just change the .base

...i dont know how to inherit in CSS

Answer 2

As said in previous responses, their is no OOP-like inheritance in CSS. But if you want to reuse a rule-set to apply it to descentants of something, changing properties, and if you can use LESS, try Mixins. To resume on OOP features, it looks like composition.

For instance, you want to apply the .paragraph class which is in a file "text.less" to all p children of paragraphsContainer, and redefine the color property from red to black

text.less file

.paragraph {
    font: arial;
    color: red
}

Do this in an alternativeText.less file

@import (reference) 'text.less';    
div#paragraphsContainer > p {
    .paragraph;
    color: black
}

your.html file

<div id='paragraphsContainer'>
   <p>paragraph 1</p>
   <p>paragraph 2</p>
   <p>paragraph 3</p>
</div>

Please read this answer about defining same css property multiple times

Answer 3

You could also use the !important feature of css to make qualities you do not want to override in the original class. I am using this on my site to keep some of the essential characteristics of the original class while overriding others:

<div class="foo bar">
.foo {
color: blue;
width: 200px  !important;
}

.bar {
color: red;
width: 400px;
}

This will generate a class "foo bar" element that is red and 200px. This is great if you are using the other two classes individually and just want a piece from each class.