Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While the CSS Styles panel is where you are going to be doing the majority of the work on your CSS, the Properties Inspector allows you to do a fair amount of CSS-based work directly through it, without having to go to the 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. So I have the index.htm opened here in the 06_05 folder.
Let's scroll down just a little bit so that I can focus on this first paragraph, Explore our world your way, and we are going to explore how the Properties Inspector allows us to interact and change the CSS of this paragraph. So I am just going to click to focus inside that paragraph, anywhere inside of it. Now, in the Properties Inspector, I need to focus on my CSS Properties. So I am going to click the CSS tab and make sure that's highlighted and not the HTML tab. It's a pretty easy to tell because we get some formatting attributes here in place of the other items that we were seeing in HTML.
Now, we are presented with some formatting options, but they are fairly limited. Notice that we get Font, Size, and Color. We also have Bold and Italic, but remember, those two are going to trigger the creation of a brand-new style. We also have text alignment, so Align Left, Center, Right, Justified. Those are some of the things that we can change here in the Properties Inspector. Now, I want to show you something that's really, really important, and when most people first start using the Properties Inspector to change their formatting, they don't really pay attention to this, and it's a big deal.
Notice that as soon as I clicked inside this paragraph, right over here in this pulldown menu, Targeted Rule changed. If I click inside the heading, for example, notice that it's targeting #mainContent h1. If I click inside the paragraph, it's targeting the #mainContent p. Now, what is that? Well, that's a CSS rule that has already been created. That means that that rule is in existence right now in our external style sheet. If you were to browse through your CSS Styles, you would eventually find that. There is the rule, #mainContent p.
So how did it know which rule to target? Well, it picks the closest rule to that element. So the most specific rule that's affecting the element is going to show up within your Targeted Rule. Sometimes that's a really specific rule, like the one we see here. Sometimes it's a really generic rule, such as a paragraph. Now, what that means is that any change that you make to these formatting properties over here will affect that rule. Now, that's not always going to be what you want. So you do have the ability to grab this pulldown menu and choose any rule.
You will find classes down here. Those would allow you to actually apply the class to the paragraph, by the way, not change it. But if you go up from that, you can see all of the rules that are affecting this paragraph. There's #mainContent p. Well, I could shift that, so that it was affecting just that generic Targeted p Rule as well. So it's up to you to either use the default when it comes up or to choose your own. Now, there's another thing that's really important here as well. A lot of people assume that based on the Targeted Rule they are seeing here that these properties come from that specific rule. That's not true.
Notice if I hover over the Font, I get a little tooltip that comes up that says "Hey, the property "font-family" is inherited from the rule "body"." Size, if I hover over that, it says, "That's coming from #mainContent p," and that's our Targeted Rule. Finally, if I hover over Color, notice that that says, "Hey, that's coming from the Rule p." So those three values are coming from three different selectors. So if you were to change one of those properties, it's not going to be guaranteed to be changed in the Targeted Rule. It's going to be changed in whichever rule it's found in.
So in this case, if I change Color, it's going to go back and change that within the paragraph rule. It's not going to add that to the #mainContent p. Let's see that in action. So if I go here and click on this Color Chip, I can choose any color I want. I can even type in a color. But there's something really cool you can do here in Dreamweaver. Check this out. Let's say I wanted to use one of the colors in my interface. I could click on the Color Chip, move my mouse, and I could move it over any area of the interface, even photographs. So let's say I want to pick up the purple color from her shirt. I could go ahead and choose that, and now my paragraphs are that purple color.
Well, notice again, that if I hover over that Color Chip, it tells me that the property color is being inherited from the Rule p. So instead of just changing all my main content paragraphs - let me scroll, and I will show you what I am talking about - I changed the color of all my paragraphs, so all my paragraphs have that purple color to it. So using the Properties Inspector to speed up your CSS workflow does make a lot of sense, but as you can see, you really need to be aware of how the changes you are making might be affecting styles elsewhere in your site.
As your command over CSS grows and you get more comfortable structuring the styles within your site, you will 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 that you don't make unintended changes, either throughout your site or perhaps in targeting the wrong selector.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.