Inheriting from another style in a another style

Question

If have a style like this:

.Style1
{
   background-color:white;
}

And a second style like this:

.Style2
{
   border: black solid 1px;
}

How do I get Style2 to have Style1 as a base style?

Malcolm

Answer 1

.Style1, .Style2 {
     background-color:white;
}

.Style2 {
     border: black solid 1px;
}

This way Style1 and Style2 will both have the background set to white, and only Style2 will also have a black border.

Answer 2

There's no inheritance in CSS. The closest you can get to inheritance is by specifying 2 classes in your HTML elements:

<div class="Style1 Style2">..</div>

Or you can simply use the same style name:

.Style1 { background-color:white; }
.Style1 { border: black solid 1px; }

Now Style1 will have both properties

Answer 3

the thing here is to simply use it as (example)

class="style1 style2"

this means the element will use the style1 then style2 (overriding style1 with style2 if any overlapping occurs e.g. if you use the same property in both the last one will be used).

Answer 4

<... class="style2 style1" ..>

Answer 5

As far as I know, there isn't really a way to do this.

You could of course make whatever element you wish to apply those style to include both class names <div class="style1 style2">

And the lack of this functionality is the reason there's been a rise in OOCSS (Object Oriented CSS). And frameworks such as Less.

Answer 6

You could use

<span class="style1 style2">

or define

span { /* define base styles for all spans here */ }

span.style1 { /*inherits styles from span, and adds specific styles to that */ }

Using with

<p>Normal p text and <span>style</span>, <span class="style1">style 1 type text</span>.</p>

Answer 7

Use this method:

<div class="Style1">
   <div class="Style2">bla bla bla</div>
</div>