how to inherit classes in css


Tags: javascript,html,css

Problem :

I wrote few css classes such as these:

.bad
{
    background:#fff0f0;
    color:#800;
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good
{
    background:#eeffee;
    color:#008800; 
    width:1024px;        //same as above
    padding-left:10px;   //same as above
    margin-top:0;        //same as above
    margin-bottom:0;     //same as above
}

As you see out of 6 attributes, 4 are exactly same. So I thought of avoiding this duplication by writing a .common class and inherit them when defining the above classes, as shown below:

.common
{
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good, .common    //inherit .commom
{
    background:#eeffee;
    color:#008800;
}
.bad, .common     //inherit .commom
{
    background:#fff0f0;
    color:#800;
}

But these change doesn't produce the same effect on the browser. I'm applying them on <p> tags and I see a gap between two consecutive <p> tags in the latter case. So it seems margin-* attributes are not inherited (or doesn't work the way it works in the first case).

All I'm looking for a way to avoid code-duplication. Is there any way to achieve that?

I'm not allowed to use less or any external tool or library. I just want my code to look shorter and concise in native CSS which I can put in the html file itself (no external .css file). I'm allowed to use javascript in the html itself (no jquery though).



Solution :

.bad, .common //inherit .commom doesn't do what you think, it sets styles to both, to .bad and .common elements.

If you have both classes on each element, you can use that.

<style>

.common {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="common bad">bad</p>
<p class="common good">good</p>

If you have just one class, bad and good on each element, use that

<style>

.bad, .good {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="bad">bad</p>
<p class="good">good</p>

    CSS Howto..

    How to create a vertical column in a table using css

    How to edit a css file in ASP.NET using C# to change the website design

    How to make content fill space inside
    tag in html?

    How to fix these jagged lines?

    how to apply transform rotate all browse in inline css using jquery

    How to Create a CSS3 Animated Circle that chages colors when clicked?

    how to run HTML+CSS+JAVASCRIPT Project on android Emulator

    How do I keep an element from pushing another element in CSS?

    Scroll to next and previous div using scrollTop, how do I accomplish this?

    How to make a pie chart in CSS

    How to adjust CSS to make footer fixed height?

    CSS: How to align text to baseline of height-adjusted input element?

    How to get page-header and nav-pills to appear on the same line

    How Should I Display This Background Using CSS?

    How to make a div box with display:flex clickable like display:block?

    How to change property of a specific CSS pseudo element?

    How to remove unwanted white space in CSS

    How can I allign select menu with a button on the same line with css bootstrap?

    How to make 1 image tile in css?

    php- How to strip CSS in the text

    How to set a style one a parent element [duplicate]

    How to get CSS height value (rather than calculated height) in jQuery

    How to use list tag in single line

    How to float elements in rows.

    @media query device - how to portrait one css, landscape other?

    how to link stylesheet in css

    jQuery - How to aply custom CSS to fields which are not empty

    How to handle alternating rows dynamically?

    How can I set a CSS property on the html element with jQuery?

    How to make input+label in a form appear one by one?