SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Linking external stysheet from external stylesheets?

    Is it possible to use @import url("stylesheetB.css"); in a external stylesheet such that we have a cascading linking effect?

    Eg: index.html will call stylsheet.css, which in turn calls stylesheetB.css

    Reason being I want to keep the html doc as clean as possible without all the messy imports.

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you @import something, your basically openinig that file up. Cutting the CSS and pasting all of it exactly where you just imported it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Eg: index.html will call stylsheet.css, which in turn calls stylesheetB.css
    Yes you can but be careful as it gets complicated if you have multiple imports. IE8 only allows six nested imports I believe.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul o'b View Post
    yes you can but be careful as it gets complicated if you have multiple imports. Ie8 only allows six nested imports i believe.
    3
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Well I don't believe this a good practice at all! Why do you think imports are messy?
    IMO it is really better to link to the css files from the HTML page!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It can be messy trying to fitgure out what styles come from where and if you have selectors of the same specificity that match, it can be confusing to figure out which wi9ll take presedence
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    3
    Yes it's only 3 - I stand corrected

    That means you have to be very careful indeed then.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Well I don't believe this a good practice at all! Why do you think imports are messy?
    IMO it is really better to link to the css files from the HTML page!
    There's a place for imports. Esp when there are a basic set of styles all pages share and then other styles that are much to different to go around undoing and overriding them. At least, that was the reason I needed to use @import once. The other option was having the special pages repeat a lot of CSS.

  9. #9
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dark Tranquility View Post
    Well I don't believe this a good practice at all! Why do you think imports are messy?
    IMO it is really better to link to the css files from the HTML page!
    Well actually I don't have a lot to import. I just have a main (stylesheet.css) and want to create another (customized.css) which overwrites some of the ones declared in the main.

    I thought I might as well import customized.css at the bottom of main (since its over writting the main). But I'm not sure if its CSS specificity at work, it doesn't seem to import.

    I tried shifting the import statement to the start of the main stylesheet, and it does import.

    Weird...does import have to be at the start? And, any tips on how to handle CSS specificity? Some times, I just couldn't get the CSS overwrite to work properly.

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can have @import anywhere.

    Just remember that whatever selectors you have (with the same specificity and targets the same element(s)) will always look to see which came later in the CSS.

    Otherwise then just calculate specificity
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ryan, weren't there browsers somewhere who cared where you put @import (import specifically, rather than the rest of the @rules)?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Ryan, weren't there browsers somewhere who cared where you put @import (import specifically, rather than the rest of the @rules)?
    The @import rules must precede all other rules (except the @charset rule, if present).

  13. #13
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I remember something also rather browser-specific... some sort of bug.

    It must have been the "media type" you can specify in IE.

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Ryan, weren't there browsers somewhere who cared where you put @import (import specifically, rather than the rest of the @rules)?
    I must have wrote that with no sleep. Paul is correct. @import must be at the top of your CSS file.

    For some reason I was thinking that PHP include()'s were the same as @import..rule wise anyway..bah no more all nighters..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •