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

Writing a style sheet table of contents

From: Managing CSS in Dreamweaver

Video: Writing a style sheet table of contents

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.

Writing a style sheet table of contents

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.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

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


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 Already a member? Log in

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 preferences from 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

Your file was successfully uploaded.

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.