CSS Cascade

CSS stands for Cascading Style Sheets. If there is only one stylesheet, the "cascade" part does not come into play. The concept of cascade becomes important when multiple stylesheets are specified for an HTML document.

Cascade refers to the rules to determine which property gets applied when a property is declared multiple times in the different style sheets.

The general rule of thumb is that, the closer a style is to the actual HTML element, the higher priority it gets. So, inline styles will usually get the highest priority, because they are the closest to the actual HTML element. The next highest in priority is the embedded stylesheets, those declared inside the <head> tag. Following that is the imported stylesheet, which those imported last getting the highest priority. Finally, we have the linked stylesheet. When multiple style sheets are linked, those linked later will get higher priorities.

We should also mention that each browser also have its own stylesheet (that's where the blue links came from -- links are blue because that's browser's default style). These receive the lowest priority.

So, the priority list, from the highest priority to the lowest priority, is as follows:

Inline stylesheet
Embedded stylesheet
Imported stylesheet
Linked stylesheet
Browser's own stylesheet

Next: CSS Inheritance

AdBlock Detected!