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

Editing CSS through the Property inspector

From: Dreamweaver CS4 New Features

Video: Editing CSS through the Property inspector

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.

Editing CSS through the Property inspector

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.

Show transcript

This video is part of

Image for Dreamweaver CS4 New Features
Dreamweaver CS4 New Features

16 video lessons · 18615 viewers

James Williamson
Author

 

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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS4 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

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.