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.
While properly planning and organizing your styles before you begin creating them is essential, it is inevitable that you'll have to do some reorganization as your site changes, or even during the development process. The CSS Styles panel features some pretty powerful organizational capabilities, and in this movie we are going to explore using them to restore order to your styles. Now we are going to focus on our CSS Styles panel in this movie, so I am going to go over to my Files panel. Double-click that tab to collapse that so that I get more room for my CSS styles.
Now you may have noticed our style sheet now has styles in it. So if I flip over to main.css here in my resources and look at the Code View, we can see that all those sections and everything that we created earlier now are populated with Styles. So this is a little further in the development process after I created all those sections, and now the styles have been added. But the styles aren't exactly the way they are supposed to be. So we could go ahead and go back into our code, start copying and pasting and renaming things, and doing things like that.
Or we can take advantage of the CSS Styles panel, which is going to allow us to organize our styles in a much faster and more efficient manner. Now let me show you what I mean. Over here in you CSS Styles panel, make sure you're looking at the All view, so click the all button. And then if I collapse the main.css and collapse the print.css, so here is my external main and my external print style sheet, I can see that I have a style tag here, which indicates embedded styles for this page, and I have a rule for the h2 and h3 selector.
Now sometimes you might just test out a style locally - see how it looks on this page before you commit it to your entire site. Or you might create a couple of rules thinking, well I only going to really need them for this page. And then as you keep working on your site you realize, oh, well I really did need that for everybody, so I probably should have put it in my external style sheet rather than just trying to have it here locally. Now to fix that by hand you'd have to do a lot of copying and pasting and moving back and forth between one document and another. By using the CSS Styles panel, we can just move them in one efficient operation. So what I am going to do is highlight the h2, hold down the Shift key and click on the h3 selector.
I want both of those guys selected. Now after that, I'm going to right -click, or on the Mac Ctrl+click. And you'll notice that we have a command listed as Move CSSRules. Now you can also find that in the CSS Styles panel menu. So if I go to CSS Styles, right over here, top right-hand icon is the menu. I can also find it there. So really either any of those places you can right-click or you can do that. So I am going to choose a Move CSSRules and take a look at our options. We can move them to any existing style sheet that is attached to the page, or we can even move them to a new style sheet.
So if you had a page where you had tons of embedded styles that were driving just that page, and you are like you know what, those could drive my entire site, you can go ahead and export them out to an external style sheet, which will be automatically attached to this page. That's pretty cool. Well we just need this placed in the existing main.css style sheet. So we are going to go ahead and make sure that's selected. We are going to go ahead and click OK. And if I scroll down to our style tag down here, you can see that that is now empty. I also notice that in my main.css, which has been expanded for me again.
The h1 and h2 selector are added at the very bottom. Well it was cool that it moved them for me, but it really totally destroyed my organization because they are not supposed to be down there. Well let's get rid of our embedded style tag first. We don't need that anymore. It's cluttering up our codes. So I am going to highlight that embedded style tag right there. Then go down to the Trashcan icon and click. Now be very careful. Anytime you click that Trashcan icon you only want to do it one time, and you want to be very, very certain of what you have highlighted before you click it. Now I'll close the prints style sheet just to avoid confusion with any of those types of styles.
And again, on the Mac that's going to be a little arrow; on the PC here, it's a minus symbol. That'll go ahead and collapse that down. Now I need this h2 and h3 these are global constants, so they need to be up in this area where their grouping of styles are. And again, with the CSS Styles panel that's pretty easy, as well. I am going to go ahead and highlight both of those again. With them highlighted, I am going to click and hold the mouse down. And I am going to keep the mouse held down the whole time. And I am just going to move up. And you can see I get a little dividing line. And if I keep up, it'll scroll for me. And I am just going to keep scrolling up and up and up and up and up.
And it's kind of a slow scroll, but that's a good thing because that allows you to precisely place them where you want. And where I need these guys is right here, just below the h1, h2, h3 group selector, just below that. So I'm going to see a blue dividing line between those. Let go, and it's moved those back. Now I want to switch over to Code View in main.css for just a moment because I want to point something out about this. You want to be pretty careful about these guys, and if you have a section marker, like right here we have our global classes, if you are moving your styles to a location that's at the very end or the very beginning of one of those sections.
you want to go over to Code View real quick and just make sure that it hasn't placed them in the wrong section. Coming back to Design View, I am going to do a Save All. So we see now we can move styles from one style sheet to another, from embedded to external. We can drag styles around, that sort of thing. Well that Move Styles command was helpful, but the problem with it is that we don't control where in the style sheet it placed our files. We had to do that by simply clicking them and dragging them and rearranging them within the style sheet. Well we can use the drag and drop method to actually move styles from one sheet to the other, as well.
In your main.css, scroll down a little bit until you get to these classes. And I have a .pb before and a .pb after. Okay, well that actually refers to page breaks, which means that those classes belong in the print style sheet, not in our main screen style sheet here. So I'm to highlight both of those guys: pb before pb after. And with those highlighted, again I am just going to click and hold the mouse down on them and drag down this time. Again, we are going to get our scrolling down. And notice that of course we can reorganize them within this style sheet, but as we get down into our print style sheet one of things that you are going to find is that we can move them for one style sheet into the other.
So just hovering over the print style sheet will cause it to open up. And I want to place this at the very, very top of the print style sheet. I am going to let go the mouse. And it just moved them right there. I can actually verify that by going into my print.css, scrolling up, and there they are at the very top. I am going to go ahead and do a Save All and switch back to Design View. So reorganizing our style sheet is pretty easy. We can use the Move Styles command, or we can just take matters into her own hands and drag and drop them. But there are other things that the CSS Styles panel can do to help us reorganize our styles, as well.
I'm going to scroll back up into this main content section here. And there is one thing I want to revisit. When we were naming our classes, there was a class named artImg. And actually, if you highlight the picture that's on the page, you can see that it has class applied to it, artimg, and that stands for article image, but that's kind of misleading. Art might mean something to one person and something to somebody else, so you wouldn't naturally denote article from that. You might draw another meaning from it. So we really need to rename that class.
And now if you've ever done that by hand, you know how much of a pain that can be. You rename the class in the CSS, and then you got to go into the HTML, find every single element that has a class applied to it, and rename it there, as well. And if you don't, then your styling is messed up. So that can be a real hassle. Using the CSS Styles panel, we can do that in one single operation. Let me show you what I mean. I am going to come right over here to the #mainContentimg.artImg. So go ahead and highlight the rule, right- click it, and you want to choose Rename Class. Now if you don't see this let me show you something.
If you click on your selector and then you just sort of hover there for a moment, or click once and then click again really briefly after that, it'll highlight the text. If the text is highlighted like this, it allows you to rename that, but if you right-click you don't get the same menu. So instead of highlighting the text that we've got here, make sure you just click once on the selector very briefly. Then I am going to right- click and choose Rename Class. It's going to say okay you want to rename which class? So you can actually grab from the pulldown menu choose any class you want. So you don't even really have to make sure you are focused on that particular selector.
Here we are going to do art image, and then we are going to rename this articleImage, all one word, lowercase a uppercase I, and we don't have to put a period in the front of it. You don't have to do that for this. I am going to go ahead and click OK. What's really cool about this is now look in our CSS. ArticleImage is the class name on that selector. And then if we click on the image itself, we can see that it had also changed that as well. That is really cool. It's going to find everything in this page and go ahead and rename that class for me. So that's a really neat future.
One brief little problem with that: It doesn't help the rest of the pages in my site. It only helps the page that I have opened. So of course, that's going to cause us a lot of tedious work, right? Well, not really. Take a look down here in the Search panel. In the Search panel, I can see that it just did a Find and Replace in the Current document. So really, what Dreamweaver is doing is it's running a Find and Replace command to find anything with the old name and replace it with the new name. Well that'll be really helpful if we can do that site-wide, wouldn't it? Well if you go right over here to the Search panel and you click the Play button, the Find and Replace dialog box is going to open up.
What's really cool about this is it remembers what you just did. So the Find and Replace dialog box, every single time you open it up, for the most part, it's going to show you the previous Find and Replace. And in case, it was Dreamweaver running that own command. So now I can change it from Current document, I will grab the pulldown menu here, and I am going to choose Entire Current Local Site. So now I'm saying hey go ahead and make this change site-wide. Anywhere in my manage.css, anytime you find any tag with a class of art image, go ahead and set it.
Set the class attribute to article image. Now you may notice these weird special characters in front of that. Those are what we call regular expressions. And they sort of help protect some of any of the other classes that you might have going on. And I'm just going to go ahead and make that change is done cleanly throughout the site. We already know this works. I am just going to hit Replace All. It's going to warn me that hey this can't be undone in files that aren't open. Are you sure? Hit Yes. And now look at all the change that got made site-wide that we didn't have to go in, open up and replace that by hand - really, really cool.
Now, you know it's always best to try to plan ahead, but realistically, you are going to have to make changes, both large and small, to your styles as you work. Understanding the CSS Styles panel can make those changes a lot easier and a lot more efficient.
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.