Style can be applied to the HTML documents in various ways, using the style attribute in elements( also called Inline styles), using style tag in the head section( embedded style-sheet ) of the HTML documents, and using Cascading Style Sheets or CSS files.

Using CSS files is the most common way these days to design a document. But, since there are various ways to apply style what would happen if a different style is applied to an element in the document using different methods. Here the concept of CSS specificity comes to the picture. It is a simple set of rules the browser follows to determine which CSS rule is most specific and therefore applying that rule( if it encounters conflicting CSS rules that point to the same element ).

There are 3 selectors(and inline styles) that are used in CSS to style the documents : 1) Inline styles - An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;"></h1>

2) IDs - An ID is a unique identifier for the page elements, such as #navbar.

3) Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.

4) Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.

Specificity Hierarchy

Every selector has its place in the specificity hierarchy.

First priority is given to the style attribute Then to ID tags followed by each attribute, class or pseudo-class and at last, is element name or pseudo-element

EXAMPLE) Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class, or pseudo-class, add 1 for each element name or pseudo-element. Consider these three code fragments:
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>

The specificity of A is 1 (one element) The specificity of B is 101 (one ID reference and one element) The specificity of C is 1000 (inline styling)

Since 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and therefore will be applied.

There are certain rules in addition to this hierarchy that must be followed :
1) Equal specificity: the latest rule counts - If the same rule is written twice into the external CSS file, then the rule that is written lower in the CSS file is closer to the element to be styled and therefore will be applied.
EXAMPLE) Consider the code scene :
h1 {color: green;}
h1 {color: red;} => Applied as it is closer

2) ID selectors have a higher specificity than attribute selectors -
EXAMPLE) Consider the code scene :
div #a {color: green;} => Applied as it is more specific than the other two

#a {color: yellow;}
div[id=a] {color: blue;}

3) Embedded style-sheet is more specific than the external style-sheet -
EXAMPLE) Consider the code scene :
In external CSS file:

#idname h1 {color: red;}
In HTML file: => Applied as it is more specific( closer to the element)
<style>

#idname h1 {
color: blue;
}
</style>

4) A class selector beats any number of element selectors
EXAMPLE) Consider the code scene :
.intro {color: red;} => Applied as it is beats the element selector
h1 {color: green;}

5) The universal selector and inherited values have a specificity of 0.

Fun Fact CSS was first proposed by Håkon Wium in October 1994. Stay tuned.