Search Options
close
Search the following clips:
All Clips
Everyone's Clips
My Guides
Sign Up
Install
Learn More
Login
CSS Specificity: Things you should know
BigBadWolf
follow
3
7-27-2007 9:42 AM
760 views
tags:
css
,
web
,
design
,
html
Add a Comment
Login
to Comment. Not a member yet?
Sign up
Today's Top Clips
Agony as a father has to decide: Do I save my wife or my son?
Monday awwwwwwwwwwwwwwwwww.........
24 Impressive Black & White Photos
The Arabs Have Stopped Applauding Obama
20 Stunning Landscape Photos
Baby With Burned Hands Has Legs Mistakenly Amputated
Remember those dreamlike images of Dubai? Guess what. You WERE dreaming
Beautiful Digital Photography
An Inconvenient Truth: "cherry-picked" Data
Man has lived for a year without spending a penny
visit the
Top Clips page
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/00124b52-fbf2-4e7d-ad28-4905c06b19c9/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;"> </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://content8.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>
New from the makers of Clipmarks:
Amplify.com - Don't just share the news...Amplify it!
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
Copyright
Privacy
EULA
OK