Webmaster Time Savers - External Style Sheet

Creating and maintaining a website or blog can be made easier by using a few simple time savers. An external style sheet is one of the easiest time savers that all websites and blogs should take advantage of.

Without going into a long history of style sheets, it is enough to know that style sheets give webmasters a way of controlling layout and presentation across all the pages in a website with only one file. This is incredibly useful when you have hundreds, thousands, millions of pages to manage. Even small websites of only five to ten pages can take advantage of the benefits of an external style sheet.

The benefits of using an external style sheet include:

• Content and Design are Separated
  By separating the content and design your markup can by clean. No more font tags, and other unnecessary tags. This also means using proper markup to describe your content. Using proper headings, paragraphs, lists and other elements.
• Simplify Maintenance
  Want to make a small change to the headings on your website. Edit your external style sheet and all your pages will reflect the change.
• Better Search Engine Ranking
  It has been my experience that search engines like websites that use styles sheets more than websites that are still using old table based layout. Switching to a style sheet layout might not rocket you to the top of the search engine results pages but it can help to improve your overall rankings. A website using an external style sheet has less code for the search engine spider to go through so it is more likely to index your content faster.
• Bandwidth
  By moving style and layout information into an external style sheet you save on overall bandwidth for your site. Web browsers will cache the style sheet and use it on all subsequent requests to your website. Your web pages will also be smaller to download from a table based layout saving you even move bandwidth. A great example can be found at A List Apart where they discuss the bandwidth savings of Slashdot moving to a css based layout. They estimated a 14gb of bandwidth savings a day!
• Website Speed
  Overall your website will be faster by using style sheets.

It is amazing how many sites don’t take advantage of external style sheets. Just looking at some notable websites today I discovered that Amazon.com uses an inline style sheet. Google.com with their minimal design, uses an inline style sheet along with font tags and a table layout! Even Yahoo.com, the number one website on the Internet according to Alexa uses an inline style sheet. Imagine how much these companies could save by moving the inline style sheet to an external style sheet that can be cached.

How To Link an External Style Sheet

You can link to an external style sheet in two ways. Both codes belong in the head section of your web page.

Using a link statement:
Notice the media element in the tag. If you are just worried about how the page will be display on a computer monitor use screen. If you don’t want to specify different style sheets for other medium such as print or tv, you can use all.

You can also import a style sheet using a command similar to the following:

or without using the complete url:

Overall using an external style sheet can save you an enormous amount of time with your website or blog and the benefits far out number any downsides that you might encounter. If your website or blog is not using and external style sheet consider switching to one.