Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using the CSS Styles panel to organize styles

From: Managing CSS in Dreamweaver

Video: Using the CSS Styles panel to organize styles

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.

Using the CSS Styles panel to organize styles

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.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20864 viewers

James Williamson
Author

 
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

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.