1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

The order of selectors in a stylesheet file

Discussion in 'CSS' started by tayiper, Jan 18, 2007.

0
  1. #1
    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
     
    tayiper, Jan 18, 2007 IP
  2. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #2
    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.
     
    AdamSee, Jan 18, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    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
     
    kk5st, Jan 18, 2007 IP
  4. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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 :p
     
    crazybjörn, Jan 18, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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):
     
    Dan Schulz, Jan 19, 2007 IP
  6. crazybjörn

    crazybjörn Peon

    Messages:
    270
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I do, and quite often, especially when I need multiple backgrounds to apply to the whole webpage :p
     
    crazybjörn, Jan 19, 2007 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    An exception to the rule, of course ;).
     
    Dan Schulz, Jan 19, 2007 IP
  8. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #8
    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
     
    tayiper, Feb 12, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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!
     
    Dan Schulz, Feb 12, 2007 IP
    tayiper likes this.
  10. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #10
    Thanks much one again!!


    tayiper
     
    tayiper, Feb 19, 2007 IP
  11. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #11
    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
     
    tayiper, Feb 20, 2007 IP
  12. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #12
    Is it because these "span" classes are inside "table" elements??


    tayiper
     
    tayiper, Feb 21, 2007 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    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.
     
    Dan Schulz, Feb 21, 2007 IP
  14. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #14
    Thanks you very much for your kindness ...


    tayiper
     
    tayiper, Feb 21, 2007 IP
  15. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #15
    /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, Feb 23, 2007 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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?
     
    Dan Schulz, Mar 1, 2007 IP