Question

Hello I would like to use in my css simple inheritance from the browsers default values:

.myfromh1{
font-weight: bold;
}

Can I tell css that .myfromh1 class is owning all properties of the h1 default class?

thanks Arman.

Answer 1

It’s not quite clear from your question what you want to achieve. CSS uses a hierarchy of overwriting rules.

Inline styles have precedence over <style> block code

<style type="text/css">
#test { color: red; }
</style>

<span id="test" style="color: blue;">This text will be blue</span>

All styles have precedence over styles that are defined earlier in the code

<style type="text/css">
#test { color: red; }
#test { color: blue; }
</style>

<span id="test">This text will be blue</span>

Styles with high specificity have precedence over less specific styles

<style type="text/css">
#test { color: blue; }
.test { color: red; }
</style>

<span id="test" class="test">This text will be blue</span>

Some browsers honor the !important keyword

<style type="text/css">
span { color: blue !important; }
#test { color: red; }

<span id="test">This text should be blue</span>

Therefore, to answer your question, if your element is a H1 element, then it will automatically have all the properties of a h1 selector, and only those that are overridden by the #myfromh1 selector will be changed.

If, however, you’re looking for true inheritance between selectors – if #myfromh1 is not a H1 element, but you want it to be styled like one, then the answer is that that cannot be achieved in CSS.