Html Code:
```html

CSS Specificity in Web Development

CSS specificity is a way to determine which style rules are applied to an element when there are conflicting styles. It helps browsers decide which style to apply when multiple CSS rules target the same element.

Calculation of CSS Specificity

The specificity of a CSS selector is calculated based on the following factors:

• Inline Styles: Inline styles have the highest specificity. Each inline style declaration gets a specificity value of 1000.
• ID Selectors: Selectors with ID have a specificity value of 100.
• Class and Attribute Selectors: These selectors have a specificity value of 10.
• Element and Pseudo-Element Selectors: These selectors have a specificity value of 1.

The specificity is calculated by adding up the specificity values of individual selectors in a CSS rule. When there are conflicting styles, the rule with the highest specificity value will be applied.

Example of CSS Specificity Calculation

If we have the following CSS rules:

    
      #header .title { color: blue; } /* Specificity: 110 */
      .title { color: red; } /* Specificity: 10 */
    
  

For an HTML element with class "title" inside an element with ID "header", the color will be blue as it has a higher specificity value.

```

This HTML code provides an SEO-friendly explanation of how CSS specificity works and how it is calculated in a web page. It includes a detailed explanation of specificity calculation and an example to demonstrate how conflicting styles are resolved based on specificity values.