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.
Regardless of the method that you choose to create new rules in Dreamweaver, when creating a new CSS rule visually, you'll use the New Rule dialog to specify the selector, and the CSS Rule Definition dialog to set the rule's properties. While this process is fairly straightforward, knowing the ins and outs of it can really help speed up the creation of CSS in Dreamweaver. As you can see, our page currently has no styling whatsoever. To get structure on the page, notice we have a body tag, a div with an id of mainContent, but past that, really nothing going on, style-wise.
So the first thing I'm going to do is go over to my Files panel and collapse it. Again, that gives me a nice, larger view of my CSS Styles panel, and I want to create a New Rule. So I'm just going to go right down to the bottom of CSS Styles panel, and I can see there is an icon right down here. That looks like a page with the Plus symbol on it. I'm going to go ahead and click that to create a New Rule. Now this brings up the New CSS Rule dialog box. This is where you're going to tell Dreamweaver which elements on the page you want to target, so what Selector you want. Notice that we have several different types of selectors that we can choose from: classes, ID selectors, Tag, which is also referred to as element selectors, and Compound selectors.
The Compound Selectors pretty much are anything you want. Usually they're descendent selectors, but that means you can just type in anything you'd like into the dialog box. I'm going to choose Tag. I can go ahead and grab from the pulldown menu in the Selector Name whichever tag I want, or if I'd like, I can also highlight it and just type it in. So let's go ahead and do the body tag. So either I grab that to the pulldown menu or just type in body. Now spelling counts here, so if you're going to type into this dialog box, make sure you type everything correctly. Now after you tell it which type of selector you want, and then after you define the selector, the next thing in this dialog box is to choose where that rule is going to be located.
Now in this case, we're going to say, This document only, but notice we can also attach it within a New Style Sheet File. If our current page had a style sheet already attached to it, we could also place it in there. So for this one, I just want to say, This document only. So I'm going to go ahead and click OK, and now we're presented with a brand-new dialog box. This is the CSS Rule Definition dialog. Now notice that on the left- hand side we have categories. So we can look at the properties regarding Type, Background properties, Box model properties, Positioning properties, all sorts of categories over here.
I'm going to stick with Type for the moment, and what I'm going to do is go to Font, grab the pulldown menu and choose Georgia, Times New Roman, Times, serif. So you can see that within this dialog box, there are already a lot of predefined font stacks in here. If you're coding by hand, you'd have to type in those font stacks yourself, but Dreamweaver has a lot of those already in. You're free to create your own, if you want to use one that Dreamweaver doesn't have by default. For font size, I'm just going to choose 100, and I'm going to type in percent. Now there are plenty of units of measurement that you can use.
You're free to grab the pulldown menu here and use whatever you'd like. But if you know the unit of measurement you want to use, you don't have to do that. You can just go ahead and add it directly after the number itself, as I did here with percentage. If you hit Tab, notice that it will go ahead and populate that there. So that works perfectly. Now I'm going to go to the Box Category. In the Box Category, I'm going to choose 0 for Padding, 0 for Margin. I'm just going to leave Same for all selected. So I'm going to go ahead and click OK. Notice that our font changed, font size may have shifted on you just a little bit, but also our content is now budding up right at the edge of the page, because our default margins and padding are now gone.
Notice in the CSS Styles panel it now shows you that selector, and we get a nice overview of the selector, as well. Let's go ahead and create another rule, but we're going to have Dreamweaver sort of shorten that process. I'm going to click right here in the headline, Got questions. You'll notice its right there inside of an h1 tag. So I'm going to go ahead and choose New CSS Rule. When I do that, at first it's going to try to do a Compound Selector because there is some structure involved here. But I'm going to switch that to Tag, and notice that it automatically puts h1 in there, because that was the element that we were focused on.
Once again, I'm going to say, This document only, and click OK. For that one, I'm going to choose a Font-size of 2em. Notice again, all I have to do is type em directly after that. For Color, now when you choose a Color using any of Dreamweaver's visual tools, you do get a Swatch panel. Now at first, people get really excited about that, but the reality of it is you're not going to be able to save your Custom Colors to this. So this is just the Web safe color palette. You do have a Color Picker, so you could mix a color together if you'd like. That would work out just fine. You could also type in the hexadecimal value directly right here.
Now there is also another feature here that I really like about this Color Picker. Notice that if I click the color chip, I can go right over here to the image and really anywhere within your document window, and I can just pick a color directly out of that. So if I want to get that particular blue, I can click that. If I hit Apply, I can preview those changes. You can see I can preview the color here. Now I'm actually going to type in the hexadecimal value. So I'm going to leave the pound or octothorpe character there, and right after that I'm going to type in 193742. So unfortunately, it's not going to remember those colors for you, or store them, so if you have Custom Colors that you're going to be using, you're probably going to type this in manually each time.
Now, I'm going to go to my Box Category. I'm going to deselect Same for all for Margin. I'm going to give it a Top margin of 0, a Right margin of 0, Bottom margin of 0.4 ems and a Left margin of 0. I certainly could have just gone right down to the Bottom margin and chosen that, as well. We can go and click OK. Now I can see all of my summary of my properties there. Now I'm going to scroll down a little bit. So far, we've done two element selectors. Let's take a look at writing a different type of Selector. So if I scroll down to the Customer notifications paragraph, I can see in the first line we have right here, When you book a tour with Explore California.
So I'm just going to highlight the words Explore California. Maybe I want those styled a little bit differently than the rest of my page. So with that text highlighted, I'm going to click New CSS Rule. Now interestingly enough, you'll notice that Dreamweaver went ahead and automatically chose Class for Selector Type. It did that because I had a range of text selected and not in one specific tag. So I'm just going to go ahead and choose a Selector Name for this. I'm just going to type in .company. Now the dot is important. It precedes any Class Selector. So I want to make sure it's typed in, and then the word company right behind it.
If you leave that off, Dreamweaver will place a dot in there for you, but it's a bad practice to get in the habit of doing. So make sure you remember to place a dot before any class name. Now so far, we've placed these rules in the current document, but what if you wanted to create a brand-new style sheet? Well, creating a new rule and a new style sheet all at the same time is a pretty efficient operation, if you're creating a new style sheet for your site. So I'm just going to choose New Style Sheet File. Click OK. Now I'm prompted by an entirely new dialog box to go ahead and name this particular style sheet. I'll go inside the _css folder, and I'm going to save it as main.css.
I'm going to go ahead and Save that. So you'll notice it went ahead and created the style sheet and attached to the page in one operation, as we're creating the style. That's pretty efficient. So I'm going to go ahead and change my Font-weight to bold. I'm going to go ahead and apply that same Color. Now again, it would be really helpful if you can remember it for us, but it can't. So I'm just going to type in #193742, and go ahead and click OK. Now you'll notice that nothing changed on the page. Well, it created the class, but it's not going to automatically apply it for you.
So I can go ahead and go down to my Properties Inspector, and through the use of this Targeted Rule, I can grab that pulldown menu and just apply the company class to that range of text. Here we go. Now we have our new styling. Before we finish, let's do one more selector. I'm going to go right up here to my image, and I'm going to click on that to image to select it. I'm going to go back over to my CSS Styles panel, and click New CSS Rule. Now as soon as I do that, and notice again, it keeps trying to do Compound Selector. Compound selectors by and large will be descendent selectors, meaning you're targeting a specific element inside of another element.
You're really free to type in any Selector that you want. I do want to point something out though. Let's say that for whatever reason, you just chose Tag, ID, or Class. And then you decide, well, I just want to type in a Selector. So, maybe I might type in #mainContent img.articleImage. So this is a pretty complex Selector. I'm targeting a Class-specific element selector, img.articleImage, and I'm doing that inside of the mainContent element. Now if I go and click OK, Dreamweaver says no, you can't do that.
Class names must start with an alphabetical character. To be honest with you, if there is one thing that annoys me about the New CSS Rule dialog box, it's this. If you're not paying attention to which Selector Type you're trying, you might just go ahead and start typing. Well, when you click OK, you're going to start typing all over again, because the really bad thing about this is that now when I go down to Compound, I lose what I was typing. So you want to always double-check this first, and make sure you have the Selector Type that you need. Now another nice thing this does is it tries to write the selector for you.
So you can see that we have an image selected inside here, which is inside of a paragraph, which is inside main content. So that's the descendent selector that it gives us. I can also tell it to be Less Specific or More Specific based on its location. Most of the time that can really help you and can speed up the creation of your selectors, but in this case, it's not really going to help us. So I'm going to remove the paragraph. I'm going to make sure the space is still there, and I'm going to add the .articleImage Class Selector to the image element. So what we have here again is #mainContent img.articleImage, all one word, okay? So I'm going to make sure Compound Selector is up here, so I don't have to type that again.
Make sure it's doing it in This document only. I'm going to go ahead and click OK. I'm just going to do a couple of choices here. I'm going to go to my Box Category and Float it to the right. I'm going to go to my Block Category and change the Display of this to a block-level element. Then finally, to keep the text away from it, I'm going to go to the Box Category, and set some Padding. So I'm going to turn Padding off. Do 1 em for the Padding for the Top, 0 for the Right, 1 em for the Bottom, I type in 1 em and 1 em for the Left.
So if you're used to hand-coding your styles, one of the things you have to get used to in this dialog box is where is everything? So you'll notice that I just clicked, and said, okay, let's go to Box and get my floating. Let's go to Block, and get the Display properties. So it's going to take a little while before you're totally comfortable with where all your properties are. Now, you're also not going to find all of your properties. Notice, for example, if I go to Border, I don't have the Border Collapse property. It's not here. The CSS3 properties aren't here. So don't expect to find everything in this dialog box. So if you're used to hand-coding, there are some properties that you're still going to need to hand-code.
If you're not used to hand-coding, and kind of hoping that you don't have to do that. Notice this dialog box is pretty thorough, but it doesn't have everything. So I'm going to go ahead and click OK. I will apply that class of the image by selecting it, and then choosing articleImage. Notice that our text is now floating around the image. I'm going to click on Live View just to make sure yeah, okay, so that is doing exactly what I wanted it to do. Cool! So creating styles visually in Dreamweaver is pretty fast. But it is a process that can be a little frustrating, if you don't understand why certain things are happening the way they are. If you prefer to hand-code, I doubt this process is going to totally replace that method of writing styles for you full time.
I would encourage you, however, to try it and become familiar with it. There are many instances where adding new rules through the visual dialogs can actually speed up your workflow.
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.