Understanding Specificity


show more Understanding Specificity provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS3 Beyond the Basics show less
please wait ...

Understanding Specificity

The third and final CSS concept we want to explore is specificity. Specificity, besides being really fun to say, is one of the least understood and most important concepts when discussing style rendering. Essentially, specificity states that when two rules conflict with each other, the more specific rule is going to win. Specificity is determined looking at the makeup of the selector. On the screen here we have a slide that has a few selectors on it and what you do is you calculate by looking at whether it has an inline value, whether it's an ID, whether it has or contains any class elements or any element selectors and then they are all added up and added to the specificity.

So take a look at the rule <p style="...">, one that's an inline style. So it has one inline, zero IDs, zero classes and zero elements. So it has a specificity of 1000. h1, h2 is a group selector, but there are only elements inside of it so it has a specificity of 2. Further down you get,...

Understanding Specificity
Video duration: 7m 5s 11h 10m Intermediate

Viewers:

Understanding Specificity provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS3 Beyond the Basics

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...