View Full Version : a questiopn and a helpful comment about CSS

Bo Dill
03-05-2009, 06:26 PM
This is both a question and a comment about CSS from a newbe. After Googling, “CSS pros and cons”, I still haven’t found an answer to my question; are there SIGNIFICANT advantages in a single CSS Style sheet over styles on individual pages, aside from the obvious one (the ability to make changes in one place)?

Now for the comment. In checking out some of the various code editors, I found a free one named PSPad that lets you change an HTML page to CSS automatically. Naturally, it is not a 100% change, but it is pretty handy, and I have learned a lot about CSS from using it. Now, I have a few lines of CSS code on a few of my web pages (my site will probably not have more than a couple dozen pages), as well as a “.css” style sheet of my own creation. This is the reason for my question above. Since everything is working just fine in both Firefox and IE, I am wondering if there is a compelling reason to collect all the codes and put them on the style sheet, as opposed to leaving them where they are.

I’m hoping to get an answer, but also to put this information in front of other newbes, as this free editor has been so helpful to me.

As always, any advice will be appreciated.


03-05-2009, 07:24 PM
It's a question of personal preference. I would say the size of the site also plays a role. That is to say, if your site is a dozen-page brochure site, why not keep it all in one stylesheet since it won't be that long? On the other hand, managing hundreds of different CSS declarations can get overwhelming on one stylesheet--all the more reason to avoid divitis (http://csscreator.com/?q=divitis) and to be judicious and as sparing as possible when adding ids and classes.

I use multiple stylesheets. I used to add an extra sheet based on the site structure; that is, if I had a series of pages with some unique elements that I could confine to one sheet. Lately, though, I've been organizing my CSS based on global site properties (courtesy Cyan (http://codingforums.com/member.php?u=56455) for the idea). My markup <head> tags will contain one stylesheet link:

<link rel="stylesheet" href="css/styles.css" type="text/css" />

That CSS file will branch out into multiple stylesheets:

@charset "utf-8";
Theme Name: ---
Theme URI: http://www.domain.com/
Description: ---
Version: 1.0
Author: ---
Author URI: http://www.domain.com/
@import url(reset.css);
@import url(color.css);
@import url(typography.css);
@import url(layout.css);

wherein are contained CSS properties that pertain to the whole site. So the markup stays simple (one CSS link), I can add stylesheets just by modifying my styles.css file and what's probably the best benefit--the way the CSS files are labeled and structured reminds me to not use too many page-specific styles, but to keep things graphically consistent, which almost always leads to a more visually appealing site.

03-05-2009, 07:52 PM
The major ones are fewer HTTP requests (which on broadband connections are a majority part of downloads) and reduced file size.

Bo Dill
03-05-2009, 08:04 PM
msuffern and CyanLight,

Thank you both. I think my next move will be to compare all the Divs to see if any have strong similarities, and if so, combine them to reduce the total amount of code. The ones with similarities will then be moved to a single style sheet.

Thanks again,