Benefits of Cascading Style Sheets

Once upon a time in web design land, web pages were coded entirely in HTML. The evolution of web design has introduced new, better ways of creating web pages. HTML was a very inefficient way of telling a web browser how to display a web page because every aspect of how words and pictures were displayed (including position, size, color, and font) had to be embedded in the page using HTML tags. These tags had to surround every piece of content. If you wanted to make a sub-head green you had to insert font tags that told the browser to make the words green. If you've ever viewed the source code of a web page you'll see HTML tags that describe such settings all over the place. These tags had to be repeated every sub-head occurrence. Formatting content in HTML was a lot of work. In fact, it used to be one of the largest line items in our web development proposals.

In addition to being cumbersome, the process was also inflexible. Imagine a site with hundreds of sub-heads all tagged to be green. Now, suppose you wanted to change the sub-heads to blue. Every instance of green tags would then have to be replaced with blue tags to implement the design change.

Cascading Style Sheets fixed this problem. Rather than embedding tags that tell a browser how to display content, CSS tags are used to tell the browser what the content is. So, rather than surrounding a sub-head with green tags, you surround it with sub-head tags. The style of the sub-head is defined separately in a single text file called the CSS file. Whenever the browser sees a CSS tag around some text identifying it as a sub-head, it looks to the CSS file to find out how the text should be displayed. Rather than having to fix every occurrence of sub-head text when a design specification changes, a single change to the CSS file affects every instance of sub-head text across the site. You can imagine how happy that makes a web site developer!

CSS has been around for a long time, but how aggressively it has been utilized has been a factor of both browser compatibility and browser support. If you think about a typical web page, there lots of aspects with regard to display. There is type color, size, font and leading, column widths, and inline images with borders and margins. There are links and roll-overs, navigation bars with drop downs, form widgets, graphics used for bullets, complex table layouts, images that align with text, and images that float in columns next to text. For every one of these elements there are multiple aspects to consider. Text, for example, has size, color and font as you would expect, but also leading, margins, and paragraph attributes. There can easily be hundreds of CSS settings to define the way a web page looks.