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.
Throughout this title, we've talked about writing clean, organized styles that make it easier to maintain and troubleshoot your code. While this makes our styles easier for us to read, it also tends to make them a little larger than they need to be. To save file size, many designers optimize their CSS before deploying it by stripping out comments and removing white space. This can cut your styles and file size almost in half. And it can produce serious savings in bandwidth for larger sites. Let's take a look at some of the options that we have for optimizing our CSS before deploying it on our site.
So I have the main.css, and if I take a look over in the Files panel I can see that our main.css is 20K, which you know that's not that big, but if enough requests are made over the course of a day, that can take up some bandwidth. So what I want to do is change some of my formatting settings here in Dreamweaver. Now we will notice that we got over 1,000 lines of code, over 1,100 be exact. And if I go up to Edit, I go to me Preferences, or if you are on a Mac you are going to go to Dreamweaver and choose Preferences, I can go to the code formatting category.
So I switch over to code formatting category and click on the Advanced Formatting CSS. There we go. Now currently I've got Each property no a separate line, and I've got All selectors for a rule on same line. So I am going to deselect Each property on a separate line. That's going to go ahead and place it up there. I like the All selectors for a rule on same line. That's going to save me some space. And then I am going to strip out the Blank line between the rules. Okay cool! So again, looking at the preview that's going to be a lot harder to read, but, and it's okay because I'm trying to compress it for a deployment, knowing that I could go back and change the formatting setting anytime I want.
I can go ahead and click OK. Click OK again. And now if I look at my code, I notice that, we really don't have any change. Well, that's because you have to apply the formatting. So I am going to go right over here to my Code toolbar, click on my Show More so I can see my Format Source Code. And I am going to apply my Source Formatting. Now when I do that now, I am down to 246 lines of code. Now that's a significant savings from ,say, 1100 lines of codes. So I'll do a Save All. And now if click over to my _css folder and hit Refresh, I notice that I've saved a whopping 1K.
It went down from 20 to 19. Now honestly this is going to help you more for larger CSS files, files that really are thousands of lines of code. And honestly, we saw some waste here. We have a lot of comments up top that it's going to help you and I when we are working on our styles, but really doesn't help a browser at all. So those could afford to be stripped out. Now that leads me to another strategy that we could do. You could have one CSS file that you use for writing and then another one for deploying. So you would have a non- compressed version of your style sheet that you would work day-to-day on, and then every time you needed to go ahead and upload it you could compress it down, and then upload it to the to a number of sites.
A lot of people work that way. But really, it only depends on how much savings you need to do. Now in addition to Dreamweaver helping you out by sort of formatting the code for you, you can also run it through a compressor service online. And there are a ton of these online. If you just go up and search, or do a Google search for optimizing CSS, you are going to find a bunch of these. I'll show the one that I use. I am going to go ahead and select and copy the code. And then I am going to open up a browser. And I am going to cssdrive.com/ index.php/main/csscompressor.
Now if you really want, you can go to just CSS drive and do a search on that site or look around. Now this is a nice little free service that you can use. And I'm going to say I want Super Compact. I am going to strip all comments out. And then I just insert the CSS code. You can also point to CSS that might already be on a Web site. So I am just going to go ahead and paste my code that I copied earlier there. And I am going to tell it to go ahead and compress it. Now it's going to take it a second, and as soon as I do, it gives me this result.
Now what's really cool about this is notice that it's telling hey your original size was around 19K. We knew that. Your compressed size is now around 14K. We saved 23% of our space. Well just that's not too terribly bad. And now you can see that this is incredibly hard to read. Okay so I am going to go ahead and copy this, so Command+A or Ctrl+A and Command+C or Ctrl+C. I am going to leave this window open in case we need to come back to it. Then I am going to go to my main.css. Now ion this one I am going to change my Source Formatting back to where something that I can actually read.
So I am going to go back to my Preferences and bring up my Code Formatting. And again, Each property on a separate line, Blank line between rules, we want that. Click OK. And apply the Source Formatting. Now the reason we did that is to get sort of this human readability back to this. I am going to do a Save As, actually. I am going to do a Save As. And in my _css folder in the 04_08, I am going to say this is main_noncompressed. All right, there we go. Close that.
And I am going to go back and refresh that. I'm going to open up main.css again, and I'll select everything on the page here, so Ctrl+A, and then just replace it with the code that we got from our CSS compression. And notice that everything here is on the same line. So technically we really only have one line of code. All right I am going to save this, go back over to my Local Files panel and do a refresh. So notice that now we have a main_ noncompressed that we could write into our corrections.
And then we have the main.css, which could be uploaded in its 14K. So yes, it's not that huge of a savings, it's only 6K, but on some sites that can be a deciding factor. And this is really useful when your style sheets are a lot larger and a lot more complex. But honestly, the question you have to ask yourself is is this process worth the effort? Well the real key to this technique is keeping a human readable version of your styles, comments and all, for development work, and then recompressing it each time you need to upload your styles. Now this can be time-consuming.
And in a team environment it offers just one more thing that could potentially be forgotten about during an update. So in the end, the decision to optimize your styles is totally up to you. But it's good to know that Dreamweaver offers you a quick and easy way to add a degree of optimization, without having to jump through any hoops at all.
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.