CSS Cascade
The CSS cascade is a mechanism that determines which CSS rules are applied to an element when multiple rules apply to the same element. The cascade is based on four factors:
- Origin: The origin of a CSS rule can be one of three types: user agent, user, or author. User agent rules are the default styles that are applied by the browser. User rules are styles that are added by the user, such as through a browser extension or a user stylesheet. Author rules are the styles that are written by the web developer in a CSS file.
- Specificity: Specificity is a measure of how specific a CSS rule is. A more specific rule will override a less specific rule. Specificity is calculated based on the type of selector used and the number of descendant selectors.
- Order in the file: CSS rules are applied in the order in which they appear in the CSS file. A rule that appears later in the file will override a rule that appears earlier in the file, if they apply to the same element.
- Inheritance: CSS properties can be inherited from parent elements. This means that if a parent element has a CSS property set, its child elements will also inherit that property, unless it is overridden by a more specific rule.
Task
Run the code. Change the font size and text alignment of p element to 16px and left respectively. Run the code again to see the changes and experiment with the code to get used to it. Refer CSS Syntax lesson on how to change the alignment of the text.