Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The central location for controlling styles visually in Dreamweaver is the CSS Styles panel. It's not an exaggeration to say that almost anything you can or need to do with CSS can be done through this panel. It provides an overview of all external and embedded styles, and allows you to create and modify and manage styles, and also allows you to focus on the styling of individual elements. You'll find the CSS Styles panel in the CSS panel group, usually located at the top of the Panel dock, although you're free to reposition it anywhere you'd like.
Now, at the top of the panel, you'll find buttons for two different views: All and Current. The All view gives you an overview of all of the CSS styles applied to the current document, while the Current view gives you a detailed view of the rules applied to any selected element. All right. Well, let's take a deeper look at the CSS Styles panel. In order to do that, I'm going to go to my Files panel, and I'm simply going to double-click the tab, which is going to collapse that group. That's going to give me much more screen real estate to work with, and I get to see the entire CSS Styles panel and not sort of a little cramped view of it.
Notice that you can grab any of these dividers and move them up or down. So, if you need to see more of one area of the panel versus another, you can always sort of customize that to seeing exactly what you need. Now, let's take a look at the All view, and I want to first turn our attention to the top pane. This is where all of our CSS styles are listed. So, here is our main.css. We know it's an external style sheet that's attached to our page because it has the .CSS extension. I can also see it's been assigned the screen and projection media types.
Then I have a listing of all the styles that are inside this CSS file. Now, I can collapse that. Now, on Mac you'll see a little arrow there, but on the PC I'm just going to click on the little minus symbol. I can also see that I have some embedded styles in this page, one to be specific, and I know it's an embedded style, because I see this style tag. All right. I'm going to go ahead and open my main.css back up again, and I'm just going to scroll down and sort of randomly select a rule. Well, #mainContent is already highlighted, so we'll just go ahead and leave that highlighted. Now, if you don't have #mainContent highlighted, simply scroll down, and any rule that you click on you're going to see just below it, in the Properties pane, you're going to see properties for that rule.
So if you select the one that's on there, you'll see the properties for that rule. Now, you can display these properties in one of three ways. The first is the Category view, and you can see these little icons right down here on the bottom left-hand side of this panel. The Category view is going to show you different categories, such as controlling Font properties, Background properties, Block, Border, Box. You can see most of the properties of the #mainContent selector deal with Box model properties. So, we have width, float, margin-bottom. There, you can quickly go through your categories and find properties you want to apply to it, or look at the properties that have already been applied to it.
We also have a List view. Now the List view is going to show you all of your applied properties in order. They're going to appear at the top. Then after that, you have a listing of every single CSS property that you can set. Now, it doesn't mean that you can set it for that particular element. It's really giving a list of everything. So, it's a nice way to sort of quickly find any properties that you want to apply to it. Now, the third view is my favorite, and it's also the default. That is going to show you only the set properties. What I like about that is it sort of clears out the clutter. All you get are the properties that are assigned to this element.
If you want to modify it by adding properties, you can do that by clicking the Add Property link. Now, we're going to take a look at that in just a moment. I'm going to scroll down over here on my Index page, and I'm just going to click right here into this paragraph of text. Now, as soon as I do that, I don't really see any change in my CSS Styles panel, because I'm still looking at all of the styles. But if I click on Current, notice that now it's focusing on this text, not so much any individual rules. In fact, now I get three panes, and the top pane is giving me a summary of this rule, meaning all of the properties from all of the different rules in style sheet that would apply to this element.
Then the middle pane here is giving me a cascade. It's showing me which rules are applied to this. If I click through them, I can even see which values are being applied, and which are inherited, which are not inherited, which are being overwritten. This is a really useful view we're going to take a closer look at a little bit later on. Well, just as in my All view, if I want to add another property to a rule, I could do that. So, I could click right here to add a property, and if I wanted to, I could just type in say margin-bottom. Now, if you're not that comfortable with typing in a value, you're worried about misspelling it or something, you can also grab the pulldown menu, and you can choose Properties that way, which is pretty cool.
Now, just to the right of that, you're going to be typing in a value. I'm just going to type in 1 em. Now, notice that I can type in the em value right after it. I don't have to grab it from the pulldown menu. If I hit Return, it would go ahead and add a 1 em margin-bottom to my paragraph selector. Now, another cool thing that we can do here is that we can enable and disable specific properties. Let's say we're troubleshooting, and we're wondering if this spacing is what we really want between these lines. Well, I could come right over here to my Properties and disable that line-height property to see what it would look like without the line property applied.
I could peruse the whole page and kind of see if it affected my page negatively in other areas. Then I could enable it again simply by clicking. Now, this is called Enable, Disable CSS Property, and you can do this just about anywhere. Notice that the icon is right down here in the lower right-hand corner. Notice that the icon also is showing up here in your Summary for Selection, and you can go ahead and enable and disable here. Even if you're working in the All view, you can still enable and disable properties right there. So, it's a really powerful little tool to use. Now, just sort of going over some of the other options, and I'm going to turn it back on, because often it's horrible, but some of our other options that we have down here. We can delete properties and rules. As we've seen, we can enable and disable them.
We can edit rules. We can create new ones. These are all things that we're going to be doing a little bit later on. But I'm interested in one in particular here, which is to attach a style sheet. I'm going to go over here to All again. I notice that I have one external style sheet, which is main.css. Well, I'm going to go ahead and click the Attach Style Sheet icon right here, and now I can attach an entirely new style sheet to this page. So, I'm just going to hit Browse. I'm going to browse into the 01_05 folder/ _css, going to that folder, and I'll choose our print style sheet, and also I'll go ahead and click OK.
Now, since this is a print style sheet, you can choose whether to add that through the use of a Link tag or add Import. I'm going to use a Link tag, and I'm also able to go ahead and assign a Media type to this. So, I can go to the pulldown menu and choose print, or I could just type it in if I wanted to. I'm going to go ahead and click OK. Notice that we now have a brand-new style sheet attached. Now, one of the things I'm trying to show here is how cool some of the Visual tools are in Dreamweaver. But just because they're cool, doesn't mean that they're going to do everything right. Now the CSS Styles panel does almost everything right. But this is one of the things that it gets a little wrong which is really kind of why I wanted to point it out to you, so that you'll be aware of it.
I'm going to switch over to Code view, and I'm going to make sure I'm looking at my source code. I'm going to scroll up towards the head of the document. So here, we can see the Link tag for our main style sheet. Here we see our embedded styles, and then, right here on line 13, we could see our print style sheets. So, what Dreamweaver does, the order that you create your styles is the order it's going to assign these. Well, even though it's a print style sheet, it's still a bad idea to have it below in the embedded styles. So, I'm going to grab that, cut it, so Ctrl+X or Command+X, and then paste it on the line below our main.css.
I'm just going to sort of reorder those guys. Save that. Switch back to Design view. Now, if I look at my CSS Styles panel, I can see that it's changed order here too. Now, I would love to tell you that you could drag them out here, but it doesn't quite work that way. But it's nice, because it gives you a nice visual clue as to whether your styles are out of order or not. So you can see the order that they're being applied to the page, which is pretty cool. So, I think it's pretty clear that the CSS Styles panel puts an amazing amount of information at your fingertips. Now, it's often going to give you the fastest and most efficient way to create and modify rules, and it gives you a really cool central location to control all of your styles throughout your entire site.
Now, I want you to pay attention, because as we delve a bit deeper into Dreamweaver's ability to control and manage your styles, we're going to be exploring this panel in a lot more detail. Keep in mind that just like everything else, you must fully understand how the panel works in order to use it effectively. Knowing its nuances and quirks, like adding style sheet links to the bottom of the head tag, as well as the strengths are important for making sure the panel is used properly throughout the development process.
Get unlimited access to all courses for just $25/month.Become a member