CSS Validation

[Jim Royal]

I'm rewriting the code on my site for table-less CSS layout. I'm proud
to say that both my page template HTML and CSS validates. However, I
receive the following warning on the CSS:

You have no color with your background-color : body
You have no background-color with your color : h1, h2, p, li, etc...

I thought the purpose of cascading style sheets was that they cascade
-- that if you set the background-color in a parent selector, all child
selectors inherit it. So why the warning? Is there really any purpose
in explicitly defining the background for all my other selectors as
transparent?

 

[Steve Pugh]

You have no color with your background-color : body
You have no background-color with your color : h1, h2, p, li, etc...

I thought the purpose of cascading style sheets was that they cascade
-- that if you set the background-color in a parent selector, all child
selectors inherit it.

That's not cascading. That's inheritence. Cascading is the combining
of styles from multiple stylesheets (e.g. an author stylesheet, a
user one and the UA default one) to create the final style.

So why the warning?

A user may have a stylesheet that sets a background colour for H1. Or
the browser default may not be what you expect. Assuming that it will
inherit the body background-color is then dangerous. So _always_ set
both background and foreground colours together. Relying on the values
'transparent' or 'inherit' can be risky and if used they must be
hidden from NN4.

Steve

 

[Nicolai P. Zwar]

I'm rewriting the code on my site for table-less CSS layout. I'm proud
to say that both my page template HTML and CSS validates. However, I
receive the following warning on the CSS:

You have no color with your background-color : body
You have no background-color with your color : h1, h2, p, li, etc...

I thought the purpose of cascading style sheets was that they cascade
-- that if you set the background-color in a parent selector, all child
selectors inherit it. So why the warning? Is there really any purpose
in explicitly defining the background for all my other selectors as
transparent?

No, as transparent is the standard anyway. That's why it is a "warning"
only, not a mandate. Just so you make sure that you didn't "forget" the
background-color of a parent selector which would make the content
unreadable.

 

[Jacqui or (maybe) Pete]

A user may have a stylesheet that sets a background colour for H1. Or
the browser default may not be what you expect. Assuming that it will

....

Whilst I agree, I must say that anyone with a user stylesheet that sets
a background color without setting a foreground color deserves whatever
they get...

 

[Steve Pugh]

Whilst I agree, I must say that anyone with a user stylesheet that sets
a background color without setting a foreground color deserves whatever
they get...

The user can have both set and the problem will stil arise.

If I have
H1 {color: foo; background: bar}
in my user stylesheet and you have
H1 {color: bar;}
in your author stylesheet, then I get my background and your
foreground. Whoops.

Steve

 

[Steve Pugh]

But users actually surfing with their own stylesheets usually have far
more things changed than just the background color for H1.

True, but it only takes one rule out of many to create a problem.

Only if the browser doesn't interpret the CSS rules correctly.

I hope that you're obliquely pointing out my error in that the initial
value of backgrond-color is transparent and not initial. I can't think
what else you mean.

Steve

 

[Jim Royal]

Thanks for the feedback. I'll take it all under advisement.

 

[Lauri Raittila]

But users actually surfing with their own stylesheets usually have far
more things changed than just the background color for H1.

Sure, they have also color for h1, but it won't help as it is overridden.

Only if the browser doesn't interpret the CSS rules correctly.

Is there some reason why browsers default value for color/background-
color for h1 need to be inherit? I see no reason why browsers default
couldn't be some other color. And with Opera you can change default color
of H1 from preferences, not knowing anything about CSS.

 

[Lauri Raittila]

No, as transparent is the standard anyway. That's why it is a "warning"
only, not a mandate. Just so you make sure that you didn't "forget" the
background-color of a parent selector which would make the content
unreadable.

No, that's not so, as others explained. You can't trust inheritance, nor
color of containing block. Don't count on them, unless you have no choise

 

[Nicolai P. Zwar]

True, but it only takes one rule out of many to create a problem.

Also true, but if you are surfing with your own stylesheet and have only
ONE thing -- e.g. color for H1 -- changed, then you're doing it on your
own risk.

I hope that you're obliquely pointing out my error in that the initial
value of backgrond-color is transparent and not initial.

Well, we are talking about "background-color: transparent;" all along.
Of course, if you want to use anything else, you're better off
specifying it.

I can't think
what else you mean.

I mean that <body style="background-color: yellow;"><h1 style="color:
blue;"> should give you a blue headline on a yellow ground (unless other
rules specifically override this), because H1 background is transparent,
unless anything else is specifically requested.

 

[Jacqui or (maybe) Pete]

The user can have both set and the problem will stil arise.

....

Ah, yes. I was having a 'Homer' moment, and we're not talking blind
greek poets here...