SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I call several css sheets ?

    Hi,
    is it valid to call several css style sheets on a same page like:

    <link rel="stylesheet" href="http://www.mysite.com/sheet1.css" type="text/css" />
    <link rel="stylesheet" href="http://www.mysite.com/sheet2.css" type="text/css" />

    ?

    Cordially,
    Koros

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes

  3. #3
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya but you can also do this:

    HTML Code:
    <link rel="stylesheet" type="text/css" href="sheet1.css" />

    just import other sheets from sheet.css
    Code:
    @import 'sheet2.css';
    @import 'sheet3.css';
    @import 'sheet4.css';
    @import 'sheet5.css';

    Then you only need to put that link rel for sheet1.css once on a page, and whenever you decide to include or exclude any css files, you only have to change sheet1.css

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes you can; however, keep in mind that if you have two style rules that are identical in multiple style sheets, the last style sheet will take precedence and literally over-ride your previous rule.

    For example, if your first style sheet has p {background-color: red; color blue;} and your fourth style sheet has p {background-color: green; color: yellow; text-align: right;} (I know, an over-simplification, but bear with me); all the paragraphs will have a green background and yellow text, and will be aligned to the right, instead of a red background with blue text aliigned normally.

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean importing within the sheet1.css stylesheet?

    such as this:

    <<< code within sheet1.css file >>>
    @import 'sheet2.css';
    @import 'sheet3.css';

    * { margin: 0; padding: 0;}

    ... etc.
    <<< end code within sheet1.css file >>>

    Or are you talking about the actual HTML/XHTML page header?

    If so then I really do not see the benefits of doing it this way within the header of the html/xhtml page vs. just using multiple <link rel...> tags.


    Quote Originally Posted by lostseed
    Ya but you can also do this:

    HTML Code:
    <link rel="stylesheet" type="text/css" href="sheet1.css" />

    just import other sheets from sheet.css
    Code:
    @import 'sheet2.css';
    @import 'sheet3.css';
    @import 'sheet4.css';
    @import 'sheet5.css';

    Then you only need to put that link rel for sheet1.css once on a page, and whenever you decide to include or exclude any css files, you only have to change sheet1.css

  6. #6
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The advantage of having the list of stylesheet links within a linked stylesheet as above is that you can add or change the list of stylesheets without having to go through and change every page of the site - it saves a load of effort.

    Also having the linked stylesheet in the head of the document gets round the problem of FOUC and the @import in the linked stylesheet dumps out the elderly browsers that won't cope with the CSS.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2004
    Location
    ohio
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that is a first I have heard or seen of this method. Interesting

  8. #8
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Koros
    Hi,
    is it valid to call several css style sheets on a same page like:

    <link rel="stylesheet" href="http://www.mysite.com/sheet1.css" type="text/css" />
    <link rel="stylesheet" href="http://www.mysite.com/sheet2.css" type="text/css" />
    The correct answers are already given. I only wanted to add that that is what the Cascading in "Cascading Style Sheets" exactly stands for (unless I am misinformed ;-)).

  9. #9
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paulm
    I only wanted to add that that is what the Cascading in "Cascading Style Sheets" exactly stands for (unless I am misinformed ;-)).
    Although that is what the official definition refers to, I've always thought it more useful to think of the cascade in that you apply a rule to a parent element and it 'cascades' down through all the children and descendants. It seems like a lot of people new to CSS miss this point because you'll see their stylesheets cluttered with repeated rules on every element.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •