Inherit css properties

Question

I have only a basic knowledge of css, is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags.

The reason I want to do this is to make it easier to maintain multiple styles.

Answer 1

You can define common styles for two elements at once like so:

p, a {
    font-size: 1em;
}

And then extend each one with their individual properties as you want:

p {
   color: red;
}

a {
   font-weight: bold;
}

Keep in mind: Styles defined later in a style sheet generally override properties defined earlier.

Extra: If you haven't already, I recommend getting the Firebug Firefox extension so you can see what styles the elements on your page are receiving and where they are inherited from.

Answer 2

No CSS doesn't have any way to inherit styles. But there are several ways you can share styles. Here are a few examples:

Using multiple classes

<p class="first all">Some text</p>
<p class="all">More text</p>
<p class="last all">Yet more text</p>

p.all { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Use the comma operator in your styles

<p class="first">Some text</p>
<p class="middle">More text</p>
<p class="last">Yet more text</p>

p.first, p.middle, p.last { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

Using container elements

<div class="container">
  <p class="first">Some text</p>
  <p class="middle">More text</p>
  <p class="last">Yet more text</p>
</div>

div p { font-weight: bold }
p.first { color: red; }
p.last { color: blue; }

None of these are exactly what you are looking for, but using these techniques will help you keep CSS duplication to a minimum.

If you are willing to use server side code to preprocess your CSS, you can get the type of CSS inheritance you are looking for.

• http://wiki.framwurk.org/documents:csspp/
• http://mail.python.org/pipermail/python-list/2006-August/397266.html
• http://www.shauninman.com/archive/2008/05/30/check_out_css_cacheer

Answer 3

Yes.

You should understand how the cascade in CSS works, and also understand how inheritance works. Some styles will inherit (like the font face) and some styles wont (like the border). However, you can also tell styles to inherit from their parent elements inside the DOM.

Of some help here is knowledge of how style rules are specified. This site about the CSS Specifity Wars might help (Note: this site is currently down, but hopefully it will be back soon).

Additionally, I find it sometimes helps to overload styles like this:

h1, h2, h3, h4, h5 h6 { font-weight: normal; border: 1px solid #ff0; }
h1 { font-size: 300%; }
... etc ...

Answer 4

CSS will automatically inherit from the parent style. For example, if you say in your body style that all text should be #EEE and your background should be #000 then all text, whether it’s in a div or a span will always be #EEE.

There has been quite a bit of talk about adding inheritance the way you describe in CSS3, but that spec isn’t out yet, so right now we’re stuck repeating ourselves quite a bit.

Answer 5

"...is it possible to inherit a property from one style into another style. So for instance I could inherit the font size specified in my default paragrah tag settings into my hyperlink tags."

The link tags will automatically use the fonts from the paragraph, if, and only if, they are within a paragraph. If they are outside of a paragraph (say in a list) they will not use the same font, etc.

For instance this css:

* {
margin: 0 10px;
padding:0;
font-size: 1 em;
}
p, a { font-size: 75%; }

will generate links and paragraphs that are sized at .75em. But it will display links within paragraphs at about .56em (.75 * .75).

In addition to the specificity reference cited by Jonathan Arkell, I recommend the CSS Tutorial at W3Schools.