When we have multiple styles(ex: color) for a single element the style will apply in following manner or order.
Thing 1:
The first thing is style will apply in what order they have rendered in browser. The last one will be applied.
There are three ways to define styles there, 1. External Style, 2. Internal Style 3. Inline Style
One thing you have to understand clearly, always inline style will be loaded at last(Even you have loaded style sheets at the end of page). So inline style always having the highest priority than all two others.
With respect to other two styles the priority will be decide as per the order they have loaded.
Ex:
<head>
.my_color{
color: red;
}
<link rel="stylesheet" type="text/css" href="external_style.css" /> /* Imagine this will having the style color as "blue" for the same class.
</head>
In above example blue color will be applied for element which having the class my_color, since external style will be loaded after the internal style.
If we have loaded external style before the internal style, the color red will be applied.
In case if you have multiple styles for element in same level style(Which may inline style or external style. Cannot be inline style). What will happen?
Fid it on, below section "Thing 2".
Thing 2:
The style will be applied with respect to the selector priority, if browser meet multiple styles for a same element in same level of style sheet. The below are the priority levels of selectors.
Selector Priority Levels:
1. ID
2. Class
3. Tag name
Thing 1:
The first thing is style will apply in what order they have rendered in browser. The last one will be applied.
There are three ways to define styles there, 1. External Style, 2. Internal Style 3. Inline Style
One thing you have to understand clearly, always inline style will be loaded at last(Even you have loaded style sheets at the end of page). So inline style always having the highest priority than all two others.
With respect to other two styles the priority will be decide as per the order they have loaded.
Ex:
<head>
.my_color{
color: red;
}
<link rel="stylesheet" type="text/css" href="external_style.css" /> /* Imagine this will having the style color as "blue" for the same class.
</head>
In above example blue color will be applied for element which having the class my_color, since external style will be loaded after the internal style.
If we have loaded external style before the internal style, the color red will be applied.
In case if you have multiple styles for element in same level style(Which may inline style or external style. Cannot be inline style). What will happen?
Fid it on, below section "Thing 2".
Thing 2:
The style will be applied with respect to the selector priority, if browser meet multiple styles for a same element in same level of style sheet. The below are the priority levels of selectors.
Selector Priority Levels:
1. ID
2. Class
3. Tag name
