Using top-level selectors
in [CSS]
|
Prev: Lack of end tag messes up form styling - a known bug?
Next: How to wrap text in <p> tag if the text has no spaces and isvery long
From: John Dann on 11 Apr 2008 05:14 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
From: dorayme on 11 Apr 2008 06:05 In article <kv9uv39l2pr6a1cf850j7dramcbu0v8rbh(a)4ax.com>, John Dann <news(a)prodata.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
From: Jukka K. Korpela on 11 Apr 2008 08:10 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/
From: Bergamot on 11 Apr 2008 09:08 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
From: Andreas Prilop on 11 Apr 2008 09:53
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 |