Cascading

You can combine several stylesheets simply by linking to different ones. For example you could add special case stylesheets in the header of certain files:

What happens if both stylesheets assign values to the same property? For example, the first stylesheet reads body { background-image: url(back.gif) } and the second one reads body { background-image: none }. The CSS parser will apply the last value to the actual document's body, in other words the last definition overrides all previous ones. This also means, background-image: none is not always the same as not defining a background at all.

Another approach is to cascade to save some time of writing and reduce redundancy. For example, several id's may share some values, others not:

Inheritance

Inheritance means: a parent elements design is applied to a childs element as well. This could apply to nested elements. For example a paragraph inside a body with the font serif will also have a serif font. It also mean for relative units, like font-size: 120%, if you nest these, the font will get bigger and bigger.

Referring to nested Elements

If you define p { color: #0f0 }, every paragraph's text will turn green. Since you put most paragraphs over white background the text is readable. But you also have an area class called "content", which happens to have a green background. Now this would make every p inside the "content" unreadable. One thing you could do is assign a class "contentparagraph" to all paragraphs inside "content". This would be tiresome, so what you'd actually do is write an exception definition which only refers to the nested paragraph inside the "content":

Red on green is still pretty unreadable, but you get the idea.

Continue with the tutorial: Bugs, Workarounds.