An article on CSS cascade, selector and specificity

CSS is what gives web pages their style and layout, making them look visually appealing and easy to navigate. But behind the scenes, there’s a system at work that determines how styles are applied, known as the cascade, selectors, and specificity.

Imagine CSS rules as a set of instructions telling your browser how to display elements on a web page. But what happens when multiple rules clash, or when styles seem to conflict? That’s where the cascade comes in.

The cascade is like a set of rules that determines which styles take precedence. It follows a hierarchy, where styles from different sources are applied in a specific order. These sources include:

1. User Agent Stylesheets: Every browser comes with its default styles, known as user agent stylesheets. These serve as the foundation for how elements are displayed.

2. Author Stylesheets: These are the styles you, as a web developer, apply directly to your HTML document using <style> tags or by linking an external CSS file.

3. User Stylesheets: Some users might have their own custom stylesheets, perhaps to override certain design choices or accommodate accessibility needs.

4. Inline Styles: These are styles applied directly to individual HTML elements using the style attribute. They have the highest specificity and will override any other styles.

When conflicting styles arise, the cascade decides which one prevails based on a set of rules. Generally, styles with higher specificity, importance, or order take precedence.

Selectors are the heart of CSS. They're the patterns you use to target specific HTML elements and apply styles to them. Selectors come in various forms, each with its own specificity:

1. Element Selectors: These target HTML elements directly. For example, p targets all <p> paragraphs on the page.

2. Class Selectors: Classes are reusable identifiers that can be applied to multiple elements. They're denoted by a dot (.) followed by the class name (e.g., .btn).

3. ID Selectors: IDs are unique identifiers assigned to a single element. They're denoted by a hash (#) followed by the ID name (e.g., #header).

4. Attribute Selectors: These target elements based on their attributes. For example, [type="text"] targets all elements with the attribute type="text".

5. Pseudo-classes and Pseudo-elements: These target elements based on their state or position in the document. For example, :hover targets elements when they're being hovered over by the mouse.

Specificity is what determines which CSS rule takes precedence when multiple rules target the same element. It's like a points system, where each selector carries a certain weight:

1. Inline Style*: 1000 points
2. ID Selectors: 100 points
3. Class Selectors, Attribute Selectors, and Pseudo-classes: 10 points
4. Element Selectors and Pseudo-elements: 1 point

When comparing two conflicting rules, the one with the higher specificity wins, regardless of the order in which they appear. If two rules have the same specificity, the one that appears last in the stylesheet takes precedence—a concept known as the "last rule wins" principle.

Understanding the cascade, selectors, and specificity is crucial for mastering CSS and creating well-organized, maintainable stylesheets. By grasping these concepts, you'll have better control over how your web pages look and behave, ensuring a smoother and more consistent user experience.