by David Hockenbroch

Created on: February 24, 2009   Last Updated: March 06, 2009

Good CSS will enhance the website experience for both the user and the designer, and can provide a handful of small benefits to the hosting service. It can save time, reduce the amount of resources required by the website, provide a uniform look across multiple pages on a website, make editing a website's layout a breeze, and in some cases, even save you some money on hosting fees.

External CSS files (files separate from the HTML files that contain the CSS information) are the best option. They save time for you because you can simply copy and paste a link to the CSS file into the header of each page that should use it, and because, should you want to make any changes to your CSS, you can do it in one place instead of in many files. Even if you use an embedded style sheet (you type all of the CSS information in the "head" section of the HTML document) you can copy and paste it all at once. If you do all of your formatting in-line (within the HTML elements) you'll have to find every single one that you want to change individually.

As an example, if your website uses the same header image on every page, you can create a table cell and set its id to "heading". You can then refer to that specific table cell in the CSS and set its background image to the image you want to use, and set the height, width, border, padding, spacing, and any other formatting you want in the CSS. Then, when you make another page for the website, rather than having to retype all of that information again as you would with in-line formatting, you can simply create a table cell and give it the same id again. Clearly, CSS provides an advantage for the designer here.

Another advantage from the designer's perspective is that it is very easy to create a uniform appearance. Since the style information can be set in one place, you can be sure that each page has, for example, the same font. Furthermore, if you decided you wanted to change the font for every page on your website, you could change it in the CSS file one time rather than having to access every individual page and change it. If you have a group of elements that need to look similar, you can give them all the same class and use that in the CSS. This is both a time (and headache!) saver for the designer, and an aesthetic benefit to the user.

An external CSS file can save the website's users some time too. Since the style sheet is a separate file, it will be stored as a temporary file in the browser's cache, and if no changes have been made to it since the last time the user visited a page that used it, the CSS file will not need to be downloaded again. If you use an embedded style sheet or in-line formatting, the same information must be downloaded again with every page the user visits. Having less for the user to download means better overall performance for your website.

Using external CSS also provides some benefit to the hosting service. Since the same information does not need to be repeated as often when using CSS, less space is needed on the web server. Also, because of the previously mentioned advantage involving browser caching, less bandwidth is used by those who visit your page. This is a benefit to the hosting service and, if you are billed based on bandwidth usage, can save you some money.

Leaning how to correctly use CSS - especially using external CSS - is all upside, and benefits anyone who is in any way involved with your website.

Learn more about this author, David Hockenbroch.
Click here to send this author comments or questions.