Join James Williamson for an in-depth discussion in this video Moving CSS between files, part of Dreamweaver CS3 with CSS Essential Training.
Often, you'll find that where code was originally generated is not the best location for it, and in this case, all of our styles are currently embedded. While that works great for this page, far an entire site to be driven by this layout we need to place the styles in an external style sheet. Let's see just how easy that is to do in Dreamweaver, so if you're following along with me in the exercise files we're going to be going to the 0205 folder and opening up our 2col_layout.htm file from that page, and there it is, with all the presentation stripped out of it.
Now, we do have an existing external style sheet, we just haven't attached it to the page yet. Again, go into the exercise files and open up the folder css. Inside that you'll find a CSS file called main.css. Double-click that to open it up. If I'm looking at this, and I'm just going to scroll sort of up through the styles just little bit, you'll see a lot of presentation markup. A lot of these selectors are very similar to what we've already got in our embedded styles. Moving styles from one location to another is as easy as dragging and dropping if they're both listed in the CSS Styles panel.
If they're not, you can highlight Styles and choose the Move CSS command to move them from one location to the other. If you're moving styles from one location to another and they're pre-existing styles there, Dreamweaver is going to attempt to match them up, and what I mean by that is, if it finds another selector that says twoColLgSide # header, even if there's another h1 or another h2 tag or something within the mix, it's going to try to place them in there so that all of your header styles are together, all of your main content styles together.
It's really doing you a favor, but in this case we want all of our layout styles in one location and all of our presentation styles in another location. That would be extremely hard for us to do because we would have to go in, figure out which styles were which, and then drag them around within our CSS Styles panel. So we'll do a little operation that's going to trick Dreamweaver into placing them where we want them. So it inside your main.css file, I want you to start from the body selector and highlight all the way down to the bottom selector. Once you've got that highlighted, use Dreamweaver's Code toolbar to wrap a CSS-based comment around that code.
So that'll comment the selectors out and so now Dreamweaver will see them as commented code and it won't try to mix those blocks together. Save that file, and let's move back to our two column layout file. Now turning my attention to the CSS Styles panel I'm going to click on the body selector and then hold the Shift key down and click on the clearfloat selector. That's the last one. That should highlight all the selectors in your embedded styles. I'll right-click or on the Mac Ctrl + click those highlighted styles, and from the contextually sensitive menu that comes up we see Move CSS Rules.
Choose that. At this point we have two options here, we can move it to a pre-existing style sheet or we can select a brand-new style sheet to move them to. So if we don't already have an external style sheet and we're just trying to migrate them to one that doesn't exist, we can move them and create it all at the same time. In this case, we do have a style sheet that we want to move these to. I'll choose Browse. I will browse out to the 0205 folder, css, and highlight the main.css file that we were just working with.
I'll select Choose, or Select on the PC, and then click OK. Now, one thing that you didn't see that you would have seen had we not commented that code out, is Dreamweaver would have brought up a dialog box that said how do you want to resolve any conflicts. Well there weren't any conflicts, we didn't need resolve them so we sort of skipped that step by commenting them out. Now if I go up to my main.css and expand that I notice that all the styles that used to be embedded on the page are now in my external style shee. So that's exactly what I wanted to do and I didn't have to go through the process of attaching the style sheet, copying and pasting styles. I was able to do that in one smooth motion, which is really nice and efficient.
Now I switch over to the main.css. It's very easy for us to tell where it's added the styles. One interesting thing about this is notice that in my example, it added the top body selector directly after the ending comment, and that could cause some problems so I'm going to place my cursor between the ending of the comment in the body selector and either hit Return or Enter to break that down on its own line. The previous styles are all presentational in nature and they've been commented and and we want to uncomment them, so to do that we're just simply going to highlight starting with the bottom comment, all the way up, I need to highlight all the styles and make sure that you get the opening comment as well.
Dreamweaver's Code toolbar, in addition to having a commenting feature, has uncomment icon, so I can go ahead and click the Remove Comment, and it will strip that comment out and activate those styles again, which is perfect. Now, I want to scroll right back down now because I need to add another comment between my presentation markup and my layout styles. So I'll just insert another CSS-based comment, and inside that, type in Layout styles start here. Perfect. It's always good if your code is going to be segmented like that to comment the beginning of those areas so that you can quickly find where your layout styles are beginning or where your presentation markup is beginning.
So go ahead and save that and I'll switch back over to my two column layout, see what kind of a change we have in store for us and there we go. Here is some presentation markup finally. We have some background graphics involved. We have a background pattern, notice that we have some icons showing up now, some real typography, so we're well on our way to not only having the layout that we desire but also all the formatting that we desire too, so we're in good shape right now. We're almost finished with this one but unfortunately, not everything has been done yet. If we switch back over to Code View and scroll up through the head of our document.
I notice that all those conditional styles that are specific to IE 5 and IE 6 are still in here. Now rather than embed this in every single page it would be smart if we could take these sort of browser hacks and move them into their own files as well. Using pretty much the same technique we just used, it's a pretty easy move to make. You just have to be really careful with what you copy and paste and move because we've got a lot of comments in here and a lot of conditional comments in here as well. So let's talk about how we're going to do this. The first browser hack deals with Internet Explorer 5. You can see on line 11 we have a little HTML conditional comment that says [if IE 5]. Now everybody's going to ignore that except for Internet Explorer 5 that will now sort of look inside this, and inside this we have a style tag so Internet Explorer 5 would find a brand-new style tag and begin to render these items.
I'm going to go ahead and take the twoColLgSide #sidebar and its comment right there and cut those, so Cmd or Ctrl + X. I will move up to the now empty style tag, and I will paste them inside of my style tag. The benefit of doing that is if I go over my CSS Styles panel and refresh that. I'm going to move over and right-click on our now embedded twoColLgSide #sidebar select, right-click that and choose Move CSS Rules, just like we did last time.
Unlike last time however instead of placing them in the pre-existing style sheet we're going to create a new style sheet. One to just hold the Internet Explorer 5 tags. I will choose OK, and our Save As dialog box comes up. Now in most cases you'll be able to just type right in our Save As exactly what you need. We'll place this in the 0205 css folder. There is a little bit of a difference on the Mac versus the PC. On the PC you can just title it, and it picks up everything just fine.
On the Mac, I've noticed a little bit of a bug from time to time, and right down here where it says URL relative to the document, this is actually where I'm going to name the file. That's going to ensure that the file comes across as the name intended and not untitled. I'm going to leave the css/ because that's the directory structure, but I'll replace untitled with capital IE5_hack.css Now notice as I'm typing, in the Save As dialog box, it replaces that so that way I know it's changing that in both locations.
It's kind of weird that you have to do it there instead of the Save As, that's just the way it works. So we'll choose Save. And that saves our IE5_hack.css, you can actually see the files open. Notice again that our embedded style is empty and our IE5_hack.css is right there. It took the comment along with it as well, which is wonderful. So go ahead and save the file, and I will close that and move back into my two column layout. I need to repeat the procedure with my generic Internet Explorer style. So I'll scroll down and around line 16 I can find the [if IE].
Once again this time I'm going to highlight all the commenting and both of the selectors. I'll cut them, Ctrl or Cmd + X, and I will scroll up and paste them inside my style tags, so once again I'm placing them inside my embedded styles. I'll go over to the CSS Styles panel, refresh that, and highlight both of those embedded styles in the CSS Styles panel. Once again, right-click and choose Move CSS Rules. Again instead of placing it into the existing style sheet we'll do a new one.
Choose OK, and just like last time instead of leaving it as untitled, I'll highlight untitled in the URL string and type in IE_genericHacks.css Again make sure that it's changing in the Save As dialog box as well, save it, and it should open that up. Now, most of the time it'll take all of the comments, but this time it didn't and it didn't take in the bottom comment, because it was underneath the selectors. I'm just going to cut that from the style tag so again Ctrl or Cmd + X, switch over to the IE_genericHacks and paste it so that it does come over. So sometimes you're going to occasionally have some things where you need to do that manually. Go ahead and save that, close it as well. Now we're almost done, but there's one more thing that we need to do.
If I switch back over the two column layout, notice that both of those, the generic hacks and the IE 5 hacks, have come over and they're just being displayed as normal link tags. I only want them to be conditional, I only want these style brought in, if IE 5 or if just any version of IE is detected, so I just need to move these in my code, so I'll highlight the link tag that has my generic hacks and I will move that down to line 20 inside the conditional Internet Explorer statement, then I'm also going to select the line that contains my IE 5 hacks and move that into the conditional statement for IE 5.
So instead of being embedded styles now these are linked external styles that again are still wrapped in these conditional comments, so as we add them to our pages we need to remember these conditional comments. So we're going to save it and we're almost done we just need to get rid of our empty style tag, and now we're in Code View. So it would be pretty easy to highlight it and delete it, but I just want to point out the fact that you can do it from the CSS Styles panel as well, so if I go over to the CSS Styles panel I can click that now empty style tag. Choose the trash can, and it's going to remove it from my code.
So looking at my styles now, I now have just the main.css as an external style sheet. And then I have my conditional comments that will bring in these Internet Explorer-specific styles if Internet Explorer 5 or another version of Internet Explorer is detected. So by using Dreamweaver's CSS Styles panel, we've been able to repurpose and combine CSS files together to deploy the styles the way that our site requires. These capabilities make it even easier to start from pre-existing pages or templates and migrate styles into new sites or files.
- Understanding how Dreamweaver manages CSS
- Working with Starter Pages and Typography
- Designing with CSS in mind
- Separating structure from presentation
- Controlling background properties
- Styling tables and forms
- Building navigation
- Building print style sheets
- Testing and deploying CSS