Resolving Conflicts In CSS

Hi friends!

Welcome back. Today I came with new topic which really help you a lot which about the css conflict. When you add style to the element but it does not apply on it why. You check it many times for bug but there is no bug in your code. There is concept of css which is conflict many people do not about these basic concepts. Today we talk about them and discuss how to use them.

CSS CONFLICTING;

Two are more styles are applied to the same element.

For example;

P{
Font-size:2em;
Color:red;
}
 P{
Font-size:1.8em;
Color:blue;
}

Now question is that which style applied to the element the answer is simple last one will win. The css contain of three basic concepts such as specificity, inheritance and cascade.

CASCADE;

The cascade rules depend upon the order of your css. The last property applied to the element.

For example;

Body{
Font-family:Helvetica;
 }
 P{
Font-family:Georgia;
}

In the above case all the paragraph change with Georgia font and the Helvetica don’t work on the paragraph because the order of css.

SPECIFICITY;

Specificity defines the rules applied to the element.

If the style does not apply to the element the reason is specificity.

If two selectors are applied to the same element the selector with high specificity wins.

If two selectors have equal specificity the last one wins.

For increasing specifity you can use id selector but the inline style has more specificity than the id selector but for the reason we prefer to the id selector for more specificity.

How to count specificity?

The counting specificity is very easy. The each id is equal to the 100,  the each attribute, class and pseudo-class is equal to the 10 and the each element is equal to the one  .

For example;

 P{
Font-size:1.5em;
Color:red;
}
.main p{
Font-size:2em;
Color:yellow;
}

In the above the example the paragraph with class will win because it has more specificity than the paragraph.

INHERITANCE;

For instance you add the properties to the body it inherited to all other properties which are present in the body such as heading tags, paragraph and other tags present in the body tag.

For example;

Body{
Font-family:Helvetica;
Font-size:1.5em;
}

The above properties applied to the all elements which are present in the body tag.

CONCLUSION;

Now you have understanding of the css conflict and how to use them and take fullest advantage of them. Remember in your prayers and don’t forget to share our post with your friends. THANKS