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

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

Organizing style properties

From: Managing CSS in Dreamweaver

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.

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.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

41 video lessons · 20778 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

Are you sure you want to delete this note?

No

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.