New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Managing CSS in Dreamweaver
Illustration by

Optimizing CSS with Dreamweaver


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Optimizing CSS with Dreamweaver

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.
Expand all | Collapse all
  1. 4m 12s
    1. Welcome
      1m 10s
    2. Who is this course for?
      1m 5s
    3. Using the exercise files
      1m 57s
  2. 1h 21m
    1. Controlling CSS in Dreamweaver
      2m 34s
    2. Style formatting options
      4m 59s
    3. Controlling shorthand notation
      6m 9s
    4. Building a style-focused workspace
      6m 10s
    5. CSS Styles panel overview
      8m 18s
    6. The Properties Inspector
      6m 39s
    7. Creating styles visually
      11m 32s
    8. Hand-coding styles
      8m 15s
    9. Code hinting and code completion
      7m 11s
    10. Modifying styles visually
      5m 24s
    11. Using the Code Navigator
      4m 47s
    12. Using CSS Inspect
      9m 52s
  3. 1h 14m
    1. Structuring style sheets
      4m 52s
    2. Writing a style header
      2m 40s
    3. Building a color guide
      6m 5s
    4. Writing a style sheet table of contents
      8m 46s
    5. Creating sections for styles
      9m 10s
    6. Using the CSS Styles panel to organize styles
      10m 29s
    7. Resolving conflicts
      7m 3s
    8. Organizing style properties
      9m 33s
    9. Writing a CSS reset
      5m 20s
    10. Writing global classes
      3m 57s
    11. Creating a style guide
      6m 6s
  4. 1h 7m
    1. Preparing custom starter pages
      11m 32s
    2. Building custom starter pages
      10m 8s
    3. Working with code snippets
      9m 54s
    4. Writing snippets
      11m 30s
    5. Importing snippets
      6m 3s
    6. Understanding snippets libraries
      8m 11s
    7. Building a CSS framework using snippets libraries
      10m 36s
  5. 52m 15s
    1. Writing a print style sheet
      10m 3s
    2. Creating print-specific styles
      10m 45s
    3. Preparing modular styles
      4m 33s
    4. Creating modular style sheets
      7m 9s
    5. Checking browser compatibility
      6m 25s
    6. Using conditional comments for Internet Explorer
      6m 58s
    7. Optimizing CSS with Dreamweaver
      6m 22s
  6. 38s
    1. Goodbye
      38s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Managing CSS in Dreamweaver
4h 40m Intermediate Jun 03, 2010

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.

Topics include:
  • Building a CSS-friendly workspace in Dreamweaver
  • Creating style sheets visually
  • Hand-coding styles
  • Working with code hinting
  • Organizing style sheets with color coding and sections
  • Writing global classes
  • Eliminating style conflicts
  • Deploying styles
  • Dealing with browser compatibility issues
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Optimizing CSS with Dreamweaver

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Managing CSS in Dreamweaver.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Notes cannot be added for locked videos.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.