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; }

1 comment:

  1. Could not figure out why SharePoint was overriding my CSS width, this post helped tremendously!

    ReplyDelete

Featured Post

Azure AI Service, Studio, ML & Foundry – Which One Do You Need?

If you have used Microsoft AI tools in the past, you might remember popular services like Cognitive Services and the Bot Framework. These to...

MSDEVBUILD - English Channel

MSDEVBUILD - Tamil Channel

Popular Posts