Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
As your CSS becomes more complex, it's inevitable that you write a style, look at your design and say, why is that happening? Now, this usually happens after you write a style and just don't see what you expect. The formatting just isn't there. The culprit is typically a style conflict, a situation where either the cascade or the specificity of the rules involved thwarts your desired formatting. Searching through hundreds of lines of code to find these conflicts and resolve them can be time-consuming, and is really frustrating.
Well, that's where the CSS Styles panel comes to our rescue once again. As we'll see in this exercise, it can help us quickly and easily resolve any style conflicts we come up against. Now if I scroll down a little bit, I can see that we have this area down here where we have our current monthly Tour Spotlight, highlighting the Explorer's Podcast, which is a nice little Flash video, and a little section on Have questions. So all those headlines are fairly related, but this one, and we want make it stand out a little bit. It's the Tour Spotlight. We really want people to take a look at that because we're highlighting that particular tour for the month.
So I think we want to change the color of that headline. I want to make it red. It is sort of that nice bright accent color that we have. Now I could do that in number of different ways, but writing a class seems to be one of the most efficient ways to do that. That also allows me to reuse that on other pages for pretty much any headline I want. I just apply the class, and I will have it work. So let's go ahead and do that. So what I'm going to do is just select my main.css. Make sure I am working with the external style sheet, right up here. Create a brand-new CSS Rule. I am going to go ahead and choose Class as the Selector Type, and I am just going to type in .spotlight.
That seems to be pretty self-explanatory. So .spotlight, and I want to define it in main.css. So if you didn't highlight the style sheet earlier, you can just choose from here. I am going to go ahead and click OK, and this is going to be a really easy style to write. I am just going to go right over here to Color, and I am going to type in #cb202a, and if you hit Tab, you'll see that sort of bright red color that this is going to be. I will go ahead and click OK, and of course, writing a style is only half of it. We have to apply the style, as well.
So I am going to click inside the headline for Tour Spotlight, and if you really want to make sure you have the heading, remember you can use the tag selector right here to click on the h2 tag, and that's going to select the entire heading, not just the text inside of it. So now what we're going to do is we are going to go ahead and apply our class. So I am going to click on my HTML properties right here, and you can see the Class pulldown menu. Right now, no class is associated with that. And I want to find this one right here, spotlight, the one we just created. I am going to go ahead and click on that, and now our headline is not red.
So we were expecting it to be red, but it's not. So obviously one of our other styles is conflicting with this, and so we have a style conflict that we need to resolve. Now, if we had to do this by hand, we would have to flip back over, find any of these styles that were related to this, try to figure out exactly which selector is overwriting this and why. Is it a problem with the cascade? Is it a problem with inheritance? Is it problem with the specificity? There is all manner of issues that really could be here. So I think what I want to do is let the CSS Styles panel let me know what's going on. It can help me with this. So I am going to go over to my Files panel again.
I am going to double-click the tab of the Files panel. I'm just going to collapse it, just give me a little more room, because I am working with probably less screen real estate than a lot of you guys. Now currently I'm looking at my styles in the All view, and that's not really helping me here. I want to click on the Current view, and in the Current view, I have got two options, and they are indicated by these two little icons right here. They look like little stairs. The first icon is just going to basically show us, in this middle section, information about any property. So if I click text-align, for example, it will tell me where it's defined, what selector -- in this case, the wrapper rule is driving this.
So it sort of gives you an overview of where all the issues are. Now if I select Color, notice that when I select Color, it says hey color is defined in a rule #spotlight h2. And you are like, hey, that's actually supposed to be coming from the Spotlight class selector that I've created, so what's the deal? Well the icon just to the right of that is an icon that will show us the entire cascade. So if I click on that, this middle section gets a lot larger. As a matter of fact, you may need to rearrange these panel sections, maybe like leave less room for the summary and more room for Cascade, so you can see that there is quite a lot going on here.
So what we are looking at right now is a list of rules, a list of rules is showing up from the closest rule, which is right down here on the bottom, the one that takes precedence over any of the other rules, and it just goes up. This is going to show you any conflicts that might be happening due to specificity. It's going to show you any conflicts that might be happening due to cascade, or due to inheritance. It's going to show these selectors in the order that they're applying to the element. And one at the very bottom is the last one applied, and of course the last rule applied wins. In this case, we have this #spotlight h2, and if I hover over that, it tells me it's defined in main.css, and has a specificity of 101. Okay.
But if I look at spotlight and click that, I can see color has a strike-through, and that tells me that color is not being applied and if I hover it, it does not apply to your selection because it's been overridden by the rule #spotlight h2. So it tells you the exact rule that's causing you grief. Now it's interesting. If I hover over spotlight over here, it tells me that this has a specificity of 10. So I am dealing with one selector that has a specificity of 101. I am dealing with another selector that has a specificity of 10. So it's pretty clear what's happening here. Specificity of the #spotlight h2 rule, that descendent selector, is overriding just a single class selector here.
It's not specific enough to override that bottom selector. So all we have to do now is change the specificity of this selector, and we are in good shape. So I am going to go back to my All CSS styles. I am going to find that spotlight class selector that we wrote earlier. It's probably at the very bottom of your styles. I am going to go ahead and click on it once and then click one more time. And when I do that, it highlights. So I am free to go ahead and change the name here in the CSS Styles panel. I don't have to switch over the code to do that. So I am going to click right in front of the period, for spotlight there. I am going to type in #spotlight and spelling counts, so I got to be very careful there.
So #spotlight h2 and then no space .spotlight. So what this is, this is an element-specific class selector. So you're saying an h2, with a class of spotlight found inside the spotlight region. I am going to hit Enter or Return. Look what happens. I now have a red headline. So now if I switch back over to Current, I can see that that is much more specific now. It's 111 as opposed to 101, and our conflict has been resolved. All that's left for us to do, really, is just move this up into the proper location, so that our styles are organized properly.
Now that was a pretty easy conflict to resolve, I have to admit, but if you have been writing CSS for any time at all, you've probably come across at least one instance of style conflicts that took a long time to resolve. Using the Current view in the CSS Styles panel to display the cascade and the specificity of your rules makes hunting down and solving those conflicts remarkably simple.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 61326 Viewers
61 Video lessons · 93528 Viewers
82 Video lessons · 104383 Viewers
56 Video lessons · 107838 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.