Inherit css properties

Question

I have only basic css knowledge of whether a property can be inherited from one style to another style. So, for example, I could inherit the font size specified in the default paragrah tag settings in my hyperlink labels.

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

Answer 1

You can define common styles for two elements at the same time:

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

And then expand each of them with your individual properties:

 p { color: red; } a { font-weight: bold; } 

Keep in mind: Styles defined later in the stylesheet usually override properties defined earlier.

Extras: If you have not already done so, I recommend getting the Firebug Firefox extension so that you can see what styles that elements on your page get and where they are inherited.

Answer 2

No CSS has a way to inherit styles. But there are several ways to share styles. Here are some 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 items

 <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 them are exactly what you are looking for, but using these methods will help you minimize CSS duplication.

If you want to use server-side code to pre-process your CSS, you can get the type of CSS inheritance you're 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 need to understand how cascading works in CSS, and also how inheritance works. Some styles inherit (for example, the face of the font), and some styles (for example, border). However, you can also specify styles for inheriting their parent elements inside the DOM.

Some help here is knowing the rules of style. This CSS Specificity Wars site may help (Note: this site is currently unavailable, but hopefully it will be back soon).

Also, I find that sometimes it helps to overload such styles:

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

Answer 4

CSS is automatically inherited 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 in a div or span, will always be #EEE.

There was quite a bit of talk about adding inheritance the way you describe in CSS3, but this specification has not yet been released, so it’s stuck right now, repeating itself quite a bit.

Answer 5

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

Link tags will automatically use the fonts in the paragraph if and only if they are inside the paragraph. If they are outside the paragraph (say, in a list), they will not use the same font, etc.

For example, this css:

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

will generate links and paragraphs that are 0.75 in size. But it will display links in paragraphs to approximately .56em (.75 ​​* .75).

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