Fundamental 3 things of CSS - Cascade, Specificity, Inheritance

• Cascade:
• Specificity:
• Inheritance:

In CSS (Cascading Style Sheets), there are three fundamental principles that govern how styles are applied to HTML elements: Cascade, Specificity, and Inheritance. These principles help define the order in which styles are applied and determine which styles take precedence when there are conflicting rules.

¶Cascade:

The “C” in CSS stands for Cascade, which describes the process of combining styles from different sources and resolving conflicts. Cascade defines the priority of styles when multiple conflicting rules apply to the same element. CSS styles can come from various sources, including user-defined styles, author-defined styles, and browser-defined default styles. The CSS cascade operates according to a specific hierarchy of styles, with different sources and levels of specificity. It follows a prioritization order from the most general styles to the most specific ones. The cascade process can be summarized as follows:

The cascade follows a specific order of importance, and this order is as follows:

- User agent styles: These are the default styles provided by the web browser for HTML elements.
- User styles: Styles applied by the user via browser extensions or settings.
- Author styles: Styles defined by the web page's author in the external or internal CSS files.
- Inline styles: Styles defined directly in the HTML element's "style" attribute. These take the highest precedence.

When there is a conflict between multiple styles for an element, the cascade rules help determine which style will be applied.

¶Specificity:

Specificity is a mechanism for resolving conflicts between CSS rules that target the same element. It defines which rule takes precedence when multiple conflicting rules are applied. Specificity is determined by the combination of selectors in a CSS rule. Specificity is typically calculated using four values:

- Inline styles: An inline style has the highest specificity because it is directly applied to an element.
- ID selectors: Selectors targeting elements by their ID have higher specificity than other types of selectors.
- Class selectors, attribute selectors, and pseudo-classes: These selectors have the same specificity and are considered lower than ID selectors.
- Type selectors and pseudo-elements: These selectors have the lowest specificity.

When comparing the specificity of two or more rules, the rule with the highest specificity will take precedence.

¶Inheritance:

Inheritance is the mechanism by which styles are passed from parent elements to their child elements in the HTML document. Some CSS properties are inherited by default, meaning that if you apply a style to a parent element, its child elements will inherit those styles unless explicitly overridden. Not all CSS properties are inherited, and some are designed to be non-inherited by default. The CSS properties that are inherited tend to be related to text properties, such as font properties, line height, and color.

Inheritance can help reduce the amount of CSS code needed to style a page because you can define styles at higher levels in the document hierarchy and have them cascade down to child elements.

Understanding these three fundamental principles of Cascade, Specificity, and Inheritance is crucial for effectively working with CSS and creating consistent and maintainable styles for web pages.