Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although it is a core CSS concept, many students are confused about the cascade of the cascading style sheets and how it works. In this movie we will explore the cascade and how we can take advantage of it to control our styles. Essentially the cascade states that the last style applied will win in the event of any conflict. So when a browser is interpreting your styles it looks at your external style sheets first then it renders those. It then looks for any embedded styles, styles that are going to exist in the Style tag in the Head of the document. That also applies to any styles that you have applied to your document using the Import rule. It's actually contained in the Style tag, so it would also override any external styles. Now lastly inline styles, the styles that you can apply directly to the tags themselves are applied and then they will override any external or embedded that they conflict with. This practice is discouraged against the accepted web standards of separating your structure from your presentation. So we really do it only in sort of a last ditch effort in order to get something to render. So back in Dreamweaver we are going to take a look at how we can take advantage of the cascade to really control specific elements on the page. The cascade also allows us to write modular styles. So we may have something that we want to occur globally throughout our entire site. So we will put that in an external style. But maybe there is something on just one specific page that we want to change. Well, that's perfect for an embedded style because we know it will override our external style sheets without affecting the rest of our site. So we are back in the rendering.htm file that we were working in the previous movie and if it's not visible, make sure your CSS styles is visible and I am just going to click over and switch to All mode so that I can see exactly what's going on in my file. Well, we are going to write a new CSS Rule and we do that by going down to the CSS Styles panel and there is the new CSS Rule icon at the very bottom of it, it looks like a little page with a plus symbol, I am going to click on that. That brings up our New CSS Rule dialog box. Now we are going to write an embedded style and since we are just going to do a very simple paragraph, from the Selector type I am going to choose Tag and I am going to write element selector and I will just type in p although it certainly could have also grabbed it from the pulldown menu. That gives me a list of available tags. Now at the very bottom of this you will notice that it expects me to define this in the external style sheet. Well, since I want to take advantage of the cascade and override paragraphs just in this file and not for my entire site, I will choose this document only. I am going to go ahead and click OK. That brings up our CSS Rule Definition dialog box. Well, I want to go ahead and change just a few things here. I am going to make my Size 1.2 ems, not pixels, because 1.2 pixels would be really small. And for Color I am just going to grab my color-picker and choose kind of a bright red. Now I am expecting this to restyle all my paragraphs because this is an embedded style and my external style sheet is right now currently defining what my paragraph should look like.
So by the rule of the cascade I should override all my paragraphs. So I am going to click OK and see what happens. Well, they all got bigger, but only the paragraphs outside of the sidebar changed color. Now that tells us that there is more things than just the cascade that goes into rendering our style sheets. And we will explore those concepts in a couple of the later movies. Now I wanted to do one more rule here to understand the cascade. Currently you can see in our CSS Styles dialog box under All that we now have a Style tag and if I expand that I can see that I have the one paragraph rule inside that. Well, I am going to go ahead and create another rule and I am actually going to create another paragraph rule. That may seem kind of silly, but it's not uncommon to have multiple definitions of the same element and you are adding and taking away styling to it. So remember we are doing a Tag Selector and we are going to do it in this document only. So I will go ahead and click OK. Now for Size this time I am going to size it at 0.9 ems, so that's a smaller size, and this time I am going to add a property that we didn't had before. I am going to add Line height. So for Line height I am going to do 1.6 ems and make sure that you are not doing pixels, make sure you are doing ems, and that's all we are going to do in this rule. So we are resizing it and giving it a new line height. And once again I want to click OK. I can see that my document changes. Now we have got a lot of different rules now affecting our particular paragraphs. If I click inside the paragraph outside of the sidebar and I switch my CSS Styles View back to Current, now I can really take advantage of being able to see the cascade. You can see that the bottom rule is the one that's being applied last and then as I go back up my styles I can see all the different rules that are applying rendering to my paragraph. And when I click on my bottom one I can see that it's got the font-size and the line -height from that particular rule. When I click on the paragraph above it however notice that it's picking up color, but it's not picking up font-size and font-size has a strike through. When I hover over that I actually get a tool tip and Dreamweaver tells me why that property is not being rendered. So if you are expecting to see it at that size Dreamweaver would give you an idea as to why it's not being rendered and that's because of course the other paragraph rule is overriding it. So we get a nice overview of exactly what the cascade is doing when it renders out that final style. And if I clicked in one of the paragraphs in the sidebar I see that I have a whole another set of rules affecting it. So really understanding the cascade and understanding the order that the styles are going to be applied in is really a good point for beginning to understand how your style will be rendered within the browser. In our next movie we'll focus on another rendering concept, inheritance.
Get unlimited access to all courses for just $25/month.Become a member