Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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 , one that's an inline 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, now let's examine the #main h2. That's a descendant selector. That's styling any heading 2 that's found inside of an ID, an element with an ID of main. So it has one ID selector and one element selector and using our table we can see that that gives us a specificity of a 101. So understanding the weight that's given to the different parts of a selector allows you to calculate what the specificity of a rule is going to be and if you have two rules that are applying to the same element on the page you know which one is going to determine the final rendering. So back in our rendering. htm file we will explore specificity. Now I'm going to switch back to Design View from Split Screen View and let's talk a little bit about what it is that we want to accomplish. Looking at my sidebar, and I'll scroll up just a little bit, we've got two headings in our sidebar and they're both heading 2s. So they're both being driven right now, primarily by the rule #sidebar h2, the descendant selector, just targeting any heading 2s inside of our sidebar. We want our second sidebar to have a different visual appearance. So structurally, importance wise, they'll be exactly the same, but visually we want our second sidebar to look a little bit different. And normally people will try to accomplish that by creating a class style. So we're going to create a class style to try to help us with that and I'm going to go down and Create a New CSS Rule and I'm just going to select Class and I'll do the class .secondary. So always remember the period on the front of that.
Again, we'll do it in this document only. We'll just keep the styles local to this page. So I'll click OK and we'll do a little bit more in this one. For a Color we'll just choose kind of a nice green color. So choose whatever green you'd like. For Size, let's go ahead and do 0.9 ems and for Case, I'm going to go ahead and choose uppercase. That's actually the text transform property. So this dialog box is not always going to show you the exact name of the property.
So sometimes if you're looking for text transform you have to kind of hung around and find exactly what it's going to be. I'm also going to switch to my Background. Now I do have a background color already being applied to my heading 2s and I don't want that. So I'm actually going to go ahead and just say transparent, which will pass along a value of, I don't want a background color. I also could have said background None to achieve the same effect. We'll finally go to the Border category and I'm going to go ahead and turn off Same for All, for both Style Width and Color, and we'll do a Bottom style of solid.
We'll give it a 1-pixel width and I'm just going to use the same green color that I used for the rule itself. So that's really all we're going to do to this rule. Now I'm going to go ahead and click OK. Now we've defined it, if I look back in my CSS Styles panel and I go to my All styles, I can scroll up and I can see that now I've a class selector in my embedded styles called secondary. So let's go ahead and apply it. I'm going to click inside my secondary heading here and I'll go down to my Properties inspector and I'll choose secondary.
I didn't get what I expected. I got a Change; you can see it's all uppercase now, but I didn't get everything and this is a very common problem for people when they're writing their CSS they create a class rule and they apply it and not everything applies. So Dreamweaver is about to help us out to understand why this isn't applying. So I'm going to click back on Current and I'm actually going to use the cascading order to figure out why that's not applying. Now remember, and I'm just going to expand this down a little bit so I can see all my rules here. Now the rules are showing up any order that they're applying. So the body of rules applying first, then that's followed by the wrapper, the sidebar, the secondary class style and then finally sidebar h2. So we can see that the class style that we want to drive the primary rendering of this element is actually applying before sidebar h2 and is being overwritten by it.
If I hover over it, it actually tells me, this rule is defined in the file rendering with a specificity of 10. But if I hover over sidebar h2, it tells me now even though it's in an external style sheet, it has a specificity of 101. So the sidebar h2 rule is much higher in degrees of specificity, and that's why it's overwriting secondary. So what I need to do, I'm going to go back to my All styles and I'm going to show you a nice, little, new feature inside of Dreamweaver that I just love and I'm really happy that they added this.
I occasionally need to edit my styles and I'm kind of a hand cutter, so I usually go in Code View and change it that way, but what's really nice is now, right here inside this panel, I can double- click very slowly on my rules and rename them right here. So I can just say #sidebar h2.secondary. So I'm rewriting that selector so that I have a descendant selector that has a class-specific element to it. And when I hit Enter, look what happens. Our secondary sidebar now renders properly. If I go back to current, so that I can see what's happening here. I'm going to hover over this rule now. I can see that it has a specificity of 111. So it has a higher degree of specificity and it's going to take precedence over the sidebar h2 and when we click on sidebar h2, we can see that both color and font size are being overwritten, although padding is not.
So, if you don't specify a property it will continue to display the property from the previous rule. So most of the time when people are having trouble getting their styles to render properly, it's due to either specificity, inheritance or the cascade being deployed incorrectly. Understanding these concepts and then how Dreamweaver can assist you in finding the problem is crucial to writing and deploying efficient CSS. In our next movie, we'll take a detailed look at Dreamweaver's CSS management tools.
Get unlimited access to all courses for just $25/month.Become a member