CSS Cascading priority scheme
According to the rules of Cascading Priority Scheme of CSS The most preferred style sheet controls the content display.
Declarations specified in the higher priority source take precedence because of their higher priority, and declarations not specified in the higher priority source are ignored because of lower priority, such as user agent style, this process called cascading.
What are CSS sources?
CSS information can be provided from multiple sources, These sources can be web browsers, users and authors.
Information entered by the author can be divided into inline, media type, importance, selector specificity, rule order, In inheritance and property definition.
CSS style information can be in a separate document, or it can be embedded in an HTML document, Multiple style sheets can be imported, Different style sheets can be applied depending on the output device used, So that authors can properly prepare the presentation for each medium.
All types of styles on the page will be "cascaded" into a new "virtual" style sheet by the following rules, where the closest style to the element will have the highest priority:
CSS priority scheme (highest to lowest)
|
Priority |
CSS source types |
Description |
|---|---|---|
| 1 | Importance |
The first one is used for high priority. "!Important" annotation This overrides the previous priority types.
|
| 2 | Inline | The second highest priority is "Inline Style", It overwrites all previous styles except for important annotations. |
| 3 | Media Type | Third is MediaType, the definition of property applies to all media types, unless specific CSS related to MediaType is specified. |
| 4 | User defined | Fourth is the user defined CSS, most browsers have an accessibility feature, through which the user can define their favorite CSS. |
| 5 | Selector specificity |
A specific contextual selector (#myid p) overwrites the general definition. |
| 6 | Rule order | The last principle has a higher priority (that is, the declaration closest to the element has highest priority) |
| 7 | Parent inheritance | If the property of an element is not specified, it takes the inherited value from the parent element (the first element from the corresponding element). |
| 8 | CSS property definition in HTML document | The CSS principle or CSS inline style overwrites a default browser value. |
| 9 | Browser default | The lowest priority is the default style value of the browser. |
Note
You will learn a lot about CSS selectors, declarations and features of CSS in the next tutorials.