CSS Specificity: Things you should know


	CSS Specificity: Things you should know

BigBadWolf

7-27-2007 9:42 AM

579 views

tags:

css, web, design, html

Add a Comment

Login to Comment. Not a member yet? Sign up

View the Top Clips from July 27, 2007

Embed This Clip In Your Site...

<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://www.clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/2e9e5eea-9096-440d-b5bd-f1c4273ae6b5/ED01127D-ECC9-44CC-BC0A-0E2AE0221A7F/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" href="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" style="font-size: 11px;">www.smashingmagazine.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/"><P>Apart from <A href="http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/">Floats</A>, the <STRONG>CSS Specificity</STRONG> is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a <STRONG>firm understanding on how specificity works</STRONG>. In most cases such problems are caused by the simple fact that somewhere among your CSS-rules you’ve defined a more specific selector.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/"><P>CSS Specificity isn’t simple. However, there are methods to explain it in a simple and intuitive way. And that’s what this article is all about. You’ll understand the concept if you love <A href="http://en.wikipedia.org/wiki/Star_Wars">Star Wars</A>. <EM>Really.</EM></P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/"><P>Let’s take a look at some <STRONG>important issues related to CSS Specificity</STRONG> as well as examples, rules, principles, common solutions and resources.</P></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/ED01127D-ECC9-44CC-BC0A-0E2AE0221A7F/blog/" title="blog or email this clip"><img src="http://content7.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>

Clipmarks: Home; New Clips; Top Clips; Dashboard

Popular Topics: News; Life; Science; Technology; Entertainment

Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch

Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map

About Clipmarks: About Us; Contact; Blog; Copyright; Privacy; EULA

Search Options

Related Clips

More clips from BigBadWolf

Today's Top Clips