A confusion: referring to more than one external stylesheet

Discussion in 'CSS' started by tayiper, Jun 9, 2006.

  1. #1
    Hey all after some time ...


    Please consider this example below (I've seen this code on many sites):
    <link rel="stylesheet" type="text/css" href="/tct_layout.css" title="Default" >
    <link rel="stylesheet" type="text/css" href="/tct_colors.css" title="Default" >
    <link rel="stylesheet" type="text/css" href="/tct_navbar.css" title="Default" >
    Code (markup):
    ... we apparantly have three separate stylesheets (i.e. "tct_layout.css", "tct_colors.css", "tct_navbar.css"), so I am curious, how we refer each one of them from the documents body ?? I mean, I haven't noticed any special "token" in the code that would say for instance: in this particular case/element use the tct_layout.css one one, in this the tct_colors.css one, and in this case the tct_navbar.css one.


    P.S. -- And additionally, what's the purpose of the title="Default" attribute (if there is any at all) ??


    thanks in advance, tayiper
     
    tayiper, Jun 9, 2006 IP
  2. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #2
    You don't. When your browser reads in stylesheets it puts them all into memory at once (sort of like one big stylesheet). No matter what stylesheet the rule was defined in, as long as your browser knows about it (because it was defined in at least stylesheet) you can reference it by it's selector name. Styles can also be overridden. If you define a style in stylesheet #1, and then define the same style in stylesheet #3, you rules you write in stylesheet #3 will override any styles already established from stylesheet #1. For example, if I had 3 stylesheets with these rules...

    styles001.css
    
    p.red { color: red; }
    
    Code (markup):
    styles002.css
    
    p.green { color: green; }
    
    Code (markup):
    styles003.css
    
    p.blue { color: blue; }
    
    Code (markup):
    I could refer to them in my document simply by referring to their class names. For example...

    HTML Document
    
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles001.css" />
    <link rel="stylesheet" type="text/css" href="styles002.css" />
    <link rel="stylesheet" type="text/css" href="styles003.css" />
    </head>
    <body>
    <p class="red">This text will be red</p>
    <p class="green">This text will be green</p>
    <p class="blue">This text will be blue</p>
    </body>
    </html>
    
    Code (markup):
    The title attribute is used when you want to allow users to choose between different style sheets (for example you if you offer one stylesheet with large fonts and another with small fonts). The name of each stylesheet that is shown to the user is what's in the title attribute. You can read more here from the W3C...

    Specifying external style sheets
     
    brian394, Jun 9, 2006 IP
  3. tayiper

    tayiper Active Member

    Messages:
    421
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    78
    #3
    Thanks much for the quick reply ...


    tayiper
     
    tayiper, Jun 10, 2006 IP