Using top-level selectors

I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body. I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.

Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors (if I've
understood this aright), ie

* {margin: 0; padding:0;}

But then the general (not universal I know) recommended approach for
font-sizing seems to be something like:

html {font-size: 100%;}

body {font-size: 62.5%;}

I was then wondering if it was necessary to have rules for all three
of *, html and body, but I presume that it wouldn't be sensible to set
font-size within the * declaration to avoid unwitting effects on
font-size inheritance (ie cascades of 90% multiplied together). Though
having said this, is there any reason why:

* {font-size: 100%;}

couldn't replace the html rule?

Sorry - this isn't a very specific question but I guess I was just
wondering whether there was any web article that discussed the
relative use of these 'top-level' selectors in more detail?

JGD

In article <kv9uv39l2pr6a1cf850j7dramcbu0v8rbh (AT) 4ax (DOT) com>,
John Dann <news (AT) prodata (DOT) co.uk> wrote:

I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body. I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.

Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors (if I've
understood this aright), ie

* {margin: 0; padding:0;}

If you do this as a general practice for your websites, be prepared to
set your own margins and paddings for the major elements. Each browser
gives you defaults for elements based on common usage. For example, a
set of paragraphs without top or bottom spaces are not much use! The
browsers make reasonable guesses of what is mostly acceptable but do not
always agree with each other. Mostly however, these defaults are a
product of team effort and sensible research of common practice.
Something you need to consider if you want to substitute your own.

Some authors, however, are reluctant to rely on these and are aggrieved
by browser variations - not all browsers have *quite* the same defaults!
These authors often chase pixel perfect designs when they are not
chasing rainbows. Now and then, sensible and competent authors do it for
better control generally, in particular designs.

But then the general (not universal I know) recommended approach for
font-sizing seems to be something like:

html {font-size: 100%;}

body {font-size: 62.5%;}

The default is 100%. Some authors like to set 100% on body to get over a

bug or a peculiarity in Internet Explorer browsers. Forget about html,
just do it on body and be done. Don't even think of 62.anything% unless
you are savvy about some special system of font-size control. It is too
tiny generally.

Why don't you read

<http://www.w3.org/QA/Tips/font-size>

and follow links at the bottom.

--
dorayme

Scripsit John Dann:

I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body.

They are quite different beasts, though they might all be used to set
some properties "globally". However, only * is really global, i.e.
refers to all elements. The html and body selectors each refer to a
single element only, and only via inheritance (_when_ it happens) or
indirect effect will their properties affect any inner elements.

By "indirect effect" I mean things like the default transparency of
backgrounds. (If you set body background to yellow, then any heading,
paragraph, table, or any inner element does _not_ inherit that
background. But it will by default appear with yellow background, and
that's because the default is background: transparent.)

I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.

For font sizes, the prime directive is "Don't".

However, the practical exception is
body { font-size: 100%; }
in order to overcome some browser bugs.

Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors (if I've
understood this aright), ie

* {margin: 0; padding:0;}

I'd call it snake oil, but others like it (and sell it).

But then the general (not universal I know) recommended approach for
font-sizing seems to be something like:

html {font-size: 100%;}

You can do that, but what visible content you expect the html element to
contain that is not inside body?

body {font-size: 62.5%;}

That's illegal in any civilized country. And according to a recent
newsflash from &Hell;, people using such a rule will spend the eternity
reading, as a full-time job, text displayed in a font size that well
below reasonable for their vision but barely, barely legible.

Though
having said this, is there any reason why:

* {font-size: 100%;}

couldn't replace the html rule?

There is. It destroys font size variation, so headings will have the
same font size as copy text, <small> and <big> will not have effect,
etc. Form fields will appear in copy text size, as opposite to the
common browser default of about 90%. Now _this_ might well be a _good_
thing, but it shouldn't happen just because the author threw in a "one
size fits all" rule.

Of course you can, and often should, tune the default variation in font
size (e.g., <h1> is usually too big to be reasonable), but if you will
set specific font sizes, why would you start this by setting everything
to 100%?

There might be a reason why some element's font-size is other than 100%
by browser (or user) defaults. We should not interfere with things we do
not understand and do not intend to handle properly.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

John Dann wrote:

Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet

* {margin: 0; padding:0;}

That's debatable. My preference is to leave everything at defaults and
only specify those elements I know I want to override. That keeps the
stylesheet trimmer than over-specifying everything.

body {font-size: 62.5%;}

Wrong, wrong, wrong!!! *Never* do this. There is a ridiculous practice
out there of setting this tiny font-size on body, then making it larger
for individual sections of a page, like 1.3em for content. It is *BAD*.

Set body text to 100%, period. If you insist on using a smaller size for
content, don't do it this stupid way.

--
Berg

On Fri, 11 Apr 2008, Jukka K. Korpela wrote:

That's illegal in any civilized country.

Is there any civilized country on this planet?

* {font-size: 100%;}

small> and <big> will not have effect

Have you tested it? In which browser?

--
Bugs in Internet Explorer 7
http://www.unics.uni-hannover.de/nhtcapri/ie7-bugs

Scripsit Andreas Prilop:

* {font-size: 100%;}

small> and <big> will not have effect

Have you tested it?

I took it for granted that browsers don't get such a simple thing wrong.
Besides, I was describing the _defined_ effect of the rule.

In which browser?

Now that you asked, I tested it on IE 7, and it correctly displays
<small> and <big> contents in the enclosing element's font size (that
is, copy text size), when the style sheet above is used.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Fri, 11 Apr 2008, Jukka K. Korpela wrote:

