CSS Fundamentals: understanding Conflicting Declarations and Cascade.

1. What's a conflicting declaration in CSS?

When two or more CSS rules apply to the same element and define the same property with different values there's a conflicting declaration.

Assume you've written two CSS rules for an element. The CSS rules have the same property (color) but different values (red, blue). There's a conflicting declaration.

In this example, you have two CSS rules that target an HTML element with a class of "box" with different background colors:

<p class="box">Some content here</p>

.box { background-color: red; } 
.box { background-color: blue; }

In these cases, the browser must decide which declaration to apply.

1. When there are conflicting declarations, how does the browser decide which one to apply?

   The Cascade is an algorithm used by the browser to determine how CSS styles apply to HTML elements. It operates on three main principles:

   • The origin of the declaration.

   • The specificity of the selector.

   • The source order: the order in which the declarations appear in the source code.

We'll explore each principle next.

1. What’s the origin of a declaration?

   The browser first determines the Origin of a style: Styles can come from different sources or origins. Their origin defines their priority. The browser only applies styles with the highest priority origin.

   The hierarchy of the origins, from highest to lowest priority, is as follows:

   1. User stylesheets: These are styles defined by the user, such as those applied by a browser extension or plugin.

   2. Author stylesheets: These are the styles defined by the website's author, either in a separate CSS file or in the head of the HTML document.

   3. User-agent stylesheets: These are the default styles that come with the browser.

    /* User-agent stylesheet */ 
    body { 
    background-color: white; 
    color: black; 
    } 

    /* Author Stylesheet */ 
    body { background-color: blue; } 


    /* User Stylesheet */ 
    body { color: red; }

In this example, the final styles applied to the body element will be a blue background color (from the Author Stylesheet) and red text color (from the User stylesheet).

1. What's the specificity in CSS?

   Specificity: If two or more rules have the same origin, the browser determines which one to apply based on specificity. Specificity is calculated using three factors:

   • ID selectors

   • class/attribute selectors

   • and tag selectors.

An ID selector is more specific than a class/attribute selector, which is more specific than a tag selector.

If two or more selectors have the same specificity, the one that appears later in the stylesheet takes precedence.

Here is an example:

    /* lower specificity */ 

    div { color: red; } 

    /* higher specificity */ 

    #my-div { color: blue; }

In this example, the declaration color: blue; will be applied because the selector #my-div has higher specificity than the selector div.

Specificity in CSS can be overridden.

1. How can you override specificity in CSS?

   The ! important statement in CSS can be used to replace specificity. Even if there are alternative styles with more specificity, this statement at the end of the property value gives it first importance.

   Use important carefully since it may make future code maintenance and modification more difficult.

2. What's the source order of a style in CSS?

   Source Order: If two or more rules have the same origin and specificity, the browser will apply the rule that comes later in the source code.

    Here is an example:
   
    /* later in the stylesheet */
   
    .p { color: red; } 
   
    /* earlier in the stylesheet */ 
   
    .p { color: blue; }
   

   In this example, the final style applied to the p element will be red, because the color: red; declaration appears later in the stylesheet.

   In summary, the browser determines which style declaration to apply to an element by following the cascade rules of origin, specificity, and source order. Understanding these rules can help you write more effective CSS and avoid unexpected style conflicts.