body vs html

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Joe - 25 Apr 2005 18:33 GMT

If you display the styles in use at Yahoo.com, you can see some
interesting things. For example, this:
html>body{font:84.5%/122% arial;}
I tried creating a sample page using this style and it didn't do
anything. Anyone know whether having this ">" is real code or a syntax
error? I'm not sure what that "/" does in the font style, either. Or
the difference in a stylesheet between an html style and a body style.
Finding a CSS reference that discusses these advanced topics would help
me a great deal. Could someone point me to a book or an on-line
reference that discusses these? Thanks.

Reply to this Message

Harlan Messinger - 25 Apr 2005 18:48 GMT

> If you display the styles in use at Yahoo.com, you can see some
> interesting things. For example, this:
> html>body{font:84.5%/122% arial;}
> I tried creating a sample page using this style and it didn't do
> anything.

The syntax

    X>Y (or X > Y)

means "a Y that is an immediate child of an X". It's different from

    X Y

which means "a Y that is contained in X at *any* level".

While Internet Explorer thinks that "X > Y" is "X Y" (IIRC),
interpreting it wrongly, it ignores "X>Y" altogether. This makes

    X>Y { /* some properties */ }

a hack for situations where properties should be set for use by some
browsers but not by IE.

Getting back to your observation: if you're using IE, exactly--the
declaration will have no effect.

> Anyone know whether having this ">" is real code or a syntax
> error? I'm not sure what that "/" does in the font style, either.

The shorthand "font: 84.5%/122% arial" means the same thing as

    font-size: 84.5%;
    line-height: 122%;
    font-family: arial

> Or
> the difference in a stylesheet between an html style and a body style.

In this particular case, since the HTML tag is the parent of the BODY
tag, html>body is the way to declare page-wide styles specifically for
non-IE browsers.

> Finding a CSS reference that discusses these advanced topics would help
> me a great deal. Could someone point me to a book or an on-line
> reference that discusses these? Thanks.

Everything about CSS is explained at http://www.w3.org/TR/CSS2/.

Reply to this Message

Joe - 25 Apr 2005 22:13 GMT

Thank you for your very helpful response. While that reference at W3
is a little hard to sort through, it does provide me with the
terminology I need to proceed. I thus found the ">" notation in my own
CSS reference under a chapter called "A Look Ahead".

Based on your answer, I assume that the HTML style and BODY style, when
used by themselves, are equivalent and interchangeable -- in spite of
seeing both at Yahoo like this:

html { ... }
body { ... }

Reply to this Message

Steve Pugh - 25 Apr 2005 23:14 GMT

>Based on your answer, I assume that the HTML style and BODY style, when
>used by themselves, are equivalent and interchangeable

No. One selects the html element and one selects the body element.
They are different even if normally there's very few ways to see the
difference.

Steve

Signature

"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

Reply to this Message

Harlan Messinger - 26 Apr 2005 16:14 GMT

> Thank you for your very helpful response. While that reference at W3
> is a little hard to sort through, it does provide me with the
> terminology I need to proceed. I thus found the ">" notation in my own
> CSS reference under a chapter called "A Look Ahead".
>
> Based on your answer, I assume that the HTML style and BODY style,

HTML and BODY aren't styles, they're selectors.

> when
> used by themselves, are equivalent and interchangeable -- in spite of
> seeing both at Yahoo like this:
>
> html { ... }
> body { ... }

No. Try this and see what happens:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>HTML Selector</title>
        <style type="text/css">
            html { background-color: green; }
            body { background-color: red; }
        </style>

    </head>
    <body>
        <p>What's the difference?</p>
    </body>
</html>

Reply to this Message

Disco Octopus - 27 Apr 2005 14:17 GMT

Harlan Messinger wrote on 27/04/2005 :

>> Thank you for your very helpful response. While that reference at W3
>> is a little hard to sort through, it does provide me with the
[quoted text clipped - 29 lines]
> </body>
> </html>

I tried this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Selector</title>
<style type="text/css">
html { background-color: green; }
body { background-color: red; }
</style>

</head>
<body>
<p><a href="http://www.souths.com.au">South Sydney</a></p>
</body>
</html>

...and still got some dodgy football team colours.

Signature

a beef jerky site http://www.choicebeefjerky.com.au
not a beef jerky site http://mycoolwheels.com/vote.cmks
eat beef jerky

Reply to this Message

Joe - 27 Apr 2005 21:46 GMT

Wow. Now I understand. Thank you.

Reply to this Message

Nisse Engström - 26 Apr 2005 09:59 GMT

> While Internet Explorer thinks that "X > Y" is "X Y" (IIRC),
> interpreting it wrongly, it ignores "X>Y" altogether.

According to my tests with IE5.5, it is more complicated
than meets the eye:

Selector Is equivalent to
-------- ----------------

A > B B
A >B B
A> B A B
A>B AB

This has interesting implications when using class
or id selectors:

.A>B .AB
A>.B A.B
#A>B #AB
#A>.B #A.B

Note also the following special cases:

.A.B .B
#A#B #B
*A *

> This makes
>
> X>Y { /* some properties */ }
>
> a hack for situations where properties should be set for use by some
> browsers but not by IE.

Watch out for S>U>B and A>B>BR. :-)

--n

Reply to this Message

Felix Miata - 30 Jun 2005 22:35 GMT

On 05/04/25 13:48 Harlan Messinger apparently typed:

>> Anyone know whether having this ">" is real code or a syntax
>> error? I'm not sure what that "/" does in the font style, either.

> The shorthand "font: 84.5%/122% arial" means the same thing as

> font-size: 84.5%;
> line-height: 122%;
> font-family: arial

Strictly speaking, I don't think so. The spec
http://www.w3.org/TR/CSS21/fonts.html#font-shorthand seems to read:

    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 84.5%;
    line-height: 122%;
    font-family: arial

which when not at the html>body cascade level will prevent the specified
styles from inheriting any previously specified font-style, font-variant or
font-weight rules.

Signature

"Love does not demand its own way." 1 Corinthians 13:5

Team OS/2 ** Reg. Linux User #211409

Felix Miata *** http://members.ij.net/mrmazda/auth/

Reply to this Message

Joe - 01 Jul 2005 00:01 GMT

Felix. Thanks for providing new input to an old thread. I may have
once been stumped by this behavior. Now I understand why.

Reply to this Message

Mr. Wilson - 25 Apr 2005 18:55 GMT

> If you display the styles in use at Yahoo.com, you can see some
> interesting things. For example, this:
[quoted text clipped - 6 lines]
> me a great deal. Could someone point me to a book or an on-line
> reference that discusses these? Thanks.

For starters:
http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS21/fonts.html#font-shorthand

--Mr. Wilson

Reply to this Message

Allen Watson - 26 Apr 2005 22:49 GMT

> Could someone point me to a book or an on-line
> reference that discusses these?

Try O'Reilly's CSS Pocket Reference and HTML Pocket Reference.

Signature

Allen Watson
MVP for Office (Entourage, Word)
http://homepage.mac.com/allen_a_watson/
HELP for Entourage: http://entourage.mvps.org

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2005

body vs html