* {font-size: 100%;}

small> and <big> will not have effect

Have you tested it?

I took it for granted that browsers don't get such a simple thing wrong.

I'm sorry for the confusion. Obviously, I got such a simple thing wrong.
I had made a quick-and-dirty test for the above and noticed different
font sizes for <big> and <small>. There must have been something more
dirty than quick in my test. :-(

Sorry again.

John Dann wrote:

I'm unclear as to how best to use what I'm terming the top-level CSS
selectors, by which I mean selectors like *, html and body. I'm coming
at this from trying to understand how best to set font sizes but I
seem to have strayed into a broader question.

I don't really know what the pragmatic difference is between * and
body, but I did run some tests.

I still have to work on transitional (quirks mode) doctypes. (nested
table client). Generally you don't want to take a complex transitional
layout to strict unless you have a lot of time on your hands to fix the
box model and don't mind pissing off the client.

In quirksmode, body does not style td, whereas * does (IE and FireFox,
windows). It's usually a good idea to set a default font-family and color.

That quirk must go back to NS4, IE4 days... I just now realized that
strict fixed it.

Jeff

Some CSS guides seem to suggest that a * declaration is good practice
for any style sheet, primarily I suppose to set zero defaults for
margin and padding for all other relevant selectors (if I've
understood this aright), ie

* {margin: 0; padding:0;}

But then the general (not universal I know) recommended approach for
font-sizing seems to be something like:

html {font-size: 100%;}

body {font-size: 62.5%;}

I was then wondering if it was necessary to have rules for all three
of *, html and body, but I presume that it wouldn't be sensible to set
font-size within the * declaration to avoid unwitting effects on
font-size inheritance (ie cascades of 90% multiplied together). Though
having said this, is there any reason why:

* {font-size: 100%;}

couldn't replace the html rule?

Sorry - this isn't a very specific question but I guess I was just
wondering whether there was any web article that discussed the
relative use of these 'top-level' selectors in more detail?

JGD

Scripsit Andreas Prilop:

On Fri, 11 Apr 2008, Jukka K. Korpela wrote:

* {font-size: 100%;}

small> and <big> will not have effect

Have you tested it?

I took it for granted that browsers don't get such a simple thing
wrong.

I'm sorry for the confusion. Obviously, I got such a simple thing
wrong. I had made a quick-and-dirty test for the above and noticed
different font sizes for <big> and <small>.

Well I can't tell what _you_ did, but _I_ observed something
superficially strange:

On IE, if I use the browser's "accessibility settings" to tell her (him?
it?) to ignore font sizes set on web pages, then <small> is suddenly
smaller and <big> is bigger, despite the above CSS setting that tells
everything to be 100%.

On second thought (or maybe third - I lost the count), it's not that
weird. The setting tells IE to ignore "physical" font size settings,
which in practice means CSS settings and <font size ...>, but it still
honors "logical" markup such as <h1> and, apparently, <small> and <big>,
i.e. the browser's default font sizing is used for them, contrary to
anything the author might have said in CSS.

So it's odd, and on the other hand it's even.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 2008/04/11 08:08 (GMT-0500) Bergamot apparently typed:

John Dann wrote:

body {font-size: 62.5%;}

Wrong, wrong, wrong!!! *Never* do this. There is a ridiculous practice
out there of setting this tiny font-size on body, then making it larger
for individual sections of a page, like 1.3em for content. It is *BAD*.

To see demonstrated part of what makes it ridiculous, visit
http://fm.no-ip.com/SS/Clagnut/eonsSS.html
--
"Either the constitution controls the judges, or the
judges rewrite the constitution." Judge Robert Bork

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

Felix Miata *** http://fm.no-ip.com/