473,890 Members | 1,885 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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
Apr 11 '08 #1
7 2694
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
Apr 11 '08 #2
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
Apr 11 '08 #3
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/

Apr 11 '08 #4
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.
Apr 11 '08 #5
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
Apr 11 '08 #6
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/

Apr 11 '08 #7
On 2008/05/30 12:58 (GMT-0500) Bergamot apparently typed:
Felix Miata wrote:
>FF3 seems to behave like Safari.
Even if it does, that doesn't make clagnut a good practice. It's still a
ridiculous, convoluted and illogical way to set font sizes.
Quite true. However, the problem is limited mainly to Opera users and the
idiot designers making their own jobs more complicated. Natural selection
should cull the number of those idiot desingers, eventually leading to the
takeover of sanity. Meanwhile, Opera is liable to see the light discovered by
Safari and Gecko.
--
". . . . in everything, do to others what you would
have them do to you . . . ." Matthew 7:12 NIV

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

Felix Miata *** http://fm.no-ip.com/
May 31 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

14
2158
by: Carl Gilbert | last post by:
Hi I am currently writing a site that utilises tables. I have one page that links to a second page. The only problem is that when I link to the second page, the table loads up with a different height than was set in the code. However, when I use the navigation buttons in IE to go back and then forward again to the second page, the table is displayed as expected.
0
6711
by: Nashat Wanly | last post by:
HOW TO: Call a Parameterized Stored Procedure by Using ADO.NET and Visual C# .NET View products that this article applies to. This article was previously published under Q310070 For a Microsoft Visual Basic .NET version of this article, see 308049. For a Microsoft Visual C++ .NET version of this article, see 310071. For a Microsoft Visual J# .NET version of this article, see 320627. This article refers to the following Microsoft .NET...
2
4348
by: KathyB | last post by:
Hi, I have the following script in an aspx html: <script language="javascript"> function pop_window() { var confirmWin = null; confirmWin = window.open('Scanned.aspx', 'SerialNumbers', 'width=300,height=400,left=200,top=200,toolbar=no,resizable=no,menubar=no'); } </script>
5
2157
by: ElanKathir | last post by:
Hi ! I wrote one code for Send the E-mail, But that code have some problem , So please help me Here i paste my code and Error: Error: Server Error in '/Elan_Sample' Application. --------------------------------------------------------------------------------
1
1586
by: Rahul | last post by:
Hi, I tried many option, but did not found solution. Same Validation Error showing. If I have convert one table, it can easily converted. But If I have paste another table in same file, then showing validation Error. This Error is -- =======================================================
9
2123
by: Nathan Sokalski | last post by:
I am using ASP.NET 2.0's ImageMap Control to create 2 imagemaps, one directly below the other. When I do this a thin blank space appears between them. After several days of frustration I realized that the difference between what the ImageMap Control outputs and the html on the page I was trying to reproduce with ASP.NET 2.0 was the following: Handwritten HTML imagemaps (no whitestrip between them): <table>
8
2815
by: rbg | last post by:
I did use query plans to find out more. ( Please see the thread BELOW) I have a question on this, if someone can help me with that it will be great. In my SQL query that selects data from table, I have a where clause which states : where PermitID like @WorkType order by WorkStart DESC
2
2477
by: davidson1 | last post by:
Hai friends..for menu to use in my website..i found in one website....pl look below website.... http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm i downloaded 2 files.... menuitems.js mmenu.js
3
1812
by: nathanwb | last post by:
I have the following php code, at the top I am pulling a piece of data from a query and I echo the results with no problem, I am using Ajax with this page as well and further down the page when I try to reference the same $radio it dosnt show anything. Line 7 is where i get the current radio number assigned to the person that is loged in. and line 80 is where I try to use it again. Thanks <? include('../application.php');...
3
3917
by: happyse27 | last post by:
Hi All, I am creating the perl script using html form(with embedded javascript inside). When using this html form with javascript alone, it works where the form validation will pop up javascript windows to say the field is not keyed into properly. However, when i convert this html(with javascript inside) into perl script, the perl script did not validate when i keyed incorrect data in the form and it straight away executed perl script...
0
9812
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11212
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10799
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
9614
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
8004
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7154
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
6032
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
4255
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3263
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.