How to Use the Important Declaration in CSS

<!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" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="en-US"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/","20100918102224","https://web.archive.org/","web","/_static/", "1284805344"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="googlebot" content="index,archive,follow,noodp"/> <meta name="robots" content="all,index,follow"/> <meta name="msnbot" content="all,index,follow"/> <meta name="description" content="Sometimes when you are messing around with CSS, you can't figure out why certain styles won't stick. Most of the time, it's because you are obviously doing..."/> <meta name="keywords" content="color,css,example,line,Placing,solution,something,Style,time,way,"/> <title>How to Use the Important Declaration in CSS | bavotasan.com</title> <link rel="stylesheet" href="https://web.archive.org/web/20100918102224cs_/http://bavotasan.com/wp-content/themes/bavotasan-2010/style.css?ver=1.0.6" type="text/css" media="screen"/> <link rel="shortcut icon" href="https://web.archive.org/web/20100918102224im_/http://bavotasan.com/favicon.ico"/> <link rel="pingback" href="http://bavotasan.com/xmlrpc.php"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Feed" href="https://web.archive.org/web/20100918102224/http://bavotasan.com/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 Comments Feed" href="https://web.archive.org/web/20100918102224/http://bavotasan.com/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="bavotasan.com 禄 How to Use the Important Declaration in CSS Comments Feed" href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/feed/"/> <script type="text/javascript" src="https://web.archive.org/web/20100918102224js_/http://bavotasan.com/wp-includes/js/jquery/jquery.js?ver=1.4.2"></script> <link rel="index" title="bavotasan.com" href="http://bavotasan.com/"/> <link rel="start" title="Removing Images from a WordPress Post: Redux" href="http://bavotasan.com/tutorials/removing-images-from-a-wordpress-post/"/> <link rel="prev" title="Creating a Grid in Adobe Illustrator CS3" href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/creating-a-grid-in-adobe-illustrator-cs3/"/> <link rel="next" title="Creating a Mouseover Fade Effect with jQuery" href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/"/> <link rel="canonical" href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/"/> <link rel="shortlink" href="https://web.archive.org/web/20100918102224/http://bit.ly/div8bt"/> <script type="text/javascript" src="https://web.archive.org/web/20100918102224js_/http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script> <meta property="fb:page_id" content="137456822940271"/> <meta property="fb:admins" content="586505548"/> <meta property="og:site_name" content="bavotasan.com"/> <meta property="og:title" content="How to Use the Important Declaration in CSS"/> <meta property="og:description" content="Sometimes when you are messing around with CSS, you can鈥檛 figure out why certain styles won鈥檛 stick. Most of the time, it鈥檚 because you are obviously doing something wrong, but other times you might just be missing the fact that your CSS is being overwritten somewhere else down the line. Remember, CSS stands for Cascading [...]"/> <meta property="og:type" content="article"/> <meta property="og:image" content="https://web.archive.org/web/20100918102224im_/http://bavotasan.com/wp-content/uploads/2009/08/csswild.jpg"/> </head> <body class="single single-post postid-752"> <div id="bodywrap">  <script type="text/javascript"> (function(){ var bsa = document.createElement('script'); bsa.type = 'text/javascript'; bsa.async = true; bsa.src = '//web.archive.org/web/20100918102224/http://s3.buysellads.com/ac/bsa.js'; (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa); })(); </script>   <div id="header"> <div id="topmenu" class="menu-top-menu-container"><ul id="menu-top-menu" class="menu"><li id="menu-item-2254" class="menu-item menu-item-type-custom menu-item-2254"><a href="https://web.archive.org/web/20100918102224/http://themes.bavotasan.com/">Themes by bavotasan.com</a></li> <li id="menu-item-2255" class="menu-item menu-item-type-custom menu-item-2255"><a href="https://web.archive.org/web/20100918102224/http://support.bavotasan.com/">Support Forum</a></li> <li id="menu-item-2259" class="menu-item menu-item-type-custom menu-item-2259"><a href="https://web.archive.org/web/20100918102224/http://themes.bavotasan.com/affiliates">Affiliates</a></li> <li id="menu-item-2256" class="menu-item menu-item-type-post_type menu-item-2256"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/about/">About</a></li> <li id="menu-item-2257" class="menu-item menu-item-type-post_type menu-item-2257"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/services/">Services</a></li> <li id="menu-item-2258" class="menu-item menu-item-type-post_type menu-item-2258"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/contact/">Contact</a></li> </ul></div> <div id="title"> <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/"> <img src="https://web.archive.org/web/20100918102224im_/http://bavotasan.com/images/bavotasan.png" alt="bavotasan.com" width="400" height="70"/> <span id="desc"></span></a> </div> <div id="follow"> <span></span> <a href="https://web.archive.org/web/20100918102224/http://twitter.com/bavotasan" class="twitter"></a> <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/feed/" class="rss"></a> </div> <div id="navigation" class="menu-main-menu-container"> <ul id="menu-main-menu" class="menu"> <li id="menu-item-2264"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/"><span></span>Home</a></li> <li id="menu-item-2266"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/category/articles/"><span></span>Articles</a></li> <li id="menu-item-2265" class="current-menu-item"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/category/tutorials/"><span></span>Tutorials</a></li> <li id="menu-item-2267"><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/category/downloads/"><span></span>Downloads</a></li> </ul> </div> </div>  <div id="mainwrapper"> <div id="leftcontent"> <div class="posttop"> <div class="thedate"><div class="month">Aug</div><div class="day">04</div><div class="year">2009</div></div> <h1>How to Use the Important Declaration in CSS</h1> <br class="clear"/> <p>Sometimes when you are messing around with CSS, you can’t figure out why certain styles won’t stick. Most of the time, it’s because you are obviously doing something wrong, but other times you might just be missing the fact that your CSS is being overwritten somewhere else down the line. Remember, CSS stands for <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets, so styles you set further down will overwrite styles that are above.<br/> <span id="more-752"></span><br/> You have probably come across the solution several times when looking over CSS and you just might not have know that it was there.</p> <p><strong>The <span style="color: #ff0000;">!Important</span> declaration</strong></p> <p>Placing the <span style="color: #ff0000;">!Important</span> declaration after a style is a way to force that style to be applied even if they may be contradicted further down in your CSS.</p> <p><strong>Examples:</strong></p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">h1 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ff0000</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span> h1 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#000000</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>In the above example, your H1 tags will be black.</p> <div class="wp_syntax"><table border="0" cellpadding="0" cellspacing="0"><tr><td><div class="code"><pre class="css" style="font-family:monospace;">h1 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#ff0000</span> <span style<span style="color: #00AA00;">=</span><span style="color: #ff0000;">"color: #ff0000;"</span><span style="color: #00AA00;">></span>!Important</span<span style="color: #00AA00;">>;</span> <span style="color: #00AA00;">}</span> h1 <span style="color: #00AA00;">{</span> <span style="color: #000000; font-weight: bold;">color</span><span style="color: #00AA00;">:</span> <span style="color: #cc00cc;">#000000</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">}</span></pre></div></td></tr></table></div> <p>By adding the <span style="color: #ff0000;">!Important</span> declaration, you force the first style to be applied even though the style below should overwrite it.</p> <div class="buttonbox"> </div> </div> <div class="post"> <div class="socialleft">If you liked this, please share it.</div> <ul class="addtoany_list"> <li><a href="https://web.archive.org/web/20100918102224/http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2Fdiv8bt&counturl=http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/" class="twitter-share-button" data-count="vertical" data-via="bavotasan">Tweet</a><script type="text/javascript" src="https://web.archive.org/web/20100918102224js_/http://platform.twitter.com/widgets.js"></script></li> <li><a href="https://web.archive.org/web/20100918102224/http://www.facebook.com/sharer.php?u=http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/&t=How to Use the Important Declaration in CSS" title="Click to send this page to Facebook!" target="_blank" rel="nofollow" class="facebook-icon"></a></li> <li><a href="https://web.archive.org/web/20100918102224/http://digg.com/submit?phase=2&url=http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/&title=How to Use the Important Declaration in CSS&bodytext=Sometimes when you are messing around with CSS, you can鈥檛 figure out why certain styles won鈥檛 stick. Most of the time, it鈥檚 because you are obviously doing something wrong, but other times you might just be missing the fact that your CSS is being overwritten somewhere else down the line. Remember, CSS stands for Cascading [...]" title="Digg" rel="nofollow" target="_blank" class="digg-icon"></a></li> <li><a href="https://web.archive.org/web/20100918102224/http://www.delicious.com/save" onclick="window.open('https://web.archive.org/web/20100918102224/http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent('https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/')+'&title='+encodeURIComponent('How to Use the Important Declaration in CSS'),'delicious', 'toolbar=no,width=550,height=550'); return false;" class="delicious-icon"></a></li> <li><a href="https://web.archive.org/web/20100918102224/http://www.stumbleupon.com/submit?url=http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/&title=How to Use the Important Declaration in CSS" title="StumbleUpon" rel="nofollow" target="_blank" class="stumbleupon-icon"></a></li> <li><iframe src="https://web.archive.org/web/20100918102224if_/http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbavotasan.com%2Ftutorials%2Fhow-to-use-the-important-declaration-in-css%2F&layout=button_count&show_faces=false&width=100&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowtransparency="true"></iframe></li> </ul> </div> <div class="post"> <p class="tags">Tags: <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/color/" rel="tag">color</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/css/" rel="tag">css</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/example/" rel="tag">example</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/line/" rel="tag">line</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/placing/" rel="tag">Placing</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/solution/" rel="tag">solution</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/something/" rel="tag">something</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/style/" rel="tag">Style</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/time/" rel="tag">time</a>, <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tag/way/" rel="tag">way</a></p> <p class="tags">Short URL: <a href="https://web.archive.org/web/20100918102224/http://bit.ly/div8bt" title="How to Use the Important Declaration in CSS">http://bit.ly/div8bt</a></p> </div> <div class="post"> <div id="crp_related"> <h3>Similar Posts</h3> <ul> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/text-rotation-css3/" rel="bookmark" title="Permanent Link to Text Rotation with CSS3">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/" rel="bookmark" title="Permanent Link to Optimization Tips to Speed Up Your Site">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/draw-smiley-face-css3/" rel="bookmark" title="Permanent Link to How to Draw a Smiley Face with CSS3">How to Draw a Smiley Face with CSS3</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/jquery-replace-word-with-link/" rel="bookmark" title="Permanent Link to Use jQuery to Replace a Word with a Link">Use jQuery to Replace a Word with a Link</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/a-simple-css-trick-to-vertically-align-text/" rel="bookmark" title="Permanent Link to A Simple CSS Trick to Vertically Align Text">A Simple CSS Trick to Vertically Align Text</a></li> </ul> </div> <a href="https://web.archive.org/web/20100918102224/http://www.netfirms.com/web-hosting/web-hosting-business/?a_aid=4c8bb52b19602&a_bid=8f049e07" target="_top" style="float:right;"><img src="https://web.archive.org/web/20100918102224im_/http://www.webhostrevenue.com/accounts/default1/banners/300x250-us.gif" alt="Netfirms Business Hosting Plan" title="Netfirms Business Hosting Plan" width="250" height="208"/></a><img style="border:0" src="https://web.archive.org/web/20100918102224im_/http://www.webhostrevenue.com/scripts/imp.php?a_aid=4c8bb52b19602&a_bid=8f049e07" width="1" height="1" alt=""/> </div> <div class="post"> <a href="#comment_list"></a> <div id="comments"> <h3 id="comments-title">Discussion <small> 5 Comments</small> </h3> <ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-3658"> <div id="comment-3658"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918102224im_/http://1.gravatar.com/avatar/bc78e9eeca4abe2043bb671018d504ef?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">KT</span> <span class="commentdate"> on August 6, 2009 at 9:27 am</span> </div> <div class="comment-text"> <p>I have seen this in CSS but I never knew what it was for. Thanks for the explanation.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/?replytocom=3658#respond" onclick="return addComment.moveForm("comment-3658", "3658", "respond", "752")">Reply</a> </div> </div> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-3687"> <div id="comment-3687"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918102224im_/http://1.gravatar.com/avatar/bc78e9eeca4abe2043bb671018d504ef?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname">Clair</span> <span class="commentdate"> on August 6, 2009 at 10:08 pm</span> </div> <div class="comment-text"> <p>Good to know. Thanks.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/?replytocom=3687#respond" onclick="return addComment.moveForm("comment-3687", "3687", "respond", "752")">Reply</a> </div> </div> </li> <li class="comment even thread-even depth-1" id="li-comment-3776"> <div id="comment-3776"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918102224im_/http://0.gravatar.com/avatar/243a436a366f50491de040495b75ef06?s=60&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918102224/http://bohemianalps.com/" rel="external " class="url">Simanek</a></span> <span class="commentdate"> on August 11, 2009 at 1:03 am</span> </div> <div class="comment-text"> <p>You’ve correctly described this feature of CSS. However, I would recommend that it is a good practice to not be too reliant on it. Discovering a conflict in a CSS file is a good opportunity to ‘clean up’ your CSS by finding the conflict and improving the structure and specificity of your CSS rules.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/?replytocom=3776#respond" onclick="return addComment.moveForm("comment-3776", "3776", "respond", "752")">Reply</a> </div> </div> <ul class="children"> <li class="comment byuser bypostauthor odd alt depth-2" id="li-comment-3783"> <div id="comment-3783"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918102224im_/http://1.gravatar.com/avatar/ba043b2af6a355787f1b6fd1b1ea3eda?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918102224/http://tinkerpriestmedia.com/" rel="external " class="url">c.bavota</a></span> <span class="commentdate"> on August 11, 2009 at 1:55 pm</span> </div> <div class="comment-text"> <p>I totally agree. I always use the <a href="https://web.archive.org/web/20100918102224/http://jigsaw.w3.org/css-validator/">W3C CSS validator</a> to go over my CSS.</p> </div> </div> </li> </ul> </li> <li class="comment even thread-odd thread-alt depth-1" id="li-comment-7379"> <div id="comment-7379"> <div class="comment-avatar"> <img alt="" src="https://web.archive.org/web/20100918102224im_/http://1.gravatar.com/avatar/96563b6ccb4fea9bea3671cfd7674617?s=60&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D60&r=G" class="avatar avatar-60 photo" height="60" width="60"/> </div> <div class="comment-author"> <span class="authorname"><a href="https://web.archive.org/web/20100918102224/http://www.csscentering.com/" rel="external " class="url">css examples</a></span> <span class="commentdate"> on January 29, 2010 at 9:19 am</span> </div> <div class="comment-text"> <p>Thanks for good articles.</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-link" href="/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/?replytocom=7379#respond" onclick="return addComment.moveForm("comment-7379", "7379", "respond", "752")">Reply</a> </div> </div> </li> </ol> <a name="respond"></a> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20100918102224/http://bavotasan.com/tutorials/how-to-use-the-important-declaration-in-css/#respond" style="display:none;">Cancel reply</a></small></h3> <form action="https://web.archive.org/web/20100918102224/http://bavotasan.com/wp-comments-post.php" method="post" id="commentform"> <p class="comment-notes">Your email address will not be published. Required fields are marked <span class="required">*</span></p> <p class="comment-form-author"><label for="author">Name</label> <span class="required">*</span><br/><input id="author" name="author" type="text" value="" size="30"/></p> <p class="comment-form-email"><label for="email">Email</label> <span class="required">*</span><br/><input id="email" name="email" type="text" value="" size="30"/></p> <p class="comment-form-url"><label for="url">Website</label><br/><input id="url" name="url" type="text" value="" size="30"/></p> <p>To enter code in the comment box, please place it between <strong><pre lang="php"> </pre></strong> tags. You don't have to convert any characters to their hex/HTML code. Just add your code the way you would to any code editor.</p> <p class="comment-form-comment"><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p> <p class="form-submit"> <input name="submit" type="submit" id="submit" value="Post Comment"/> <input type="hidden" name="comment_post_ID" value="752" id="comment_post_ID"/> <input type="hidden" name="comment_parent" id="comment_parent" value="0"/> </p> </form> </div> </div> </div> </div>  <div id="sidebar"> <div id="search"> <form method="get" id="searchform" action="https://web.archive.org/web/20100918102224/http://bavotasan.com/"> <div> <input type="text" class="search_input" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}"/> <input type="hidden" id="searchsubmit" value="Search"/> </div> </form> <div class="arrow"></div> </div> <div id="sideads">  <div id="bsap_1237633" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  <br class="clear"/>  <div id="bsap_1237624" class="bsarocks bsap_8982c17d635c33dbe23a7ef930777c37"></div>  </div> <br class="clear"/> <div class="line"></div> <div class="side-widget"> <h4>Most Popular Posts</h4> <ul class="wppp_list"> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/" title="Creating a Mouseover Fade Effect with jQuery ">Creating a Mouseover Fade Effect with jQuery </a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/" title="A Simple Mouseover Hover Effect with jQuery">A Simple Mouseover Hover Effect with jQuery</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/" title="Full Size Background Image jQuery Plugin">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/" title="Magazine Basic v2.6 WordPress Theme">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/retrieve-the-first-image-from-a-wordpress-post/" title="Retrieve and Display Images from a WordPress Post">Retrieve and Display Images from a WordPress Post</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/how-to-create-a-twitter-feed-on-your-web-site/" title="How to Create a Twitter Feed on Your Web Site">How to Create a Twitter Feed on Your Web Site</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/limiting-the-number-of-words-in-your-excerpt-or-content-in-wordpress/" title="Excerpt or Content Word Limit in WordPress: Redux">Excerpt or Content Word Limit in WordPress: Redux</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/processing-multiple-forms-on-one-page-with-php/" title="Processing Multiple Forms on One Page with PHP">Processing Multiple Forms on One Page with PHP</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/turn-text-into-an-image-using-the-php-gd-library/" title="Turn Text into an Image using the PHP GD Library">Turn Text into an Image using the PHP GD Library</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/6-free-vinyl-record-vectors/" title="6 Free Vinyl Record Vectors">6 Free Vinyl Record Vectors</a></li> </ul> </div> <div id="affiliates-ads"> <a href="https://web.archive.org/web/20100918102224/http://themes.bavotasan.com/" class="themes"></a> <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/" class="deletedupes"></a> <a href="https://web.archive.org/web/20100918102224/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest&page=7" class="inmotion"></a> </div> <div class="line"></div> <div class="side-widget redlink"> <h4>Get a Premium Theme for FREE</h4> <p><a href="https://web.archive.org/web/20100918102224/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest" class="wordpress-logo"></a>Don't have a Web site? How would you like to have WordPress and a <a href="https://web.archive.org/web/20100918102224/http://themes.bavotasan.com/category/premium-themes">Themes by bavotasan.com</a> Premium theme installed and configured for <em>FREE</em>? All you need to do is <a href="https://web.archive.org/web/20100918102224/https://secure1.inmotionhosting.com/cgi-bin/gby/clickthru.cgi?id=tinkerpriest">sign up with InMotion Hosting through this link</a>. <br/> <br/> <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/free-premium-theme/" class="fr"><em>Click here for more information »</em></a> </p> </div> <div class="side-widget"> <h4>Support c.bavota</h4> <p>If you would like to support <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/">c.bavota</a> and <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/">bavotasan.com</a>, please use the donate link below. Any amount, even $1.00, is appreciated (a man's gotta eat, ya know).</p> <a href="https://web.archive.org/web/20100918102224/https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5745952" id="donate" class="fr">Donate</a> </div> </div> </div> </div>  <div class="whiteline"></div> <div id="footer"> <div id="bottombar"> <a href="javascript:void(0)" class="backtotop">Back to Top<span></span></a> <div class="col col1"> <h4 class="one"><span></span>Stay in Touch</h4> <a href="https://web.archive.org/web/20100918102224/http://twitter.com/bavotasan" class="footer-twitter"><span></span>Follow me on Twitter</a><br/> <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/feed/" class="footer-rss"><span></span>Subscribe to my RSS Feed</a> <br class="clear"/> <h4 class="two"><span></span>Stay in Tune</h4> <div class="tweets"></div> </div> <div class="col col2"> <h4 class="three"><span></span>Downloads</h4> <ul> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/feed-me-seymour-free-wordpress-theme/">Feed Me, Seymour 1.2</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/magazine-basic-free-wordpress-theme/">Magazine Basic v2.6 WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/sliderota-jquery-plugin/">Sliderota jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/full-sizebackground-image-jquery-plugin/">Full Size Background Image jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/easy-overlay-modal-window-jquery-plugin/">Easy Overlay Modal Window jQuery Plugin</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/snowblind-free-wordpress-theme/">Snowblind v1.1.2 Free WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/8-free-colorful-background-textures-for-designers/">8 Free Colorful Background Textures for Designers</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/stationery-premium-wordpress-theme/">Stationery Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/illustrious-premium-wordpress-theme/">Illustrious Premium WordPress Theme</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/downloads/delete-duplicate-posts-pro-wordpress-plugin/">Delete Duplicate Posts Pro WordPress Plugin</a></li> </ul> </div> <div class="col col3"> <h4 class="four"><span></span>Tutorials</h4> <ul> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/text-rotation-css3/">Text Rotation with CSS3</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/adding-tweet-button-wordpress/">Adding a Tweet Button to WordPress</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/developing-themes-for-wordpress-make-money/">Developing Themes for WordPress: Part 5</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/developing-themes-for-wordpress-options/">Developing Themes for WordPress: Part 4</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/developing-themes-for-wordpress-the-loop/">Developing Themes for WordPress: Part 3</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/developing-themes-for-wordpress-template-file/">Developing Themes for WordPress: Part 2</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/developing-themes-for-wordpress-part-1/">Developing Themes for WordPress: Part 1</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/optimization-tips-speed-up-site/">Optimization Tips to Speed Up Your Site</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/create-bit-ly-short-urls-for-your-posts-in-wordpress/">Create bit.ly Short URLs for your Posts in WordPress</a></li> <li><a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/tutorials/optimizing-your-mysql-database/">Optimizing your MySQL Database</a></li> </ul> </div> </div> </div> <div id="copyright"> <div id="copyright-wrapper"> Copyright © 2010 <a href="https://web.archive.org/web/20100918102224/http://bavotasan.com/">bavotasan.com</a>. All Rights Reserved. Powered by <a href="https://web.archive.org/web/20100918102224/http://www.wordpress.org/">WordPress</a>. </div> </div> <script src="https://web.archive.org/web/20100918102224js_/http://stats.wordpress.com/e-201037.js" type="text/javascript"></script> <script type="text/javascript"> st_go({blog:'5317602',v:'ext',post:'752'}); var load_cmc = function(){linktracker_init(5317602,752,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <script type="text/javascript" src="https://web.archive.org/web/20100918102224js_/http://bavotasan.com/wp-content/themes/bavotasan-2010/js/coolstuff.js"></script> <script type="text/javascript"> hs.graphicsDir = 'https://web.archive.org/web/20100918102224/http://bavotasan.com/images/graphics/'; hs.outlineType = 'rounded-white'; hs.outlineWhileAnimating = true; hs.showCredits = false; </script>  </body> </html>

CINXE.COM

How to Use the Important Declaration in CSS | bavotasan.com