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