As we know CSS styles works from top to bottom, suppose you have created two class with the same name or define the style of any element at two places, which one will apply on your page, can you guess which one will apply, yes you are right the last one because CSS works from top to bottom.
Let's see this with some examples
div{color:black;}
....................
...................
div{color:green;}
On the page all the div color will be green, what if you want to apply the black color from the top one style? you need to use the !important so it can override other color at the bottom.
div{color:black !important;}
....................
...................
div{color:green;}
Now the page will use color black because we used !important here.
What will happen if both will have !important? in that case last will be used
div{color:black !important;}
....................
...................
div{color:green !important;}
In this case green color will be used from the last one.
As we know if we are using class and inline style then inline style is used, but what will happen if class have !important rule? see this.
<div class="grid1" style="background-color:green">
Text to test!!!
</div>
.grid1{background-color: red;}
If you are not using !important then div background color will be green because inline style will be used.
.grid1{background-color: red !important;}
After adding the !important to the class, div background color will be red, it will override the inline style.
<div class="grid1" style="background-color:green !important">
Text to test!!!
</div>
Now I changed the inline style by using !important, so the div background color will be green.
So we can say !important is helpful when we are using CSS files from some other libraries and we don't want that library can override our existing CSS then we can use !important with our classes to make sure that no other css can override our class.
|
|
| By Mike .Net On 28 Jan, 13 Viewed: 501 |
![alt text][1] CSS keeps updating itself, in a way that you need to keep up with the changing features and tones of this stylesheet. You need to know the new syntax, and also the no-code methods that you can ideally use. Here you will be introduced to some of the lesser known facts of CSS that... By Deepa Ranganathan On 25 Sep 2015 Viewed: 851
<center>![Customizations for Your Wordpresst][1]</center> Have you just started using Wordpress? If yes, then there are a few things that you may want to play around with. Customizing a Wordpress theme at beginner level actually means customizing your stylesheets to make the design look... By Deepa Ranganathan On 06 May 2015 Viewed: 426
Rotating banner appeals most of the client and it's quite time consuming for developers to judge which library they need to use and do modification in them according to their requirements. In this article we are going to create the simplest and fully working rotating banner by writing just two... By Ali Adravi On 18 Apr 2015 Viewed: 7,461
To show blurred, faded or washed-out image by using CSS and clear effect on mouse over on the image we need to use simply two CSS opacity and filter: alpha See following image, by default all will be faded on page load and once user will mouse over on any image that will look like the third... By Jason Olivera On 06 Apr 2013 Viewed: 1,923
**1. Universal Selector: *** *{margin:0; padding:0} Most of the designers use * selector to remove the margin and padding, but we should avoid it because it is too heavy. *.class1 and .class are equivalent. *.#content and # content are equivalent. **2. Descendant selectors: X ... By Ali Adravi On 30 Jan 2013 Viewed: 568