Using top-level selectors

[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. 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

[dorayme]

Re: Using top-level selectors

In article <kv9uv39l2pr6a1 cf850j7dramcbu0 v8rbh@4ax.com>,
John Dann <news@prodata.c o.ukwrote:

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

[Bergamot]

Re: Using top-level selectors

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

[Andreas Prilop]

Re: Using top-level selectors

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%;}

>
<smalland <bigwill not have effect

Have you tested it? In which browser?

--
Bugs in Internet Explorer 7

http://www.unics.uni-hannover.de/nhtcapri/ie7-bugs

[Jukka K. Korpela]

Re: Using top-level selectors

Scripsit Andreas Prilop:

>>* {font-size: 100%;}

>>
><smalland <bigwill 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
<smalland <bigcontents 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/

[Andreas Prilop]

Re: Using top-level selectors

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

>>>* {font-size: 100%;}
>>>
>><smalland <bigwill 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 <bigand <small>. There must have been something more
dirty than quick in my test. :-(

Sorry again.

[Jeff]

Re: Using top-level selectors

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

[Jukka K. Korpela]

Re: Using top-level selectors

Scripsit Andreas Prilop:

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

>>>>* {font-size: 100%;}
>>>>
>>><smalland <bigwill 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 <bigand <small>.

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

On IE, if I use the browser's "accessibil ity settings" to tell her (him?
it?) to ignore font sizes set on web pages, then <smallis suddenly
smaller and <bigis 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 <h1and, apparently, <smalland <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/

[Felix Miata]

Re: Using top-level selectors

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/

[Ed Mullen]

Re: Using top-level selectors

Felix Miata wrote:

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

That doesn't demonstrate anything to me. Everything is quite legible to
me. Perhaps because I have a minimum font size set in my browser?

--
Ed Mullen

http://edmullen.net

Why do we say something is out of whack? What is a whack?

[Bergamot]

Re: Using top-level selectors

Ed Mullen wrote:

Felix Miata wrote:

>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

>
That doesn't demonstrate anything to me.

There's too much clutter on that page to demonstrate anything to me,
either. If, however, you set your browser's minimum font-size to 17px
like I do, the negatives of this stupid practice are pretty obvious when
you hit an infected page.

Everything is quite legible to
me. Perhaps because I have a minimum font size set in my browser?

The above page is mostly screenshots, so your own browser settings don't
have any effect.

--
Berg

[Felix Miata]

Re: Using top-level selectors

On 2008/04/11 23:21 (GMT-0400) Ed Mullen apparently typed:

Felix Miata wrote:

>To see demonstrated part of what makes it ridiculous, visit
>http://fm.no-ip.com/SS/Clagnut/eonsSS.html

That doesn't demonstrate anything to me. Everything is quite legible to
me. Perhaps because I have a minimum font size set in my browser?

No, as Bergamot alluded, the page is made up primarily of 3 screenshot
images. Without understanding the content text that describes each image, it
would be difficult to know the demonstration's purpose or understand the
problem 62.5% body styling presents. Additionally, if the 1" images in the
sceenshots do not measure 1" wide on your own screen, then the effect of the
demonstration will be skewed according to the amount of deviation.

http://fm.no-ip.com/SS/Clagnut/bbcnSS.html is similar, except that the
subject web page in the screenshots has not since been subjected to redesign.
In fact, it only just went public with the idiotic 62.5% styling method two
weeks ago.
--
"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/

[Bergamot]

Re: Using top-level selectors

Felix Miata wrote:

>
http://fm.no-ip.com/SS/Clagnut/bbcnSS.html is similar, except that the
subject web page in the screenshots has not since been subjected to redesign.
In fact, it only just went public with the idiotic 62.5% styling method two
weeks ago.

Somebody really needs to put a stop to this horrific practice. :-(

--
Berg

[Felix Miata]

Re: Using top-level selectors

On 2008/04/15 07:31 (GMT-0500) Bergamot apparently typed:

Felix Miata wrote:

>http://fm.no-ip.com/SS/Clagnut/bbcnSS.html is similar, except that the
>subject web page in the screenshots has not since been subjected to redesign.
>In fact, it only just went public with the idiotic 62.5% styling method two
>weeks ago.

Somebody really needs to put a stop to this horrific practice. :-(

Links to criticism of http://clagnut.com/blog/348/ need to be more widespread
than it and its progeny. I went to Google and entered merely clagnut. That
link's parent, "Web design and development..." , was the first hit, and it was
the second, titled "How to Size Text Using Ems". Searching on merely 62.5%,
it turned up hit #3. :-(
--
"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/

[John Dann]

Re: Using top-level selectors

On Wed, 16 Apr 2008 12:16:48 -0400, Felix Miata
<UgaddaBkidding .due2UCE@dev.nu lwrote:

>Links to criticism of http://clagnut.com/blog/348/ need to be more widespread
>than it and its progeny. I went to Google and entered merely clagnut. That
>link's parent, "Web design and development..." , was the first hit, and it was
>the second, titled "How to Size Text Using Ems". Searching on merely 62.5%,
>it turned up hit #3. :-(

I was fascinated by the vehemence with which my mention of this
practice was met. As someone trying to improve my grasp of CSS, I
picked up this 'tip' (in combination with subsequently setting the
default font size to 1.4em or whatever for body text) partly as a
result of the seemingly repeated hits in a (font-size CSS) search on
Google. But it was certainly reinforced by reading in a text that I
have to hand ('CSS and HTML Web Design' by Craig Grannell, which is
seemingly a reasonable guide to current CSS practice) 'the general
consensus in the industry is that the 62.5% method is the one to go
for'.

I'm sure that this sort of issue is very familiar to the cognoscenti
here, but for someone trying to improve their knowledge of CSS, it's
really quite difficult to know where to turn for an authoritative but
practical guide to best current CSS practice. Any suggestions?

JGD