Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 61461 Viewers
61 Video lessons · 93604 Viewers
82 Video lessons · 104396 Viewers
56 Video lessons · 107899 Viewers
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.