Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Apply CSS; internal, external?

AloeQ 007

AloeQ 007

macrumors newbie
Original poster
Mar 28, 2010
4
0
Venice, CA
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!
 
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" >
 
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.
 
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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back