Viewers: in countries Watching now:
Managing CSS in Dreamweaver with James Williamson shows how to create cascading style sheets that are efficient, reusable, and easy to navigate. In this course, James shares tips on how to find and use panels and tools, and how to deploy style sheets to screen, print, and mobile environments. Course topics include creating customized starter pages, learning to rapidly hand-code CSS through using Snippets, and using Dreamweaver's CSS preferences to deploy lightweight styles. Exercise files are included with the course.
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.
There are currently no FAQs about Managing CSS in Dreamweaver.
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.