#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2012
    Posts
    18
    Rep Power
    0

    CSS important property


    Hi,

    I know CSS having important property. But i don't know when it is uesd. And i need to know what is the purpose of using this property.
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,008
    Rep Power
    2791
    I would recommend a 3-second Google search.

    Comments on this post

    • paulh1983 agrees : lol.. i agree
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [ANSI C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    The !important property is used to override inheritance and the cascade in css. It is generally considered a hack and In my opinion should be avoided if at all possible. It sounds like you should do something reading on inheritance and the difference between ids and classes
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    306
    Rep Power
    6
    Originally Posted by Paul-Ninja
    The !important property is used to override inheritance and the cascade in css. It is generally considered a hack and In my opinion should be avoided if at all possible. It sounds like you should do something reading on inheritance and the difference between ids and classes
    Paul Ninja is correct. It is basically a hack to override the inheritance of another element. To avoid the !important property all you have to do is make a more precise css element.

    Just an example:

    Lets say you have the following and the body text color is set to black #000;

    Code:
    <div id="test">
    <div class="text1">
    <p>This is not the text I want to change the color for.</p>
    </div>
    <div class="text2">
    <p>This is the text I want to change the color for.</p>
    </div>
    </div>
    </div>
    Now lets say you set the following:

    #test { color: #eee; }

    This will make all the text under the Id test black. This means all the child elements have adopted this color.

    To fix that just do this:

    #test .text2 p { color: #ccc; }

    What you did here is make a more specific css element that keeps you from having to use the !important hack.

    I know this is not really relevant to your issue but it helps explain what Paul-Ninja is trying to say.

IMN logo majestic logo threadwatch logo seochat tools logo