Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of Dreamweaver's greatest strengths is how easy it is to create and manage our site's CSS. In this movie we'll kick the tires on some of the Dreamweaver's new and long-standing CSS management capabilities. Occasionally, you'll write a local embedded style that you later want to place into an external style sheet and in past Dreamweaver releases, you had to do this by either copying and pasting or exporting your embedded styles to a new external CSS file. Dreamweaver CS3 expands on this by giving us drag-and-drop functionality when moving our CSS, even between multiple files. So I'm still in our rendering.htm and I'm going to switch back from our CSS Styles panel. I'll switch to Current, from Current to All. So if you're still in the Current view, you are going to switch back to All. Let me expand this panel down a little bit so that the top panel, so that I can see all of my styles. Notice that we have external styles in a file called rendering_test.css and then we have our embedded styles in the style tag. Now in addition to the drag- and-drop, I'm going to select the first paragraph embedded style. I want to move that up into my external style sheet.
Well, I can either right-click or if you're on a Mac you can Ctrl+Click and I can actually -- there is a new command because a lot of folks who are looking for that Export command, it's not here. It's actually called Move CSS Rules now. If I choose Move CSS Rules, a dialog box actually comes up and basically Dreamweaver is asking me, where would you like to move this rule to? I could move it to a brand-new style sheet, I could browse to another one, but it's intelligent because it says okay, you have rendering test applied to this page, do you want to move it there? That's the default. So I'm just going to say yeah that would be a great location for it. Then when I click OK, notice that really without skipping a beat I noticed that now in the rendering_test.css, that paragraph rule, is applied. It's just sitting there and it's actually removed from my embedded styles. Now that works for anything. If I grab the second paragraph style, and actually hold the Shift key down and click on the other two rules, I now have all three of these rules selected. Well, I can actually instead of having to choose the Move CSS, I can literally just drag these to the exact position within my rules that I want them to appear. When I let go the mouse now, notice that it gives me a little bit of a warning and it says, okay, now hang on, you are attempting to bring a paragraph rule up into the style sheet and there is already a paragraph rule here. Now they're going to conflict with each other. There is something you really want to do. There is actually a checkbox in the lower left hand corner of this dialog box that says use this decision for all remaining conflicts and it will stop bothering you or pestering you with this if you do this a lot. I'm just going to say yeah, I'm going to move the rule anyway. I'm aware of the fact that these two are conflicting with each other and I'm okay with that. So I click Yes and notice that it moves them up to my external style sheet and now my style tag in my document is totally empty and we don't really need it so I'm going to select the style tag and hit the trash again. Now that prevents me from having to go in the code and actually delete the style tag there. There is nothing wrong with me doing it there but it really doesn't matter. Now, when I look at my external style sheet now, I've got all these rules and organizing your rules within your style sheet is incredibly important. Most of the time, and as we go into the CSS layout in our next chapter, you'll see this. you'll want to section your rules based on content. So you might have all your sidebar rules together and all your footer rules together, and that sort of thing. It helps prevent rendering conflicts and that makes it easier to edit the styles. So my sidebar rule, it's down at the bottom of my styles right now. And if I switch over, you'll notice in your dialog box window that you're rendering_test file actually is open. So I'm going to click on that tab and if I scroll all the way to the bottom, I can see that that rule, #sidebar h2.secondary is the very bottom rule. Well, I want that moved up to where my other sidebar rules are.
I could cut and paste it here, but back in the rendering.htm file there is actually a much easier way to do this. So I can come over to my CSS Styles panel, select a rule and simply drag it up to the position that I want it appear. So I could drag it above a specific rule or below a specific rule. I'm just going to put it at the bottom of the sidebar rules. If I go back to my rendering_test.css, then I can see that it is no longer the bottom rule. If I scroll up, I can see that it's right there at the bottom of my sidebar rules. Now you do have to be careful about this. Remember, we've got our two paragraph rules and the order that they're in is incredibly important. If I take the first paragraph and if I actually take the second paragraph and drag it above the first paragraph, watch what happens to the rendering in the text on the page. Well, now the order of the cascade is totally different and we're getting a totally different result. So when you're moving rules around within your style sheet, you definitely want to be sure that they're going exactly where they need to go. So as you can see, Dreamweaver CSS Styles panel puts a lot of power when managing your CSS right at your fingertips. Before we move onto discussing CSS Layout in our next movie, we'll discuss using Dreamweaver's Design-Time style sheet feature.
Get unlimited access to all courses for just $25/month.Become a member
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.