New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

The Properties Inspector

From: Managing CSS in Dreamweaver

Video: The Properties Inspector

The Properties Inspector is the contextually-sensitive nerve center of Dreamweaver. It allows you to control the HTML and CSS based properties of any element that you have selected, or that you're currently focused on. From the CSS point of view, there is a lot you can do through the Properties Inspector. It can, however, lead to some pretty unexpected results when editing your CSS, so it's really important to know exactly how it works, before using it to assist you in managing your CSS. The Properties Inspector is going to be located at the very bottom of your interface. Now if you don't see it, you can go up to Window and choose Properties, and that will open it up, and probably open it up in that location.

The Properties Inspector

The Properties Inspector is the contextually-sensitive nerve center of Dreamweaver. It allows you to control the HTML and CSS based properties of any element that you have selected, or that you're currently focused on. From the CSS point of view, there is a lot you can do through the Properties Inspector. It can, however, lead to some pretty unexpected results when editing your CSS, so it's really important to know exactly how it works, before using it to assist you in managing your CSS. The Properties Inspector is going to be located at the very bottom of your interface. Now if you don't see it, you can go up to Window and choose Properties, and that will open it up, and probably open it up in that location.

Now you can see that the Properties Inspector has two tabs. It has an HTML tab and a CSS tab. The HTML tab controls structural properties, so heading tags, paragraph tag, strong tags, things like that. The CSS tab controls your style properties. The information that displays is based on the element you currently have selected. Now we do have this button right down here in the bottom that says Page Properties. If I click on that, I get a summary of some of the Appearance settings and some of the data that we can set for our pages. Notice that we have an Appearance for both CSS and HTML.

Now this actually can allow you to do some things that really isn't done much anymore; for example, setting a Background image on the body tag as an attribute - we generally control those through style. So you want to be really careful about setting certain properties here. Now if you do choose to use this, and you can see that right now mine is populated with a font, some sizing information, background colors, background images, things like that. It's picking that information up from my external style sheet. So it can examine your style sheet, and then let you know exactly what type of general properties you've applied to your page.

So it's a nice way to see a summary of that. If I made a change here, it would actually change my external style sheet. But if I was starting from scratch, it would write those styles for me. Now you want to be very careful about doing that, because if you're used to writing your CSS a certain way, there is no guarantee that Dreamweaver is going to write the styles the same way that you would write them. So you might want to experiment with it, and see if it works the same way that you want it. But typically, I use it just a sort of get an overview of how things are looking. I am going to make Cancel there. Let's take a look at using the Properties Inspector to actually modify our CSS. I'm going to scroll down a little bit to Customer notifications, this heading right down here, and click inside of that.

Now I can see that this is an h3 tag. I can see that by looking at the tag selector, but if I look over at my Properties Inspector, it also tells me that the Targeted Rule is the h3, because I'm inside of an h3 tag. You can also see that if I hover that, it tells me where that rule is found. It's found in my external style sheet, main.css. Well, there aren't too many properties within the Properties Inspector. We have Font, Size, Color and a few other ones. Notice that if I hover over Color, it tells me that it's inherited from the rule h3. If I hover over Size, it tells me it's inherited from the rule h3. If I hover over Font, it tells me that font-family is actually inherited from the rule h1, h2, h3.

So you don't want to infer from these properties that they're all coming from the same rule. What we're seeing here is an aggregate of all of our CSS styles. So if a Font is actually inherited from a tag or a selector above that, you're going to see that here. Now that might make you a little nervous about changing that. So let me show you what happens. I'm going to grab the Font pulldown menu, and I'm going to change that to Arial. Now you'll notice that even though we were inheriting the Font property from the h1, h2, h3 selector, you'll notice that my other headings did not change. The reason for that is because the Targeted Rule over here, it's at h3. So if I hover over Font now, notice that it's inheriting it from the rule h3.

So what Dreamweaver did, it goes ahead and targets the closest selector to that particular element, by closest selector, I mean the closest in the cascade. It applies it to that particular selector. So from that standpoint, it's kind of worry free. You're not going to be changing a selector that is inheriting the properties from. It's going to go to the very closest selector within the cascade and apply it there. If I hold the Alt key down, and that'll be Command+Option key on the Mac, and click on the headline, you can kind of see the cascade. You can see all the different selectors that are applying to the h3. The h3 one is the absolute closest to it, and that's the one where the font-family was applied to.

Now, had I wanted to make that change to all the headings in my site, I could have easily done that by grabbing the Targeted Rule pulldown menu, scrolling up and finding that h1, h2, h3 selector. So if I select that, and target it specifically and then tell it Arial, notice that all of my headings changed now. So you can be very specific about which rule you want to affect, or you can let Dreamweaver go ahead and affect the rule that's closest to the element that you have selected within the cascade. So it's a very intelligent interface, from that standpoint. Now we are also free to edit rules. So if you target a rule and hit Edit Rule, you can bring up the visual dialog box.

I'm just going to hit Cancel. You can also target the CSS panel, and make sure it focuses on that particular rule by clicking that. But the Targeted Rule pulldown menu also has a couple of other things that are pretty neat. If I grab that pulldown menu, notice that I have the ability to create a brand New Rule. I also have the ability to create a New Inline Style. What's neat about that is that's the only place in Dreamweaver's interface where you can create an inline rule without actually having to hand code it yourself. You might be saying, who is going to use inline rules? Well, if you're creating HTML newsletters, for example, that's a really nice way of ensuring the proper styling.

So they're still valid in that instance. It's nice to know that we have a place in Dreamweaver where we can go ahead and create those visually. So that's pretty cool. Now there are some distinct differences between the HTML and CSS tabs. I want to showcase those for just one minute. So if we scroll down a little bit further, we can see that in the first sentence here, it says when you book a tour with Explore California, you should receive two notifications. I'm going to highlight the notification tour confirmation right there. If I'm on my CSS properties, and I go and hit the Bold icon right here, it's going to attempt to create a new Class selector around that.

That's not what I want. I want a strong tag there. So notice that if I click on the HTML tab and click Bold, I get a brand-new strong tag around this. So even though it's the same icon, very different results based upon which tab you've selected. So if I go back to CSS and highlight Explore California, and choose Bold, now it's asking me do I want to create a class, and maybe in this case I do. Maybe I want to create the company class. Notice that I've created a brand-new class, applied it, applied a span tag around it with that. I can even go ahead and change things like Color, for example.

So I can go ahead and sample that color from my navigation. Now it's applied that to company, as well. So now I have a class that I can use any place that I find Explore California, for example. I can simply highlight, grab the Targeted Rule pulldown menu and apply that company class. So the Properties Inspector is actually an incredibly efficient way to manage certain aspects of your site's CSS. You just need to be sure you know where you're focused, and whether the CSS or HTML tab is active. Also, make sure you understand how that Targeted Rule feature works.

That's going to help you determine which rule is going to be edited.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20778 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.