Sent by Philippe Wittenbergh on 3 July 2007 14:02
On Jul 3, 2007, at 10:16 PM, Michael Leibson wrote:
> I'm new to CSS,
Welcome !
> and have been doing small experiments as a means to understanding
> how it works.
That is the best way to start.
> I wanted to discover what kinds of attributes are applicable to the
> html element, and wrote the following primitive style:
I think you mean 'properties' :-)
Attributes are for HTML (the markup language). i.e. <html lang="en">
'lang' is an attribute.
>
>
> <style type="text/css">
> html {background-color: green;}
> body {height: 100%; background-color: blue;}
> </style>
>
>
> To my surprise, the body's specified background-color didn't
> display -- the page was the html's green. (I've tried finding the
> answer in Eric's book, but I find it very hard to isolate and
> locate one specific subject there.) Does this issue have to do
> with the body inheriting its parent's color -- even though the
> body's color was also specified via the style?
No. The <body> was empty, and collapsed.
html is the root element of the document.
Percentage based 'height' is applied/computed based on the height of
the parent element. (Html being the parent of body). If no height is
specified for the parent element, then a percentage based height
cannot be computed for the descendant.
In your code snippet above, only the intrinsic height of <html> is
known.
Different would be if you also specified a height for html
html {height:100%} (or height:1000em; whatever).
About background-color, see also [1] below.
> I then added some text (directly) to the body, and was surprised
> again -- this time to find that the body's background-color WAS
> applied -- but in a narrow band that had the same height as the
> text, and stretched across the page. Can anyone explain what's
> happening here, in terms of CSS principles?
Now you start 'seeing' the body, because it has content !
As I mention above, your specified height ' (100%) still cannot be
computed.
The specs a relatively clear about this.
<http://www.w3.org/TR/CSS21/visudet.html#propdef-height>
It is a good idea to read those documents, rather than reading books.
Lots of books are much oriented to deliver clear cut solutions that
work for the author. A good understanding of the basics is important.
An exception is Eric Meyer's book: 'Cascading Stylesheets, the
definitive guide'.
Your <body> is stretched across the page, because it is a block level
element. Block level elements are always as wide as their parent (in
this case, html, which in a web browser is as wide as the window in
which the document lives).
Unless, of course, if you specify a width on body (or any block level
element).
>
>
> Last, while I'm on the subject of html attributes:
>
> I've come across a few styles that apply the height, margin, and
> padding attributes to html. However, none of my own experiments
> have been able to show that these have any effect. I don't know
> whether this REALLY means that they have no effect, or that I'm
> simply not building a proper-enough situation through which to test
> it.
Those properties _really_ have an effect. Depending on your document,
you might not see them.
try
html {margin:1em; padding: 1em; border: thin solid white;
background:lime; color:white}
with an html document that is in standards (strict) mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>test</title>
</head>
<body>
<p> test</p>
</body>
</html>
The specified background-color will paint over the whole window [1].
But you'll see a bordered box, 1em away from the top, left, right
edges of the window. there will be a 1em space between that border
and the text.
[1] note on background (as applied to html and/or body).
The background-COLOR specified for the root element will always fill
the whole viewport (canvas/window).
If the background-color is applied to <body> but _not_ to html, then
that background-color will fill the viewport.
<http://www.w3.org/TR/CSS21/colors.html#q2>
For your original rules, if you don't specify a background-color on
html, then the whole window will be filled but the blue background-
color of your body rule-block.
Take it little by little step at the time, and don't be afraid to ask
questions. Css is really not difficult. The problem are the browsers,
which are sometimes buggy. Some are better than others, with some
being pretty bad/buggy (IE 6 windows, IE 7 is a tad less bad).
Firefox and other Gecko based browsers, Safari or Opera are much more
compliant with the standards and specs.
Have fun.
Philippe
---
Philippe Wittenbergh
<http://emps.l-c-n.com>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
