Override Inline Styles with CSS [ !important ]

Cascading Style Sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on. What this means is that if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style will be the one applied, not the first.

 For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

p { color: #ff0000; }

 p { color: #000000; }

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

 So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, in the above example, you would write:

Single Property Set two Different style . you can use  !importan  ( override  style)

p { color: #ff0000 !important; }

 p { color: #000000; }