The user "WebJoel" wrote the following in the Further discoveries: display in Firefox vs. Intenet Explorer thread that I opened back then on WebDeveloper.com forum: So I am curious: is this true or it doesn't really matter??! thanks, tayiper
Doesn't really matter. Browsers nowadays (see FOUC problem back in the day) pre-load the styles before they render the page. However, it's usually good practice to keep it near the top, as your stylesheet becomes easier to maintain with a logical order.
It is a good plan. If, for example, if you set the color to green in body, all descendants of body inherit that color value. It becomes, in effect, the default. Good practice would dictate that defaults be declared at the top of the document, both for ease of human understanding, and for ease of debugging and maintenance. cheers, gary
Body doesn't come first, seeing that you can apply CSS to <html> as well. And even all elements at the same time with *. So if anything then things like * and html should come before body anyway
Yeah, but who really applies styles to the HTML element anyway? I always start a CSS file with the universal selector, then the body selector. For example (and this is just an example)... * { margin: 0; padding: 0; } body { background: #FFF; color: #000; font: 100%/1.2 Tahoma, "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif; } Code (markup):
Hey "Dan Schulz", sorry for a bit delayed reply, but could you please explain to me the purpose of this "universal selector" that you mentioned, to what "parts" of the site (i.e. elements) it applies etc.?? Is is maybe similar to applying properties to "html" element??! tayiper
The universal selector (the asterisk) applies to all elements (basically tags) on a Web page. In the example I used above, it strips every HTML tag of its margins and padding. By default, this will leave everything from the opening <html> and closing </html> tags (and everything in between) with no margins and padding. This gives me the option to explicitly set margins and padding where I want them, rather than having to guess which browser uses margins for this and padding for that, and compensating for each. CSS gives you control, you should use it!
Ehej sorry Dan, just one more thing: can you please tell me, why after doing so (i.e. I started to use the "universal selector") the "Enter the site's "intro.html" page by clicking this text" text/link (btw. for styling it I use style="font-size: 20px;" applied inline to an "a" element) below on my website's homepage (see my sig for link) is not 20px but 12px, I assume because of 12px font-size applied to "universal selector"?? /EDIT: While also on pages under my site's "root-main" section (for instance intro.html page), the font-sizes setting from most of the classes (see here main.css, root.css for the respective .css files: ) revert back to some obviously default big size (I specified in pixels not % so that I shouldn't "add them up") thanks again, tayiper
I won't be able to take a look at it right away (been pretty busy - and gone on top of that) but when I get back, I'll re-read your posts and figure out what the problem is.
/UPDATE: Also, I noticed that now the bolded links text's font-size (i.e. inside the <strong>; but oddly not the emphasized teks, i.e. <em> element) is 12 px as set by the "universal selector", and not 10 px as I've set it for "a" elements or hypertext links. And additionally I discovered some other strange things/quirks too, but luckily I mostly managed to "get around them" one way or another. tayiper
tayiper, I'm sorry I wasn't able to get back to you. I don't know if you frequent any other Web design/development forums or not, but if you don't, you might want to know that I've been sick the past week (still am). Do you sitll need me to look at this, or were you able to get it taken care of?