Can someone explain inheritance to me?

HTML & CSS
1

Hello,

I have a site I am working on where, for some reason, any class that I start in the css document seems to be over rided by what comes before it.

Here is an example of what I have:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
margin:0;
color:black;
}

.plain, b, strong, ul, ol, li {
font-family:Arial, Helvetica, sans-serif;
font-size:9pt;
}

A class that I started below this to edit a group of words on the home page does not seem to work. The color works but it seems to inheret the above for the rest.

div.asishow {
    font-size: 50pt;
    color:#ff0000;
}

Any thoughts as to what I might be doing wrong or maybe I just don’t understand this how this inherits.

Thanks for any help or advice.

Paul

2

Ok, nevermind I figured it out. LOL

the issue was for some reason, that I had the text wrapped in <b>tags and somehow this was throwing off the css. I am now guessing that local tags throw off css from a file?

Anything anyone wants to add to further explain would be a great help.

Paul

3

If you’ve got
<body><div id=“section”><p><b>Some text<b></p></div></body>
then styling will be applied in this order:

First, anything for body {…}
then, anything for div {…}, #section {…} or div#section {…}
then, anything for p {…}
and last, anything for b {…}

Anything in b {…} that conflicts with styles higher up the chain will take precedence, even if the styles higher up the chain have a higher specificity. So as the last style you applied was b {font-size:9pt;}, that is what size the font will be.

(BTW, I assume this extract is from a print stylesheet? Just in case you didn’t know, using pt as a measurement in stylesheets used on screen is an offence punishable by punishment. You might as well set measurements in centimetres, furlongs or parsecs for all the good it will do you. Points are a physical measurement (1/72 inch), and telling a browser to render something on a screen using physical measurements is completely nonsensical)

4

Thanks Steve for your explanation in this. That clears up a lot for me as I plunge forward into this thing called CSS deeper. Also, thanks for the law on using pt as a measurement. Would you suggest px insteam or em. To be honest, I can’t say that I fully understand em but I can learn.

Thanks again

5

Idiots guide to ‘em’ - it’s based on the size of the text. 1em is the distance from the top of the tallest letter to the bottom of the lowest letter. So you can set font sizes in ems, which works just like %ages. You can also set object dimensions in ems, which takes the same measurement. Note that ems can be different sizes on the same page - if you have a header with a text size of 200% and you set a height of 2em, that will be bigger than a box in the main body text with a height of 2em, because the font size it is based on will be different.

For font sizes, I would generally use %, which works just like em but doesn’t trip over as many browser bugs. If you want to make headings bigger than regular text, set font-size:150% (or whatever scale looks right). Don’t set a size on the basic body text - let people see the site in the text size that they have as their browser default (which you can assume is the size of text they want to see).

For objects, it depends on the layout of your site whether you use px or em. If you use px, the box will be the size you’ve said, no matter what settings and text sizes the visitor has (although it will zoom with the rest of the page). If you use em, the box will be the same size relative to the size of the text - so if a user changes the font size (rather than zooming), or has a different font installed that’s a slightly different size, the box will adjust accordingly - this means you can reliably expect it to fit the same amount of text on a line.

If you think in terms of pixel perfect precision, ems can be confusing and challenging. But if you think in terms of content laid out on the page as text, and the rest of the page as being built around the text, they become a whole lot easier to get your head round, and a whole lot more flexible than set dimensions like px.