Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While the CSS Styles panel is where you're going to be doing the majority of your CSS related tasks in Dreamweaver, the Properties Inspector allows you to do a fair amount of CSS based work as well, and sometimes in a much more direct fashion then the CSS Styles panel. It is important to note however, that without understanding what the Properties Inspector is doing in regards to CSS, you can cause some major issues within your site. So let's take a moment to examine how the Properties Inspector works with your site's CSS.
I'm on the programs.htm page, which can be found within the programs directory of the 06_07 subfolder and I'm just going to click in this first link right here for Academic Links because there's a very small change that I want to make to this, and really usually when I use the Properties Inspector to modify my CSS, it's for a small incremental, sort of these immediate changes I want to make, not really these large edits on style. So usually it's for really small, very quick things that I want to do. Okay so I've clicked inside this first link where it says Undergraduate Degrees and I'm going to go look at the Properties Inspector.
Now, remember there are two tabs on the Properties Inspector. There's HTML and there's CSS. I want to make sure that I'm looking at the CSS tab here. When I do that, I see a couple of things going on but the first thing that grabs your eyes, especially if you're a graphic designer coming from another program like InDesign or something like that, is we see this section right over here on the right-hand side, that allows us to choose a Font, a Size, a Color and you're going to be tempted the first time you open up Dreamweaver and start working with it is to highlight an element on the page, and begin formatting it.
But it doesn't quite work that way. You'll notice that if you hover over one of these properties, let's say this Font property. If I hover over in here it, I get this little tool tip that comes up and tells me, The property 'font-family' is inherited from the rule, and then it just goes on this really long sort of CSS reset that I have in my Styles. If I hover over Size, it tells me The property 'font-size' is inherited from the rule 'section.info li' and if I hover over the Color that tells me it's inherited from the rule A. So I've got three separate properties, that are being basically inherited or applied or styled if you will, from three separate different selectors and that's actually quite common in files where you have CSS applied because you would like to write your rules as globally as you can, and have those properties inherit.
It's just a much more efficient way of working. So it's very tempting to just come over here and change something but you're have be aware of where the styling is coming from. The other thing that you want to be aware of is if you do make a change, what rule is that going to be changing. We found that out by coming right over here to the Targeted Rule pulldown menu. You can see that by clicking on any of the elements on the page, this Targeted Rule is going to change to reflect what you've just selected. So by clicking into this first link in this Academic Links sidebar, it's targeting the rule that's applying to any of those links which are inside of one of the Info sections.
Now if that's what I want, and in this case it is, I leave that alone. But it's not what I want you'll notice that I can grab that pulldown menu. I'm going to scroll all the way to the top and just sort of move down. You'll notice that I can apply to any rule that's within the Cascade that applies to where I'm focused, and what that means is, I'm not going to see every single selector in my CSS. I'm only going to see the selectors that apply to the element that I'm focused on. So it helps you sort of filter it out, so that you don't have to guess which rules are applying here. The next thing you can do is you can create a brand new CSS rule.
So if you want to create a new rule targeting this element, I can do that. You can also apply what's known as an Inline Style and it's worth noting this is the only automated way within Dreamweaver to create an Inline Style. Any other way you are going to have to do it by hand. An Inline Style is style that's written within the tag itself as an attribute. So I would go into that link tag and then use a Style Attribute and then write my selector. That's one way to do that. Or I can apply a class, so I could take any other classes that have been written in the CSS, and I can apply those as well. Well I'm actually quite happy with the Targeted Rule the way it is.
So I'm going to leave that alone. So the next thing I'm going to do is instead of just telling it to inherit whatever default font I've placed on the body tag, I want to grab that pulldown menu and I'm actually going to choose that Bitter, Georgia, Times, serif stack that we created earlier and put it in our favorites. So again, it's another great reason to use that favorites list because you get to choose that wherever you are within Dreamweaver. So as soon as I select that, it's going to change the font over here, and the other thing it does for me is it tells me, when I hover over this, that now that property 'font-family' is inherited from the rule "section.info li a.
So this is the rule that we were targeting. So even though it was inheriting it from that long CSS reset before, changing that property isn't necessarily going to change it in terms of the rule that's originally inheriting it from. It's going to change it, based on what's over here in the Targeted Rule. Now you can see that the options that we have here in terms of formatting are fairly limited. We only Fonts, Font Size and Color, we also have the ability to do Bold, Italic and change the Alignment, but for the most part, very small subset of properties. What if you want to edit more than that? Well, you could switch over to the CSS Styles panel, or based on what rule you have selected in Targeted Rule, if you click Edit Rule, that's going to bring up the CSS Rule Definition dialog box.
So it's going to give you very quick access to much broader range of choices for you. Now if you do decide that you want to go to the CSS panel, you can just click right here on the CSS panel button, and it's going to jump to the current view of the CSS Styles panel, and it's going to focus on whatever element you have selected. Now you may or may not have seen that particular button enabled or not. You'll notice that the CSS Styles panel is currently open, doesn't matter if you're looking at the All or the Current rule. If it's open and you click on elements that button does not highlight, it's not selectable.
However, if I minimize the CSS Styles panel, or if I close it altogether, now when I click on an element I can go back, activate the CSS panel button and jump to the current view. So it's one of the things where the circumstances have to be exactly right, in order for that particular functionality to present itself. So using the Properties Inspector to speed up your CSS workflow makes a lot of sense. But as you can see, you really need to be aware of exactly which rule you're adding to or editing, as you use it to modify your CSS. Now my guess is that as your command over CSS grows and you get more comfortable, structuring the styles within your site, you'll find the Properties Inspector an indispensable part of your day-to-day workflow.
Initially however, I really want to caution you to be careful when using it, so you don't make unintended changes throughout your site.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66283 Viewers
61 Video lessons · 96787 Viewers
56 Video lessons · 110486 Viewers
82 Video lessons · 105164 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.