Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Without a doubt, the Properties Inspector is one of the most important panels in Dreamweaver. It displays and allows you to edit the properties of whatever you happened to be focused on. It's contextually sensitive, so it changes to display the properties of any object that you select. The Properties Inspector has two tabs: HTML and CSS. The HTML tab allows you to control the properties of HTML elements on the page, while the CSS tab allows you to create and edit existing styles. So let's take a closer look at the Properties Inspector.
I have the tour_detail_bigsur file open from the 02_07 folder. And let's first take a look at the HTML tab. So I am just going to click inside of our HTML tab. And you can see that we have areas for Formatting HTML elements, and performing common tasks like Bolding text, Italicizing it, or even creating Bulleted Lists. Working with it is very familiar to anybody that has ever worked with, say, a word processing program. Let me show you what I mean. I am going to scroll down, and towards the bottom of the page, right underneath Tour Highlights, I can see the first item in what needs to be a Bulleted List, Stay at the historic Big Sur River Inn.
Well, if I start highlighting here and go all the way down to the end of this content, I can simply click Bulleted List, and boom. We now have a bulleted list on our page. It has actually changed the HTML Source Code. If I do a Split View, this is now found within an unordered list. We can obviously use it to change the formatting attributes of HTML elements. So if I click inside Tour Highlights, for example, I can come right down here to the Format menu, grab that pulldown menu, and change that to a Heading 2.
So quick and easy changes to the HTML structure of our page. That's what the HTML tab allows us to do. Let's do one more example. If I scroll up, I can see that I have this little quote right here, "Big Sur is the greatest meeting of land and sea in the world." Well, I want that italicized. So I am going to go ahead and highlight that. And in the HTML tab, I am going to click this little Italic button here, which will italicize my text. Now, this is one of the things about the Properties Inspector that you have to be aware of.
It's a lot like using a word processing program, so lot of people just sort of dive in and start clicking, oh, Bold, oh, Italic, without really understanding what's happening behind the scenes. If I switch over to Split Views, so that I show both the Code and the Design View, I can see that that text that I highlighted is now surrounded by a brand new tag. This is the em tag. And it stands for emphasis, which is typically within browsers italicized. So because I did that in the HTML tab, I got an em tag. But had I done it looking at the CSS Properties, I would have gotten an entirely different result.
So let's switch over to the CSS Properties and take a look at the options that it gives us. Okay. So here I am. I have clicked on CSS, and now I see an entirely different set, although there are some commonalities. Notice, for example, here is the Bold and Italic button. I no longer see my List items or things like that. If I click inside of a paragraph, I can quickly see a couple of formatting options for that paragraph: Font, Size, Color. Those are all things that I can change, but you need to be really aware of what you are doing if you make those changes.
Take a look right over here. We have a little pulldown menu that says Targeted Rule. That is going to tell you which selector within your CSS you are actually going to be changing. Now, the CSS that we have written for this particular site controls the entire site. So if I make a change here locally on this page, chances are it's going to affect my entire site. So I need to be very, very aware of exactly what I am changing. Now, notice that the Targeted Rule is a pulldown menu, so if I grab that, I can choose any of the Classes and Rules that I have defined.
I can choose anything within the Cascade that's affecting the current element that I have selected. And I can even create a brand new CSS Rule to do what I want to do or create a new Inline style. Now, that can be really handy if you guys are doing HTML Emails, as Inline Styles are a great way of formatting that without worrying about the HTML e-mail client that's going to be reading your file. Okay. So make sure, for example, here that we have clicked inside the paragraph. We want to be targeting that #mainContent #mainArticle p Rule.
And that's what we are targeting, by default. Now, if I go down to these properties, I could change the color of this, for example. Let's say I am going to make it #333, which is a gray. I will just hit Enter and now our text gets a little lighter. It's kind of a gray now. The thing is I have just made a site- wide change to my document, because I have actually edited the CSS itself. In addition, the Italic and the Bold tag no longer do what they did before in the HTML Properties. In the HTML Properties, the Bold tag would give you a strong tag.
The Italic would give you an em tag, as we saw. But within CSS, if I highlight some text, let's say I want to focus on an optional 4th day, and italicize that. Well, if I am in the CSS Properties and I click Italic, you will notice that Dreamweaver is prompting me to create a brand New CSS Rule. So instead of modifying the structure of my code, now I would be modifying the Styles of my site. I am just going to go ahead and hit Cancel there. So remember, the Properties Inspector is an incredibly efficient way to make quick edits to elements within your pages.
But you need to keep in mind that changes made to CSS can likely cause site-wide changes. So you should be sure you know exactly which Rule you are editing and how it fits into your overall CSS structure. Also, pay close attention to which of these two tabs, HTML and CSS, is the active tab. Remember the edits to the HTML tab changes the structure of the code, and changes in the CSS tab changes the styles of your page.
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.