Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
For smaller style sheets, finding the style you need, or the section you need, isn't that much of a problem. As your sites get larger, and your style sheets grow, finding your way around begins to become a bit of a problem. Creating a Table of Contents for your style sheets gives you a quick and easy way to review your sheet's structure, and allows others to quickly locate sections they need to work on. What's more, as we'll see, they can be used to give yourself quick access to specific regions. So, here I have the main.css from the 02_04 _css folder opened.
What I'm going to do is just scroll down below the color guide that we've created. I'm just going to hit Enter to go down to create a brand-new line. Now, I'm going to keep that separator structure consistent, so I'm just going to type in a few hyphens here, and type in a space. Then I'm going to type in Style sheet TOC to let people know what we've got here. Again, I'm just going to finish that with a few other hyphens. Now, I'm going to go down the next line, and I'm going to type in Global constants, because that is the first item, Global constants, in our style sheet.
Now, I'm going to hit Enter to go down the next line, and then type in CSS reset, because that comes next. Now, if you remember from earlier, when we looked at our finished style sheet guide, we saw the sections that we were creating our styles in. So, what you're really doing here is just sort of listing the style sections in the order that they come. Some people prefer to do this at the very beginning of their style sheets. If you're that organized, and you know exactly how you're going to write your styles, exactly where each of your sections are going to go, and you have that really well planned out, then you can go ahead and create your TOC at the beginning.
Now, if you're like me, you might want to do it at the end. I usually do mine at the end, because, invariably, I'll have something come up, and I'll say, okay, well, I guess, these little groupings of styles should really be in their own section. And I might change my mind. So, rather than having to redo the TOC, just because I reorganized my style sheet, I prefer to wait until the very, very end and go ahead and put it in at that point. That saves me a little bit of work that I would normally require to update that. Now, let me give myself a little bit room. We'll go down the next line. I'm going to type in Global classes; on the next line, Home page layout.
On line below that, we're going to do Top-level layout. On a line below that, Region detail styles. All right! Now, here, after Region detail styles, we're going to have a few subsections of Region detail. So, each of the regions, like header and footer and sidebar, they're going to have their own styles sectioned off as well. So, we're going to indicate that through the use of indentation. So, what I'm going to do is go down the next line, and I'm going to hit Tab about three times. I'd like to have a really nice indent here to let me know that these are subsections.
We'll start with Header. On the next line, Navigation, as those styles, of course, come next, and then Main Content. On the next line from there, I'm going to hit Tab twice, because Main Content has its own subsections. Here, I'm going to do Data tables, Spotlight region, and then Forms. Now, next I'm going to sort of go back to those Region subsections. So, I need to outdent my CSS. How do I do that? Well, if you look in your Coding toolbar, right here on the left-hand side -- I don't have enough room to display all these icons, so I'm going to click on this Show More button here.
If you have a higher screen resolution than me, you probably see all these already. I'm going to go right here to the, either Indent or Outdent Code. I'm going to choose Outdent. That's going to take me right back out to the next tab stop. So, here, I'm going to type in Sidebar, and then finally Footer. There we go. I'm going to highlight all of this code, and go ahead and wrap that in a CSS comment, a multiline comment. Again, you can do that by using this icon right there. Now, of course, you could type in those yourself. They are just /**/.
But the beauty of this is that you can just sort of type away and highlight all of it when you're done and apply a comment to it. So, it's really, really simple and easy to do. You just want to make sure that everything changes color, that you don't leave anything off at very end of that. Now, we could be finished with our TOC, but as I mentioned earlier, you can also use the TOC as a means of sort of finding those styles very quickly. That's especially helpful if you have hundreds of lines of CSS, or even thousands of lines of CSS. So, just above the Style sheet TOC area, I'm going to type in another comment.
I'm going to type in some instructions on how to use this. I'm going to type in: to jump to a specific section, search for the unique character pair at the front of each TOC section. I'm even going to pass in a little tip on how to this in Dreamweaver: highlight the special character and use the shortcut for Find Selection, which is Command+Shift+G (Mac).
Then I'm just going to do a little / there and then do Shift+F3 (PC), just so people know different keyboard shortcuts they can use. Again, how much information you give when you're are doing this type of a comment is totally up to you. But that will be pretty easy for anyone visiting our site, or working on a site, to know how to jump down to a specific section. Once again, I'm going to apply the comment here. Okay, now what does this all mean? What do I mean by special characters? So, what we're going to do is we're going to put a character pair in front of each one of these sections.
It's going to be a character pair that you would find in no other place in your CSS. So, you're going to use unique characters and sort of a sequential numbering system to let people know that this is the unique character you're going to put at the front end of the section, when you comment out your CSS later on. So, right before the Header section, for example, you'll do the little section separator that we have here, but in front of the name, you'll put the special characters. Let me show you what I mean. So, click in front of Global constants, and here I'm going to type in ^1. So, the ^ is that sort of up-arrow- looking character right above the 6, if you hold the Shift key.
So, ^1. Now, I'm probably not going to have ^1, ^2, ^3 anywhere in my CSS. Some people like to use the tilde character; some people like to use other characters like the pipe. It's totally up to you. Then we're just going to keep going, and we'll do ^2 right in front of CSS reset. Notice that I'm being very careful to put a space in between those. ^3 for Global classes, ^4 for Home page layout, ^5 for Top-level layout, ^6 for Region detail styles.
Then in front of the subsections, I'm just going to start subsectioning these off as well: so ^6a for Header, ^6b for Navigation, ^6c for Main Content. I suppose I could keep going with that, but sometimes you can go a little too far. So, I'll just use ^6d for Data tables, ^6e for Spotlight region, ^6f for Forms, ^6g for Sidebar, and then finally ^6h for Footer.
Now, how does this work? Well, later on, if we were going to do our first section for Global constants, for example, I could come down here, type in a separator, and then do ^1 Global constants, just like that, okay. So, that might be our separator. A little later on, I could go ahead and comment that out, that sort of thing. So, to jump down to that section, all I would need to do is highlight that special character. Then in Dreamweaver, I can go up to Edit, and we can use the Find and Replace feature.
So, Find and Replace, what that can do for you is, as a Find Next, that will just cycle through all of the elements. We don't have to bring up the Find and Replace dialog box to do that. As I mention in the keyboard shortcut, we can do Find Selection. So, I'm going to highlight that again, and I'm going to go up to Edit > Find Selection. Again, the keyboard shortcut for me on the PC would be Shift+F3. So, if I hit that, notice it jumps right down to that section. Now, that's not that impressive, because that wouldn't be a hard scroll, but imagine you have thousands of lines of code, and you can instantly jump down to that section and start working.
So, that's a really, really handy feature. Now, again, for smaller, simpler sites, you probably won't need anything as complex as a TOC, especially this particular TOC; however, for larger sites, or more complex style sheets, having a TOC gives you a nice resource for exploring the organization of your styles, and a way to quickly navigate through the code.
Get unlimited access to all courses for just $25/month.Become a member