Join James Williamson for an in-depth discussion in this video Examining the Cascade, part of Dreamweaver CS4 with CSS Essential Training.
- View Offline
Cascading Style Sheets get their name from the nature of how styles are applied to the page: in a cascading order. Styles can be applied either externally, embedded within the page, or applied inline in individual tags. The order in which they are encountered by the browser determines the element's final rendering. If you really want to break it down to them as simplest term, you could phrase that as the last style applied wins. In this exercise we'll examine the cascade in action, and take advantage of it to control the rendering of our styles. So in this slide example, we have some code over here on the right hand side.
Notice that we have an HTML page, we have in the head of the document, we have a link to an external style sheet. We also have some embedded styles and if you look a little further down, you can find some inline styles too. We don't know exactly where that stuff is, right. We are going to highlight that. So what happens when a browser first opens up your web page? Well, the first thing it does is it looks for any external styles. If it finds those, it will apply them and render them on the page. So in this case we are linking to our external main.css. Now next, it looks for any embedded styles. If it finds those, in which case you will find them here, it will go ahead and apply those as well.
Now, there is something I want to point out here. If the styles in our embedded styles disagree in any way with the styles are in our main.css, the embedded styles are going to win. They are going to overwrite any property that disagrees with something set in main.css, and we are going to see that in detail in our exercise. Now the final thing it looks for is in the inline styling. If it finds an inline styling and that style is written directly into the code as an attribute, it will apply that and again, it's going to overwrite any embedded styles, as well as any external styles, and that's where the name cascade comes from, the styles are applied in a cascading order.
Now as we are going to see in just a moment, this can be turned upside down if you are not careful about how your code is structured. So we'll take a close look at that towards the end of the exercise. Okay, so back in Dreamweaver, we have our cascade.htm file open and right now there is no styling going on whatsoever. So the first thing I want to do is attach my external style sheet. Now the easiest way to do that is to use the CSS Styles panel. So I'm going to open that up and I notice on the lower right hand corner I have what looks to be a little chain link symbol. I'm going to go ahead and click on that to attach a style sheet. Now the easiest way to find this is to browse.
So I'm going to go ahead and browse and I'm going to find main.css. I'm going to go ahead and click OK, and although I could go ahead and assign a media type to that -- we'll talk more about that later. Notice right here I'm adding it as a link and not importing it. We'll import a style sheet in just a moment, and you will get to see the difference. So when I click OK, we see our formatting occurring and if I open up my main.css, I can see all of the styles contained within. So, so far so good. Now let's say this is our global style sheet and maybe this is one section of our website, maybe just a single section that deals with the reviews of books and things like that.
So I would like some styles to be sectional styles that would apply not only to this page, but also other pages within the section, but not necessarily all of my main styles. Well, that's what import is really good for doing. Let me show you what I mean. Go and attach another style sheet and this time we are going to browse and we are going to find that sectional.css and click OK. But whereas last time we added it as a link, this time we are going to import it. Now when I click OK this time, take a look at your CSS Styles panel. It brought in the external sectional.css, but in a very odd way.
It's got it inside the style tag. Well, the best way to figure out what happened here is to switch over to our code. So I'm going to switch to Code view, and I can see that just underneath my external link tag, I now have a style tag opened up, just like if I had embedded styles. But instead of seeing embedded style, I see @import. So @import is another way of bringing in external styles, but it brings it in within a style tag, and this is important because in most workflows this is going to treat these external styles as if they were embedded styles. So based upon the cascade, anything found in the sectional CSS will now overwrite anything in our global or main.css.
So we are seeing the cascade in action, and as a matter of fact, let's see the cascade in action. In our main.css we have a class selector called Title, and the only thing it's doing is applying an italic font style. Now if I look in my sectional.css, I also have a title and it's changing the color, it's applying font-weight to bold, and it also has a text transform to upper case. So you can see all these additional styling that is taking place, but notice that it is still italic. Well, let's make those two disagree with each other and see what happens. So I'm going to grab the pulldown menu and I'm going to choose Normal, and when I do that, notice that it's my embedded style or my imported style that wins, and we see the cascade actually working there.
And so we see a nice physical example of the cascade in action. So in our external style sheet, title is told to italicize, whereas in our imported style sheet, title is told to be normal. Notice that it doesn't affect the rest of our formatting. So really when you have multiple selectors that are targeting an element, they sort of combine, and you see an aggregate of all of the different selector properties. However, if there are two properties that have a conflict, the cascade is typically used to resolve that. In this case, it's changing it from italic to normal. Now let's see that on a much larger scale.
If I look in my main.css, I can see that I have a sidebar ID selector. It's giving in a background color and setting some padding for it and if I scroll down, I can see what the background color looks like and I can see the padding is holding it away from the edge. Well, let's write an embedded style. So this isn't going to be in our sectional CSS and it's not going to be on our external style sheet. The easiest way to do this is to just go ahead and click the style tag and I'm going to choose New CSS Rule. So in the New CSS Rule dialog box comes up I'm going to choose ID and I'm going to type in #sidebar.
So it's going to directly compete with our external sidebar rule. In this case, I'm going to do it in this document only. That makes sure that this is embedded within the style tag. I'm going to go ahead and click OK and we are simply going to change a few things. Like I'm going to change the background color for example. I'm going to click on the Background category, and just pick another color. I'll go ahead and pick orange, but feel free to pick any color that you want. It doesn't really matter. And in my Box category, I'm going to set the width to 500 pixels, and I'm going to go ahead and give it a border as well. So I'm going to give it a solid border all the way around, 1 pixel, and I'm going to use #333, which is sort of a gray for that.
I'm going to click OK and you see a dramatic change in our sidebar. So all of those things that were set in our external style sheet, main.css, are now being overwritten by sidebar. But not everything. Notice that for example, the padding is still being honored, so we are still getting 10 pixels of padding all the way around. Only where we have a conflict, in this case background, are we seeing a change. The other styling was added to this, giving us the ability to combine styling from several different places to create our final rendering. Now the last thing I want to do here is to really drive home the point that the cascade can be summed up "the last style applied wins." Right now we are playing by the rules.
We have external styles, we have styles that we are bringing in and using at import, and we have embedded styles. And if I switch over to Code view, you can see that they are occurring exactly in the order they are supposed to: external, imported, and embedded. So right now the cascade is acting in a very predictable manner. Doesn't always happen that way. Let me show you what I mean. So if I look in my external style sheet, I can see that currently I have an ID selector for header. It has a background color and a padding as well. There is nothing really to prevent me from creating another header selector.
So what I'm going to do is select the very last rule in my external style sheet, and choose New CSS Rule. I'm going to do another ID selector, and I'm going to choose #header. Now, I know what you are thinking, Hey, wait a minute, you have already got that, and why would you add it again? That's a really good question, but in larger style sheets, sometimes it's actually easier than you would think to write a rule twice. You may not remember that you did this for example. So we are going to do that main.css, and I'm going to go ahead and click OK. The only thing we are going to do here is change the background color, so that we have a big conflict between the existing one.
So in this case I'm going to type in #996 and you will notice that that's sort of a darker tan color. So I'm going to go ahead and click OK and I notice that it changes. So the cascade takes place even within the style sheets. If I browse to the main.css, I can see that the header on the bottom is actually overwriting the header on top in terms of background color. So remember, last rule applied wins. Now what if you said to yourself, I meant for that to be part of my embedded styles. Well, we can use the CSS Styles panel to move styles around pretty easily.
So I'm going to go back to Design view, click on my CSS Styles panel, and notice that I have expanded both the main styles and my embedded styles. I am going to grab the header, drag it down below #sidebar, and now it becomes part of our embedded styles, perfect. So now the cascade is doing exactly what we expect it to do, but again, remember the last style applied wins. If I switch over to Code view and look at my source code, I can see that the link tag is appearing above my embedded styles. It doesn't have to. If I cut this and place it below my embedded styles, now when I switch back in the Design view and do a Save All, I can see that that original color is coming back again. Why is that? Because the styles are being applied in the order that they are found.
The embedded styles are found first. They are being applied. Now my external styles are being found and they are applied. Now, that's not really following the proper structure for applying CSS, so why would I even show you this? Well, you are going to run into plenty of places where Dreamweaver is going to do that for you by mistake. If you have some existing styles on your page, and you attach an additional style sheet, Dreamweaver always puts that just above the closing head tag. This can often lead to conflicts within the cascade that aren't resolved the way that you think they should be. So any time you attach a style sheet, be sure to come back in, check the code, and make sure it was placed in the right place.
So as you can see, understanding and executing the cascade is absolutely essential to writing efficient properly rendered styles. By placing styles in external style sheets, we take advantage of the cascade and control a large number of pages with a single document. By importing styles or using embedded styles, we can begin to control specific page instances independently of the global external styles. While mastering the cascade is crucial to understanding CSS, it's just one of the three core rendering principles we'll cover. So next up, we'll take a closer look at inheritance.
- Understanding XHTML and CSS fundamentals
- Understanding and implementing advances in typography
- Using the Code Navigator for faster CSS edits
- Styling form elements while maintaining accessibility
- Customizing the look and functionality of Spry widgets through CSS
- Controlling layout and positioning through styles
- Controlling CSS with the Properties Inspector