SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    best way to link stylesheet

    i have been slowly teaching myself how to create websites and i have a question about linking to stylesheets in the html head section. is it better to use the link element or style element? what are the pros/cons of each? does it really matter?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Use the link tag as then your one stylesheet can apply to all your pages at once.

    If you use the style tag you lose most of the benefit of using styles because any changes to your page appearance will need to be separately applied to each page. Once you have thousands of pages that can take months to do what you can do with the link tag in seconds.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    If you use the style tag you lose most of the benefit of using styles because any changes to your page appearance will need to be separately applied to each page. Once you have thousands of pages that can take months to do what you can do with the link tag in seconds.
    I did that once, with a site made up of about 150 pages. I was very, very ignorant, and I paid the price. Never again.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by gallentr View Post
    i have been slowly teaching myself how to create websites and i have a question about linking to stylesheets in the html head section. is it better to use the link element or style element? what are the pros/cons of each? does it really matter?
    I'll second what Felgall has said - several of the big reasons to use CSS are around the fact you have one single sheet that all other pages link to.

    One point to consider is that anything you have in a <style>...</style> element overrides anything in a <link rel="stylesheet"> link in the case of a conflict. I would only ever use <style> for one-off ad hoc features that are only going to apply to a single page.

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    One point to consider is that anything you have in a <style>...</style> element overrides anything in a <link rel="stylesheet"> link in the case of a conflict.
    Only if the <style> tag appears after the <link> tag (assuming selectors have the same specificity).

    On the other hand, something in a style attribute will override declarations in an internal or external style sheet (unless they are declared as !important).

    Quote Originally Posted by Stevie D View Post
    I would only ever use <style> for one-off ad hoc features that are only going to apply to a single page.
    So would I (usually for forms). But, of course, you can use this equivalent for linking to an external style sheet,
    Code HTML4Strict:
    <link rel="stylesheet" type="text/css" href="/style.css" media="screen,projection">
    <!--Equivalent to-->
    <style type="text/css" media="screen,projection">
      @import url("/style.css");
    </style>
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Tommy, why would I do this? Not criticizing you, honestly asking. Seems redundant...so tell me why it's not.

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    The @import looks like it means you don't have to go fishing for the html page to change the style there.

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Only if the <style> tag appears after the <link> tag (assuming selectors have the same specificity).
    Is that true? I had always been led to believe that an embedded stylesheet had a higher specificity than a linked stylesheet.

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Albeit technically the LINK should go before the STYLE (if used) anyway. So generally speaking I suppose it is less of an issue in the first place.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    One reason why people used @import in a style tag instead of using a link tag was to hide the styles from Netscape 4 without needing to use the /*/*/ css hidden from NS4 /* */ hack.

    Another consideration is that there is only supposed to be one link tag per media. Browsers do actually accept more than one though so it isn't a problem unless you actually set up alternate stylesheets. With alternate stylesheets defined using link tags you can only have one of them active at a time as the view/style menu will automatically disable all but the one you select in the browser.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    Tommy, why would I do this? Not criticizing you, honestly asking. Seems redundant...so tell me why it's not.
    Do what? Use <style>@import</style> instead of <link>? Just a matter of taste, plus, as Stephen said, it's a simple way to prevent Netscape 4 from seeing CSS that it probably won't be able to handle (and which even crash it). You can even use it to block style sheets from IE7 and older, by specifying media types after the directive:
    Code HTML4Strict:
    <style type="text/css">
      @import url("/style.css") screen,projection;
    </style>

    I'm not saying you should use both ways to link to the same style sheet, of course!

    Quote Originally Posted by Stevie D View Post
    Is that true?
    You calling me a liar?

    Quote Originally Posted by xhtmlcoder View Post
    Albeit technically the LINK should go before the STYLE (if used) anyway.
    Why?
    There's nothing 'technical' that says so. The sub-elements in <head> can come in any order.
    Birnam wood is come to Dunsinane

  12. #12
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    You calling me a liar?
    Not at all, just surprised by what you wrote, and wondered if I'd misread it or you'd mistyped it!

  13. #13
    SitePoint Member
    Join Date
    Nov 2009
    Location
    West Midlands UK
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use <link for my site wide style sheets and then @import for style sheets specific to individual pages e.g. forms. This way the extra css is only loaded when the page is loaded.

  14. #14
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tommy
    [...]The sub-elements in can come in any order.
    Yes, according to the Recommendations. But we both know I was referring to best practice like if using 'META http-equiv' and 'charset' it goes prior to the TITLE, etc.

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's different. If the encoding declaration is to be useful at all, it must precede all other content – at least all other content that is outside the US-ASCII range.

    But the order of all other <meta>, <style>, <link>, <script> etc. elements is arbitrary.
    Birnam wood is come to Dunsinane

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    That's different. If the encoding declaration is to be useful at all, it must precede all other content at least all other content that is outside the US-ASCII range.
    Which it only can as an HTTP Header anyway. By the time the ua gets to the <meta> tag, it's already either been told by the server, or it's made a guess so that it CAN read the meta tag.

    But the order of all other <meta>, <style>, <link>, <script> etc. elements is arbitrary.
    Would be, if some browsers didn't puke on the order of <links> calling css vs <links> calling Javascript *coughfirefoxcoughcough*.

  17. #17
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, but the browser is stupid (I didn't mention any servers) and what if it needed to know if the Linked CSS file(s) were UTF-8, or something strange. Surely you don't write 100 lines of STYLE first just for them to end-up having a fight afterwards...

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    and what if it needed to know if the Linked CSS file(s) were UTF-8
    Only way my browsers know my stylesheets are utf-8 is because I save them that way and the server serves them that way. Otherwise, it would not know. The user might have set the browser to some charset though.

  19. #19
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Which it only can as an HTTP Header anyway. By the time the ua gets to the <meta> tag, it's already either been told by the server, or it's made a guess so that it CAN read the meta tag.
    If the server declares the encoding (using the charset attribute of the Content-Type header) the <meta> element is ignored.

    A <meta> HTTP equivalent is only used if the corresponding real HTTP header is missing. Declaring the character encoding doesn't mean the browser starts over and re-interprets everything (which is also why you can't specify the content type in a header equivalent), so anything outside the browser's default assumption (usually ISO 8859-1 or Windows-1252) needs to come after such a line.
    Birnam wood is come to Dunsinane

  20. #20
    Non-Member
    Join Date
    May 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Link is used to link up your external style sheet with your HTML. and the biggest advantage of using external style sheet is that you can control the look of all the pages with a single CSS. And if you want to apply some thing just on a single page then you should go for the internal style sheet and use style for it.


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
  •