Tutorials » •
Cascade and inheritance
You are probably wondering what exactly cascades about cascading style sheets. In this section we look at the idea of cascading, and a related idea, that of inheritance.
Both are important underlying concepts that you will need to grasp, and understand the difference between, in order to work properly with style sheets.
Cascode
A single style sheet associated with one or more web pages is valuable, but in quite a limited way. For small sites, the single style sheet is sufficient, but for larger sites, especially sites managed by more than one person (perhaps several teams who may never communicate) single style sheets don't provide the ability to share common styles, and extend these styles where necessary.
This can be a significant limitation. Cascading style sheets are unlike the style sheets you might have worked with using word processors, because they can be linked together to create a hierarchy of related style sheets.
This process of linking is called cascading, for reasons we will look at in just a moment. Before we do, let's look at why cascading is such a good idea.
Managing Style at Large Sites
Imagine how the web site for a large organization, say a corporation, might be structured. As sites grow in complexity, individual divisions, departments, and workgroups become more responsible for their own section of a site. We can already see a potential problem - how do we ensure a consistent look and feel across the whole site?
A dedicated web development team can ensure that a style guide is adhered to. How can we ensure that each workgroup, department, and division also follows the guidelines? Won't the site end up as a dog's breakfast of mish mashed styles?
With traditional HTML, the answer is almost certainly yes. Individual style sheets make life a little better, as all of the style information is concentrated in a single location, easily edited and reviewed. However, we still have the organizational difficulty of ensuring that each style sheet is the same as all the others, that the latest version has been distributed to all and updated.
Then there is the logistical nightmare of trying to have each and every style needed by every group included in the one style sheet. Different departments and groups have different needs - the legal department will have different needs from the engineering department, but they will share the basic look and feel of the company's site.
This doesn't look promising. But Cascading Style Sheets in fact provide a mechanism, the cascade, which helps address these very problems.
Cascading style sheets do not have to stand alone. They can import style from one or more other style sheets. Style sheets which import from others are said to cascade from those style sheets.
Here is how we might use the cascading nature of style sheets to help solve the organizational nightmare we described above.
At the top level, the company could have a core style sheet, which defines the basic look and feel for the corporate site. It might include aspects such as font, color, background color and so on.
Each division would have a divisional style sheet. This does not have to reproduce the core style sheet, simply to add any styles specific to the division. To ensure that this style sheet also carries the core styles, it only has to import the core style sheet. It can do this simply be including an @import rule.
We can continue down the chain, with each new style sheet adding styles necessary at that level, and importing the style sheet above (there is no need to import all style sheets, as importing a style sheet imports any style sheets imported by that style sheet.)
Using the process, we create a cascade of style sheets. When a style sheet above another in the cascade is changed, these changes cascade automatically into the web pages which are linked to the lower one too. Our organizational nightmare is easily managed using the cascading nature of style sheets.
