Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of my main concerns with earlier versions of Dreamweaver was the way CSS was automatically generated when code was formatted with the Properties inspector. The resulting CSS was either poorly named, poorly placed, separate from other page styles or a combination of all of these things. In Dreamweaver CS4, the Properties inspector has now become an acceptable way to create and edit styles without disturbing your existing CSS workflow. As we examine the new role the Properties inspector can play in your CSS workflow, we'll also examine some improvements that have been made to Dreamweaver's CSS creation dialog boxes.
So I'm in the 05 folder. If you're following along with me, go ahead and open up the 05 folder and I've opened up the index.htm page. Go ahead and open that up. Now if I scroll down just a little bit past the opening photo here to our main article I can see that I have a secondary heading, "Shooting a Big Apple," and some body copy and neither of them look the way I want them to really look. So we're going to see if we can make some quick edits and changes on these using the Properties inspector without having to do a normal traditional CSS workflow of opening up an external style sheet. So I'm going to click inside the main paragraph and when I do that if I take a look down to my Properties inspector and it's docked at the bottom of your workspace, I have two icons now on the Properties inspector. One shows us the HTML. Now it looks pretty much the way that you would normally expect your Properties inspector to look. One of the things that has changed is now instead of CSS it says Class, which is actually a little bit more descriptive of what that is. So notice we can assign an ID and a class here as well, but other than that not a whole lot has changed.
There is another icon. Underneath the HTML we have CSS and when we click on this, we get a set of formatting options that we've had previous to this, but now these formatting options are really pertaining to our existing cascading stylesheets or some new ones that we may want to create. So you can see we have a targeted selector of h1, h2, h3. So we have this really long group selector. Now, if I'm just looking at this text and I'm thinking well, I'd really rather have this Georgia than Verdana. I might be tempted to do this, which is just to grab the pulldown menu and, "Ah, why don't you use Georgia, Times New Roman, Times and Serif?" It says, "OK. Fine." and changes it.
The only problem there is I really wasn't paying attention and so I've edited a rule that I really didn't want to edit because this is a global rule and something that's affecting a lot of things other than just our article text so if I switch over to the main.css file and I'll just switch over to Code view to make this a little easier to find. I'm going to scroll all way up to the top, to my top rule. And when I do that I can see that the rule that I've edited was a rule that is basically designed to zero out all of our margins.
So I didn't really want to affect that one. So I'm going to go Edit, Undo Edit Source and it'll take that back to where it was before. Now the reason than I did that is because I wanted to show you guys that you have to be really careful about using the Properties inspector. You can't just highlight text and start changing things. You really need to pay attention to what it is you're affecting. In this case, if I click on the targeted rule, I can see all of the CSS that is applying to this. And if I scroll up I see the cascade. So these are all the rules that are applying to the currently highlighted or selected text, and I don't really have one that's focusing on just the paragraphs inside of an article div tag so I need to create one. So once again, making sure that I'm clicked somewhere inside this paragraph, I can see I'm focused inside of a paragraph, which inside of a div with a class of article, which is inside the main content div tag.
So this is really who I want to target. So if I go to my Properties inspector and I grabbed the targeted rule, one of my choices is to create a new CSS rule, and that's what I want to do. So I'm going to choose New CSS Rule and once I have it selected I can click on the Edit Rule dialog box to basically create a new rule. So it's kind of a two step process. So when I click on Edit Rule, up comes my New CSS Rule Definition dialog box. Now there have been a few changes here and one of the changes is that they've really tried to make it easier to write a very specific or maybe a less specific selector based on where you're focused.
So having clicked inside that paragraph to begin with was really important. Now notice that the selector name sort of fills in automatically with where we were selected. Now I could choose Less Specific to make a rule that was a little less specific or I could click More Specific to add a little more specificity to this rule. I'm just going to click Less Specific until I get down to #mainContent.article p and that's a contextual selector. It's going to affect any paragraph found inside of an element with a class of article, which is found inside any element with an ID of main content and that is exactly what we're looking for. Now the other thing to do is choose where the rules going to be defined and it can be in this document only. I'm going to grab the pulldown menu and say let's go ahead and put that in our main.css. So you have a lot of control over this and I really like the ability to sort of increase or decrease the specificity of the rule as it pre-populates.
You're not always going to get the rule you want, but it's a nice starting point. So I'm going to click OK and up comes our CSS Rule Definition dialog box, and this looks pretty much the way you're are used to seeing it. Now I mentioned before that we want it Georgia, so I'm going to grab the Font Family pulldown menu and choose Georgia, Times New Roman, Times and Serif. For font size, I'm going to type in .95 em so we're going to do .95 ems. Now if you've never done this before, and you hate having to type in a value and then grab the pulldown menu for the unit of measurement, you can just type in the measurement directly after it and if you hit Tab, it'll go ahead and pre-populate. So that's certainly a lot easier than having to do that. Now the one time that you do need the pulldown menu is when you're doing line height. We're going to type in 1.6 and I want to make sure I'm using a multiple there. So I'm going to go down and choose Multiple. So we're going to do .95 ems for Size and do 1.6 for Line Height. For color, we're going to do a grey, so I'm going to do #333. That'll give me sort of a medium gray.
And we're almost done. We're just going to go ahead and set some box properties as well. So from our category, we're going to go to Box and we'll deselect Same for all for Padding and we're going to give it a right padding of 1.6 ems and I'm also going to give it a left padding of 1.6 ems as well. So we're going to do a right and left padding of 1.6 ems and for margins we'll deselect Same for all and we'll just give it a top margin of.5 ems. OK. I'll go ahead and click OK and now our main article paragraph has changed and it hasn't really changed anything else around, which is perfect.
Excellent. Now we're going to do the same thing to our headings, but when I click inside "Shooting a Big Apple," which is our secondary heading, if I look at the Properties inspector I can see that there's already a rule there for that, so #mainContent.article h2. Perfect. That rules affecting exactly what we want it to affect so we don't really have to create a new rule here. We just need to edit this existing rule, and using a lot of the properties that we have to the right of that we can make these edits very quickly without having to go to our CSS Styles panel or without having to open up the New dialog box. So let's make a few changes to this as well.
We're going to change the font from Arial, and we'll change it to Georgia so that it matches our article text and we're going to increase the size a little bit. We're going to take the size up from 1.2 and we're going to make it 1.6. And just like that so it can be a bit larger. Now at this point there's some additional changes I want to make to this. I want to add a background graphic to it, maybe add a little bit of bottom padding to it. Notice that we can't do that using just the properties that we see here is so occasionally you still going to have to go over the CSS Styles dialog box or you can do what we're about to do, which is to come over and click on the Edit Rule dialog box. So if you click on the Edit Rule icon, it brings up the dialog box that we were just using, which is the CSS Rule Definition dialog box, and I'm able to go ahead and make those changes.
So I'm going to go my Box properties. For my padding, I'm going to go and deselect Same for all and we're going to go ahead and give it the bottom padding of 45 pixels, not ems but pixels. That will give us enough space for our background graphic and then we'll click on our Background category and the first thing we're going to do is we're going to search for a background image so I'm going to hit Browse. Now remember we're looking in the 05 folder and look in images. And if you want, you can switch to Details so you see a list here and we're going to jump down to our headline graphics and I want to use headline background 6.jpg so find the headline_background6, click OK.
We'll give it a no-repeat so that it only shows up once and for Positioning, we're going to give it a center bottom position, so give it an X position of center and a Y position of bottom. We'll just use the keywords for that. Click OK. And it goes ahead and adds our background graphic, which is perfect. Now another thing I'd like to point out about the Properties inspector down here that may make a couple of you guys nervous. You'll notice that we still have the Bold and Italic option here and now previous versions of Dreamweaver have added either a strong tag or an em tag based on which one of these you click and you might be leery about doing that. Well notice that we are targeting our CSS properties so you should rest assured that that's actually dealing with the font weight and font style of the CSS properties, instead of a strong margin tag. So it won't be adding those. It will be affecting font weight and font style, so that's something that you need to keep track in case you were wanting to do that.
Now using the Properties inspector to do your CSS edits is not going to replace your normal CSS editing and creation methods, but it is going to add quick functionality for simple changes. What's more, the edits are now standards compliant and fit neatly within almost everyone's CSS workflow.
Get unlimited access to all courses for just $25/month.Become a member