This article is not about how to write or use cascading style sheets (CSS). It is an overview of what they are and of their benefits to the web designer and their clients.
What Is a Style Sheet
Soon after the creation of the first web site, Web designers noticed that they were endlessly retyping the same instructions to define fonts, colours, and many other attributes in their HTML code. Not only that, but whenever they wanted to change the style of heading throughout a web site they would have to manually change each heading individually. This was very time consuming, especially for large sites.
There had to be a better way, a way to somehow separate the instructions that define the appearance of the layout of the content (text, graphics, etc) from the content itself. The style or theme of the web site would be contained in a separate file from the rest of the site. The theory being that in order to change the appearance of the web site all one had to do was change the code in the style file and the entire website would change its appearance.
This "style file" would eventually be called, for reasons that will become clear, a cascading style sheet and they have been around since the mid-90s in one form or another.
Advantages of using CSS include:
Presentation information for an entire website or collection of pages resides in one centralised place, and can be updated quickly and easily
Different users can override the default style sheets specified by the designer and use their own preferred style sheet allowing a great deal of customisation to occur to meet individual users needs. For example people with a vision impairment could plug in their own "large high contrast fonts" stylesheet to make web sites more accessible for them without changing any other aspects of the site.
- Easy maintenance
The document code is reduced in size and complexity, since it does not need to contain any presentational mark-up code. Having all the styles for the web site in one place makes it easy to modify as one file controls the physical appearance of potentially thousands of web pages which use it.
The idea behind abstraction is a simple one. Identify all the elements common to a set of objects and remove them to a parent object. If the parent is changed all its children will automatically come out different.
Generally speaking the more abstract something is, and the more useful it is as well as it can be used in a broader range of applications. Constructing an abstract stylesheet that defines sans serif fonts is an example. This would negate the necessity to constantly create style sheets with sans serif fonts in them. You just plug the sans serif stylesheet into your web page in the correct place and it will cascade down through the other style sheets redefining all the font properties.
Cascading style sheets
Cascading means inheriting. It is the mechanism by which parent style sheets propagate their definitions to their children. This advanced concept is an extremely useful one. If we create our style sheets correctly we can stack them on top of one another and each stylesheet progressively refines the styles in the one above.
This is extremely powerful as you can effectively mate or combine different styles together into a new hybrid style. If you were to cascade a plain black and white style with a rainbow style you would end up with a rainbow style, however, if you were to combine a banana style with a rainbow style you end up with rainbow coloured bananas, if we add to this a large font style you further refine the outcome to a large fonted rainbow coloured bananas.
How very convenient would it be to put all of the definitions of our fonts for our whole web site in a single place. If we change that file to make the fonts pink instead of blue suddenly all the fonts on our web site become blue. We no longer have to go through all 50 pages of the web site to change each font individually because the physical appearance of the fonts is defined in our stylesheet (of which there is only one).
With modern style sheets you can define virtually anything to do with the appearance of a web site.
Cascading style sheets give Web designers power and flexibility. They reduce maintenance and therefore time and costs. A tiny bit of additional time and thought needs to be put into their creation but once they are made they can be recycled over and over and combined in an endless variety of ways.
They are the way of the future and in time they will supplant the traditional template method of web site creation.
Further reading and resources: