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

Understanding about Azure Region, Geographies, Availability Zones and Region Pairs

Introduction Microsoft Azure services are available in 53 regions around the world, with plans announced for 7 additional regions and 140+ a...

Subscribe to the FREE Weekly Newsletter to receive all the latest Microsoft Azure, AI, Xamarin

Popular Posts