There are several benefits to using cascading style sheets (CSS) in the design of a website, but they have lacked the attention it deserves partially due of a large learning curve needed to fully understand its capabilities. There has been a real emphasis recently on CSS because of the Web 2.0 movement in the industry over the use of table based designs.
Prior to CSS the presentation and structure layers of a website were considered to be one single presentation layer, and HTML tags where used to designate all aspects of design and layout. Now with the emergence of CSS, the presentation layer can be imbedded into the structure layer, grouped together within the structure layer file or separated out in to a separate CSS file to allow for a more modularly designed website.
To illustrate my point further, let’s say that the structure of a webpage is a wooden box, and you have 3 wooden boxes you would like to give as gifts to your friends. Now let’s say that paint represents the presentation layer, and all 3 of your friends want their boxes to be the same shade of blue. When you go to the hardware store to buy paint they are having a sale and 1 small bucket of paint (HTML) is $2.00, but each bucket is only able to cover one wooden box. The store also has a large bucket of paint (CSS) for $4.00, and this bucket has more than enough paint to cover all 3 boxes. What makes the most sense to purchase? Will you buy 3 individual buckets that will increase the amount of time needed to paint the boxes due to the having to open and mix the 3 buckets, or will you buy 1 large bucket of paint that saves you time and money because it is priced lower than the price of 3 small buckets. Plus you will only have to open and mix one bucket before I painting.
In addition, when paint on your friend’s box fades you will be able to maintain the box fairly easily if you purchased the larger bucket because you already have the extra paint left over from the original large bucket saving you more money and preventing you from having to waste time and money going back to the store to purchase another small bucket of paint.
As you can see, the use of external CSS reduces time and cost associated with the original development of a project and any maintenance that may be needed in the future.
As stated above, CSS promotes a more modularly designed web site. An example of this is to apply an external CSS file that defines the display properties of the body tag in a web page. Any file that includes this CSS file will all be forced in to displaying the contents within the body tag as defined in the CSS file. For example if the CSS file defines the body having a white background and a default font size, font family and font color, it will be displayed on every page. This is also very beneficial for maintenance because once CSS file is updated then all the changes will shown immediately by all pages.
This is especially important for my e-business site because I am starting a web development company and will have to create and update websites on daily basis. Any time saved by using a CSS based presentation layers will be spent focusing on generating more business for my company.