Apply CSS; internal, external?

Discussion in 'Web Design and Development' started by AloeQ 007, Apr 3, 2010.

Most Liked Posts
  1. AloeQ 007, Apr 3, 2010

    AloeQ 007 macrumors newbie

    AloeQ 007

    Joined:
    Mar 28, 2010
    Location:
    Venice, CA
    #1
    I've been slightly confused on the best way to apply my style sheets. The only way I have tried so far is internal CSS. Is there a "proper" way I should be doing things? Are external CSS pages better for any reason?

    From what I can gather, if I have multiple pages, having an external CSS page seems like it could save me a lot of time but if I didn't want the exact same page on every page would it be possible to have a link to an external page for the "common basics" of each page AS WELL AS additional CSS information embedded internal?

    Hey thanks ahead of time!
     
    share
    + Quote Reply
  2. Dunmail, Apr 3, 2010

    Dunmail macrumors regular

    Joined:
    Mar 27, 2009
    Location:
    Skipton, UK
    #2
    There's no hard and fast rules, more a set of generally accepted guidelines.

    I tend to only have "internal" CSS if those styles are absolutely specific to that page and aren't too extensive, say a couple of selectors with a handful of rules in each.

    Everything else is in external, linked files. There will be an overall stylesheet used by every page on the site. If there are any sets of pages that require specific styles these pages will also link in a supplemental stylesheet.

    So yes, you can have multiple linked stylesheets.

    Code:
    
<!-- Generic stylesheet -->
<link rel="stylesheet" type="text/css" href="./style/screen.css" title="desktop" media="screen" >
<!-- Stylesheet for picture gallery pages -->
<link rel="stylesheet" type="text/css" href="./style/gallery.css" title="gallery" media="screen" >
     
    share
    + Quote Reply
  3. angelwatt, Apr 3, 2010

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Depending on how unique pages are you can specify a class or id on the body tag that is unique for each page. Then in your one external CSS file you can target individual pages as needed.

    HTML:
    <body id="page_home">
    Code:
    #page_home h1 {
 /* Styles specific to home page */
}
    If each page is radically different though then this would just have you creating a really large CSS file, though still may be worth it. Though, if your pages are radically different, why are they a part of the same site? Something to think about.

    I have different regions of my site that are different and I have a main external stylesheet that styles most of the page, but then an additional external CSS file for each region that gives styles that only effect it that way I don't have too large a file.
     
    share
    + Quote Reply
  4. Cromulent, Apr 3, 2010

    Cromulent macrumors 603

    Cromulent

    Joined:
    Oct 2, 2006
    Location:
    The Land of Hope and Glory
    #4
    It is worth pointing out that the more external pages need to be fetched per page view (external CSS, external JS etc etc) the slower the response time on that page will be.

    So for development work by all means keep everything separate files to make it easier to work with, but when it comes to production you should probably concatenate everything into one big CSS file and link that on every page. Same goes for JS. You should also remove any whitespace from your CSS and JS files as well to save on wasted bandwidth.

    It might sound like wasted time but on sites with heavy page views you can save yourself quite a bit of bandwidth and speed up page views a bit at the same time.
     
    share
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page