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

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

Managing CSS in Dreamweaver
Illustration by

Organizing style properties


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Organizing style properties

Just how much organization you add to your styles is totally up to you. You can keep your organization strictly to sectioning styles off, splitting layout, typography and color into their own sections, or you can get really detailed with it. In this movie, I want to talk about various ways you can organize your style properties and some of the strategies behind doing so. We really just have a couple of different categories of style organization that we are going to talk about here. One is organizing the properties alphabetically, another one is organizing properties by the type of property and then finally, we have a little section down here where we are going to experiment a little bit with Dreamweaver's default property organizations and try to make some sense out of that. Okay.
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

Organizing style properties

Just how much organization you add to your styles is totally up to you. You can keep your organization strictly to sectioning styles off, splitting layout, typography and color into their own sections, or you can get really detailed with it. In this movie, I want to talk about various ways you can organize your style properties and some of the strategies behind doing so. We really just have a couple of different categories of style organization that we are going to talk about here. One is organizing the properties alphabetically, another one is organizing properties by the type of property and then finally, we have a little section down here where we are going to experiment a little bit with Dreamweaver's default property organizations and try to make some sense out of that. Okay.

So I am going to go back up in my styles to the section where we're going to be organizing these properties alphabetically. So here we have all of our properties for our rule: background, margin, padding, position. Now, why bother to organize these at all? Well, when you're looking through your code later on to try to help solve the problem, resolve the conflict, that sort of thing, it's really helpful if you can quickly and easily find a property. Imagine trying to sort through this and figure out what font you are using, what color; it's really unorganized. Now it probably wouldn't take you that long, but anytime you can save is very valuable.

So what we want to do is we want to rearrange all these properties alphabetically. Now I wish I could tell you that Dreamweaver had a miraculous alphabetize properties command. It does not. So we are going to have to do this by hand, but it's not that bad. Let me show you. So what I am going to do is highlight the property for border. Now be very careful when you do this. Notice that I have got the property itself, the value and the semicolon. Don't forget that semicolon; it has to highlighted. Now, of course you can cut and paste. You can do that. But you can also drag properties around. Watch this. I can just drag this right into that position.

So now border is right after that. I can drag color right after that. Now, why am I stacking them on a single line? Don't I want them on separate lines? I do. But what I am doing is I am going to go ahead and stack them, and then just move them down all at the same time. It's really an interesting technique. We'll just keep going. Let's go ahead and do font, and I am going to put font up there. Also, notice one other thing that I am doing here. When I highlight a property, I could, if I wanted to, highlight all the way over here and get the tab as well. I don't want that. I just want to the very edge of the property. So now I've got background, border, color, font. Those are all more or less in the order that they need to be in.

And the remaining properties: margin, padding, position, text-align and width, those guys are already in alphabetical order. So we are good. Now watch what I am going to do here. I am going to start with width. I am going to highlight all the way up, and get font. Now again, notice how careful I am being here. I've got the closing semicolon on width. Not touching the semicolon on color. Now, I can grab these and just move them straight down until I see this little line and look, it returns font to me. Wow, cool! So all I have to do is do that each time. Just drag that whole block down one line, and then it just sort of pulls everybody down. One more time, and there we go.

So now our properties are organized alphabetically. Now of course if you are writing your styles by hand, you can write them in alphabetical order and save yourself a ton of time, if that is the organizational technique you want to use. Now, for a different organizational strategy, let's go down and look at our next selector. So same selector, same properties, but we are going to organize them in dramatically different ways. Here, we're going to split them by the type of properties. So we are going to have one section for layout, another section for box model properties, another section for presentation, like typography and color, that sort of thing.

So right above the first property, I am going to hit Return and create myself a blank line, and I am just going to type in the word "layout." I am going to highlight that and then apply a CSS comment to it, sort of to gray that out. Now, I'll go down and create another section here, and this one is going to be called Box model. I am going to highlight that, and again apply a comment to it. So you can have comments directly inside the rules. There is nothing wrong with that. There is nothing to say you can't do that. Then finally, I'll create another little section.

You'll notice I am just kind of going down a little bit; obviously these properties aren't organized yet. I am just creating these sections. We are going to do Presentation, and then we'll highlight Presentation and wrap a comment around it, as well. Okay. So now we need to move things where they go. One move that's really easy to make here is position: relative needs to go up under layout. So I am going to highlight position: relative. Notice that I got the semicolon as well, and move it up. Now, background on the other hand, background belongs in the presentation. So I'll move it to presentation. Box model, margin, and padding, how lucky was that? We got all those.

