Cascading Style Sheets, or CSS as it is commonly known, is a vital ingredient of today’s web site designs. This is the first in a series of articles attempting to cover the very basics of CSS, in a manner as simple as possible so that the non technical bloggers can get an idea of what it is all about.
Why are they called Style Sheets?
First of all, let’s try to find out the meaning behind the phrase style sheet. In the context of web site design, style refers to the look and feel or appearance of a given site or web page. In this regard, style means things such as the fonts used, their sizes and colors, the various background colors and images etc. Not only fonts and colors, even aspects such as border formats and thickness etc can also be defined using CSS. For example, the double-bordered box in the header section of a Minima template is applied using style sheets.
The formal technical term used to refer to the look and feel of a web page is presentation. In other words, the style aspects are more formally refers to as the presentation aspects.
The name style sheet, therefore, comes from the fact that a style sheet is a collection of some rules or instructions given to a web browser on how to present a web page to a reader of that page. If we think of the browser program as an artist, the style sheet is like the color palette and the brush set of that artist.
Why Cascading?
The CSS rules can be defined at various levels. In fact there are four levels at which CSS rules are defined. The first and the least priority level is the browser’s default set of values. Then comes the external style sheets followed by internal (or embedded) style sheet in the third place. Fourth and the highest priority level is called the inline style definition. (Here we will not try to go in to the details of these levels)
For every web page, all of these 4 levels may not be present. But, every time a web page is loaded in a browser window, the available levels of styles sheets cascade to a single virtual style sheet with the high priority rules taking precedence over the low priority ones. For example, if the same rule is defined at inline and external levels, the inline rule prevails over the other.
In other words, the four levels of style sheets get combined in to a single logical style sheet before they are applied. Hence the term cascade.
All right. Now you know why the Cascading Style Sheets are called by that name. In the next article, we will try to understand the value of style sheets and why they are used in designing web sites.
