Jump to content
gongpex

Css !important

Recommended Posts

Hello everyone, Today I found a code CSS that using like this:

.clas {margin:0px;width:20px;height:30px;color:#00FF00 !important;}

what's the mean of !important, and is used for? please somebody answer me Thanks

Share this post


Link to post
Share on other sites

!important will give the targeted element color precedence over any css styling that targets the same element. precedence of styling 1) inline of element2) inline css styling within the <HEAD>..</HEAD> of the document3) linked external css file If you used !important for color while targeting the same element in (2) it would take precedence over (1), Unless it too was using color: with !important then it would become top dog again.

Edited by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
If you used !important for color while targeting the same element in (2) it would take precedence over (1), Unless it too was using color: with !important then it would become top dog again.
sorry, I still not understand with your explanation, can you tell me what is used for? and can you give me example so that I can understand? (hope in code shape) thanks _____________________________________________________________________ what's your avatar really? Edited by gong

Share this post


Link to post
Share on other sites
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">.clas {margin:10px;border:1px solid red;color:#00FF00 !important;} </style></head><body><p class="clas" style="border:1px solid blue; color: blue;">I Have a class name of clas, but i also have inline styling of style="border:1px solid blue; color: blue;", because inline styling has higher priority than those set in head or external stylesheet my border will change to Blue, but my text color will remain lime green yuck! because the color style set in the head of the page is using !important and now has higher priority.</p> <p class="clas" style="border:1px solid blue; color: blue !important;">I Have a class name of clas, but i also have inline styling of style="border:1px solid blue; color: blue !important;", because inline styling has higher priority than those set in head or external stylesheet my border will change to Blue, BUT! also NOW, my color: uses !important AND is inline style which will give it a higher prority than the color: with !important set in the head of the document.</p></body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...