Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of most important things you can do for organizing your styles is to create sections within your style sheets that group specific content, regions or even types of styles. In this movie, we'll continue to organize our style sheet by creating sections for our styles. So I'm going to over to my Files panel, open up the _css folder, and I'm going to open up the main. css file that we've been working on. I'll scroll down a little bit beneath the TOC that we've created a little bit earlier, and just hit Enter to give myself a little bit space.
Now here I'm going to start using that sort of consistent structure that we have for separators. I'm going to start our first one by doing ^1. Remember, we're using these special characters that we created in our TOC to allow us to easily jump down to that section by using the Find Selection feature inside Dreamweaver. It allows us to jump right down to that. Now after that I'm going to type in a few hyphens. Now how many you type in is up to you. I just held the Hyphen key down until I was like that's far enough. What you're looking to do is when you scroll through your styles, you want to be able to find these separators really easy by having them sort of stand out.
So after that I'm going to type in global constants, and then we'll finish that up. And at this point, it's a lot faster, when doing some of these, to go ahead and add the comments as you type. Notice that now I have to highlight this, go over to my Coding toolbar and apply the CSS multiline comment. Now that was okay, and it wasn't that difficult, but frankly it's easier for me to do it myself, and I don't have to worry about whether or not I have any type of separation between any special characters. Okay, now what I'm going to do is from here on out, I'm going to go down and hit Enter twice and start typing on a new line.
Now I could go ahead and type all of this out again, and go ahead and type in the number of hyphens that I need, or I could just go ahead and copy and paste. Copy and paste is pretty nice, but as we're going to see, it's not always going to work. So our next separator, I'm going to type in the comment first, so /* and then space, and I'm going to do ^2, and then again, I'm just going to start doing those hyphens in, and then I'm going to type in limited scale reset. Again, type in my hyphens and then end in about same spot */.
Now how organized you get this is up to you, but notice that I'm using pretty much the same width for each one of these guys. Because some of the titles are longer or shorter than others, some of them need more hyphens or less hyphens. It's really a personal call, how you want to do this. There's no set way to do this. So you could certainly copy and paste. You could just do one from scratch. Now later on in this title, we'll just talk about something called a code snippet. And so if you're going to always structure your CSS in this manner, it would make sense to create sort of the sectional marker like this as a snippet so that you don't have to keep typing it.
Now let's go down to the next line, and I'm going to do /* again and ^3. Let me go ahead and type in my hyphens here, and then I'm going to type in global classes. Finish that out by mimicking the structure again, hyphens and the */. Now, if you're going to be typing in these comments by hand, /* */, make sure that you see the color change to gray as you finish it up. You don't want to leave this open because notice that I could go down to the next line and start typing, and I could do /* ^4 and just keep going.
Everything remains gray. It's no big deal. But eventually I have to close this. If I don't, the CSS underneath this would still be considered commented out. Let me show you. If I go down here and I type in an h1 selector, notice that it's grayed out. That would not be rendered. So if you're going to type those by hand, make sure you close them properly, */. After global classes, we're going to do home page specific layout styles, and then we'll finish that up.
So I think you can see what I mean here. Obviously, there were too many hyphens on the front end and not enough on the backend. So you can sort of adjust those if you would like. And again, how strict you are with this is up to you. Remember, these sectional markers are going to be separated by dozens of lines of code. You will very rarely see them on one screen at same time. They're really for your benefit as you're scrolling to sort of catch your eye. Again, hit Return twice, */ and here we're going to do ^5, and this section is going to be the top level region layout styles.
I'll finish that up by doing some hyphens and then */. Notice that I'm giving two lines of space between these guys, as well. I want enough space in there to make it really easier for me to go in and start typing within that section without having to hit Return or Enter all the time. Next up, we're going to do region detail styles. Again, I'm going to finish that up, as well. Now you can put additional comments here if you'd like, to sort of identify things. For example, let's go back here to the top level region layout styles. Maybe you want somebody to know what you're referring to there, and you could really do this for any of these sectional headers.
I'm going to go down to the next line here, and below that I'm just going to type in: /* top level regions are header, mainNav, mainContent, sidebar and footer. Then I'm going to finish that with */. So these are the actual ids of the div tags that are going to be used for sectional content in our site. So we're basically just letting people know what we consider to be a top level region: any div within the id of mainNav, mainContent, sidebar, footer.
Those are the top level regions in our file. You can be as instructive with these sections as you want, or you could just not type them in at all. That's either for your benefit or the benefit of anybody on your team. All right, now I want to go ahead and finish this off by doing all of our region detail styles. Remember, our TOC is indicating that these guys are subsections. Instead of using a main section indicator like we have here, we'll do a smaller version of that, sort of to denote its level of importance within the code. In fact, that it is a subsection.
So I'm going to hit Return to go down to the next line a little bit. And here, I'm going to do /* and then no hyphens. I'm just going to immediately type in the word "header." After that, I'm going to do ^6a. So here we're putting the indicator on the back end and not in front of it. That's really a personal choice. If I don't have sort of long dividing line, I like to have the name of the section at the very first so that people can read it very clearly. So */. And we're just going to follow that from here on out.
So after that we're going to do navigation, and we're following the following the exact same order that our TOC is in. That's going to be ^6b and finally */ and on the next line /* mainContent region, and that, again, is going to be ^6c, and that's going to be */. Next, we're going to start a comment agai,n and underneath that it's going to be the mainContent specific regions.
We're actually not going to put an indicator here. Now the reason for that is we're just sort letting people know that okay within the mainContent there are further regions that need to be identified. So if you'd like, you can go just on the next line to let yourself know that these are grouped, not even give any spacing here, and then we're going to do /* data tables, and we'll pick back up with our indicators, so ^6d */ below that, and I'm just going to go back to having that sort of double-spacing between those areas.
Here, we're going to do spotlight region. Now again that's going to be ^6e */. And then again go ahead and do multiline comment here, and I'm going to type in form styling. That's going to be ^6f */, and we're almost done, */ sidebar, which is going to be ^6g */, and then our last one.
So write your comment, and we're going to do footer region, which is ^6h */. Well, there we go. Now we have all of our sections ready to go, and we can just put as much CSS between these guys as we need. So the structure of our CSS is built. Now honestly, the strategies for grouping styles and these sections is entirely up to you. I recommend taking some time to think about how your site is structured, whether you want to separate properties such as layout typography and color, so you can sort of do that - we've got some layout styles I have put in here, but we don't have typography and color pulled out - and then equally important, what the needs of your site will be in the future.
The proper organization of your styles will create a much more manageable site, and it's going to make updating and scaling it easier for you and any of your team members. If planned properly, that organization should start right here as your styles are being created.
Get unlimited access to all courses for just $25/month.Become a member
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.
Your file was successfully uploaded.