How do I have all my styles on one css sheet, and then "call" on it from each page

Discussion in 'CSS' started by adsensenewb, Feb 20, 2006.

  1. #1
    I have a semi-large site, with probaly 120 styles or so. I am using dreamweaver. Having each page with its own css sheet is screwing stuff up becuase i will make changes on one page, and it will screw somthing up on another page. I know how to put all my styles on 1 css sheet, but what do you put on each seperate page to make it use that seperate css sheet?
     
    adsensenewb, Feb 20, 2006 IP
  2. noppid

    noppid gunnin' for the quota

    Messages:
    4,246
    Likes Received:
    232
    Best Answers:
    0
    Trophy Points:
    135
    #2
    
    <link rel="stylesheet" type="text/css" href="http://www.example.com/path/to/file.css" id="my_css" />
    
    HTML:
    Between the <head> tags.
     
    noppid, Feb 20, 2006 IP
  3. lorien1973

    lorien1973 Notable Member

    Messages:
    12,206
    Likes Received:
    601
    Best Answers:
    0
    Trophy Points:
    260
    #3
    <link rel="stylesheet" href="path to file" type="text/css">

    *bows to noppid's superior copy/paste skills* :D
     
    lorien1973, Feb 20, 2006 IP
  4. noppid

    noppid gunnin' for the quota

    Messages:
    4,246
    Likes Received:
    232
    Best Answers:
    0
    Trophy Points:
    135
    #4
    LMAO. I knew I was hurrying to beat someone! ;)
     
    noppid, Feb 20, 2006 IP
  5. exam

    exam Peon

    Messages:
    2,434
    Likes Received:
    120
    Best Answers:
    0
    Trophy Points:
    0
    #5
    not to interrupt the bowing, just be sure that goes between your HEAD tags. :)
     
    exam, Feb 20, 2006 IP
  6. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Do you want to make one external style sheet for the whole site, or one for each page?
    you can get very specific with css styles, I suggest using one style sheet, and giving each page its own ID
    eg
    <body id="page1">

    then in your style sheet you can make global styles:
    h1 {stle style stle}
    h2 {style style style}

    but say you want the anchor text on only page1 to be blue you then use the id

    #page1 a {color:blue} This only affects <a> tags which are a descendent of page1.
     
    jrd1mra, Feb 20, 2006 IP
  7. noppid

    noppid gunnin' for the quota

    Messages:
    4,246
    Likes Received:
    232
    Best Answers:
    0
    Trophy Points:
    135
    #7
    Good stuff jrd1mra. I'm certainly no css expert!
     
    noppid, Feb 20, 2006 IP
  8. jestep

    jestep Prominent Member

    Messages:
    3,659
    Likes Received:
    215
    Best Answers:
    19
    Trophy Points:
    330
    #8
    Try to keep your css file as global as possible. While it is a great tool to help you customize anything you want on each page, the css file will load before any browser content does, so you should keep the css file as small as possible.

    Making a huge css file will greatly slow down your visitor's initial visit.
     
    jestep, Feb 20, 2006 IP
  9. jrd1mra

    jrd1mra Peon

    Messages:
    243
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #9
    you can take it even further you can set specific styles for any element using selectors. using and id is the esiest way.
    You should have your styles be as global as possible its just easier and less of a headache. However I have never seen a style sheet so huge that it affects load time. They are just text and its hard to make them so large. If you have any questions about css I will be happy to help, you can just pm me.
     
    jrd1mra, Feb 20, 2006 IP
  10. adsensenewb

    adsensenewb Peon

    Messages:
    129
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Well, right now, since I am using dreamweaver 8, there is an internal style sheet on each html doc. When tyou change colors, fonts, sizes etc, dreamweaver automatically adds it to the style sheet on that page. I was making some changes to the homepage in dreamweaver. I changed some text to a very small size & unique color. A bit later, I opened up some of my other pages, and some of the text had been changed to that same style.

    I thought it may have been because each html had its own style sheet?
     
    adsensenewb, Feb 20, 2006 IP