PDA

Click to See Complete Forum and Search --> : Inherited Values

jwgrafflin
08-12-2008, 01:06 PM
Is there a guide somewhere that lists what properties are inherited across most browsers?

For instance, if you specify font-family in the body, do you need to repeat it for p, or will it be inherited?
Declan1991
08-12-2008, 01:31 PM
W3Schools Reference (http://www.w3schools.com/css/css_reference.asp) has that information (on the individual pages), but trial and error is often quicker. As a general rule, text properties are inherited, but margin, padding, display, borders and layout information aren't. Opacity (or the equivalent) must be inherited, it cannot be stopped.
jwgrafflin
08-12-2008, 01:41 PM
So, if I set body {font-family: arial; font-size: 13px; color: #000000;}

then use classes for different background colors, body.blue {background-color: #000080;}

I shouldn't have to repeat the font settings, right? Just use <body class="blue">
ray326
08-12-2008, 02:05 PM
That's correct. You could also make the coloring more generally available by removing the body from the selector. In that case I think I'd make the class name more functionally clear; .blueback or something to that extent.
jwgrafflin
08-12-2008, 02:05 PM
According to W3Schools, the only inherited values are Font, List, Text (except for decoration), Table (border values only) and Content (quotes only).
Declan1991
08-12-2008, 02:06 PM
You can put the background color on the body tag too. That's not inherited either. So
body {font-family: arial; font-size: 13px; color: #000000; background-color:#008;}
The children won't be blue, but everything else is inherited.
ray326
08-12-2008, 02:20 PM
According to W3Schools, the only inherited values are Font, List, Text (except for decoration), Table (border values only) and Content (quotes only).
What you're working with there is actually cascade rather than inheritance. The former has to do with the way the styles interact; the latter with the way they are applied down the hierarchy of the DOM. E.g. if you apply a blue background to the body then divs that are children of the body will not have blue backgrounds, they will have the background applied to them which is transparent by default.
jwgrafflin
08-12-2008, 02:42 PM
So, I end up with a CSS file that looks like this:

body.white {
font-family: arial, verdana, helvetica;
font-size: 13px;
color: #000;
background-color: #008;
}

body.navy {
font-family: arial, verdana, helvetica;
font-size: 13px;
color: #000;
background-color: #fff;
}

body.lblue {
font-family: arial, verdana, helvetica;
font-size: 13px;
color: #000;
background-color: #ccf;
}

body.cream {
font-family: arial, verdana, helvetica;
font-size: 13px;
color: #000;
background-color: #ff9;
}

body.aqua {
font-family: arial, verdana, helvetica;
font-size: 13px;
color: #000;
background-color: #cff;
}

instead of the simpler version

body {
font-family: arial, verdana, helvetica;
font-size: 13px;
color: #000;
}

.white {background-color: #fff;}
.navy {background-color: #008;}
.lblue {background-color: #ccf;}
.cream {background-color: #ff9;}
.aqua {background-color: #cff;}


Guess it's just a matter of what works best for you.
ray326
08-13-2008, 01:17 PM
No, I'd go with the simpler version. The effect will be the same for the body but the simpler version will allow you to set backgrounds on any element where it makes sense.