But width is also part of that, and I am going to go ahead and do width and place it there. And if you need to, you can always hit Return or Enter to give yourself a line. Now, do you see what I just did there? I hit Return, but the semicolon came down with me. Actually, syntaxually, there is nothing really wrong with that, but that is a mess. So I am going to make sure that I undo that, and I get that so that the semicolon stays right there. Now, the rest of these guys are all presentation styles, and what I am going to do now is I am going to alphabetize them as well, because I'm just that organized.

Anybody that knows me knows that I am really not that organized. But I am just going to grab these guys and start moving them around, and I am going to put color where it goes, text-align where it goes. There we go. So these guys are now in alphabetical order as well. So now we have a different structural model for our properties, and this is something that if I was going to use this, I would do every single selector, every single CSS rule to get the same thing in the same order; layout first, box model second, presentation. That way, if I'm going and checking out the margins on a property, for example, I know exactly where to find those.

If I'm looking to see if there's been any kind of an offset or absolute relative positioning, again, I know exactly where to find that. So this is another way to organize it, and again it's totally up to you to decide how you want to do that. Now, I mentioned that we would do one more, and that's really just to see how Dreamweaver does this. So I am going to go over to my CSS Styles panel, and since we've been making some manual changes, we're going to have to have a Refresh there, and what I want to do now is create a brand-new CSS rule. I am just going to do a tag selector, and we're just going to do h1, although really any selector would work for what we're doing here.

So I am going to do a tag selector h1, and I am going to define it in this document only. So this is kind of interesting. While you're working in the CSS file, you are free to still use the same dialog box. That's kind of nice. I am going to go ahead and click OK. Now I am going to go in a very specific order here, because I want to prove a point. The first thing I am going to do is go to my Font-size and Font-size, I am going to type in 2em. So that's the first property. Remember, the number one property we did was Font-size. Then I'm going to go to my Block category. So notice that I am going to be jumping around from categories, so just think about the order that we are doing these in. I am going to go to Block category.

In the Block category, I am going to choose Text-align, and I am going to choose Center. Here we go. I am going to click on the Box category. In the Box category, I am going to deselect Same for all for margin and give it a Bottom margin of 2em, for ems. Notice there's no spacing there. If you hit Tab, it will go ahead and populate that out. I am going to go back to Type. So again, we went down the list. Now we are going back to Type. For Color, I am going to type in #333, and then I am going to go to Border next, deselect Same for all, and I am going to do a Bottom border, solid, 1 pixel, #333.

Let's just do one more rule. Go back to our Box model property. So you can see we are jumping all over the place. We are not doing these in order at all. I'll deselect Padding, Same for all, and for Bottom padding we'll do .5em. I am going to go ahead and click OK. Now, think about the order that we did these in. Font-size was first. Text-align was second. Margin-bottom was third. Color was fourth. Border-bottom was fifth. Padding-bottom was sixth. Now, if we look at the rule that's created, font-size was first, oh, but wait! Color wasn't next; text-align was next. And then after text-align, margin-bottom was next, after that border-bottom, and that's our border, and then I did padding.

So obviously, Dreamweaver didn't use the order that those properties were done in to determine how to organize them in the selector. Now, a lot of people infer from that that is random, but it's not random. Take a look over here at the CSS Styles panel - I am going to go ahead and close the Files panel by double-clicking the tab - and we can see if we highlight the h1 rule in All view here, we get summary of all the properties. But there are three ways that you can view this. One is the way we are looking at right now, just those properties; another is a List view, and then the first icon right down here in the lower left-hand corner of the CSS Styles panel is Show category view.

Take a look at categories: Font, Background, Block, Border, Box, List. So Font, these are all things that we can do font with. Block, right there, which would come next, since we don't have any our background, Box model which is right here, and then Border. Now, I can't figure this out for the life of me, but for some reason, it switches Border and Box. I have no idea why, but it does. So what Dreamweaver is doing is organizing these properties in their own categories. So you could almost imagine, above this, a little comment that says Font properties and then another comment underneath it that would say background, another comment that would say Block, and we'd organize them that way.

So there is structure there; it's just not readily apparent. So aside from Dreamweaver's default way of organizing properties, we've seen two popular strategies for organizing our style properties, either alphabetically or through categories of properties. So aside from Dreamweaver's default organizational strategies, we've seen two popular strategies for organizing style properties: either alphabetically or through the categories of the properties themselves. Now, it's a personal decision, honestly, as to whether or not your styles need this kind of organizational structure.

Now, I usually organize my properties alphabetically, and I find that it saves me time when scanning code for a specific property or value. In the end, however, it's totally up to you to decide if you need to take the time required, because it does take extra time, to organize your style properties all the way throughout your site.

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.