Start learning with our library of video tutorials taught by experts. Get started

Managing CSS in Dreamweaver

Creating sections for styles


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Creating sections for styles

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
Managing CSS in Dreamweaver
4h 40m Intermediate Jun 03, 2010

Viewers: in countries Watching now:

Managing CSS in Dreamweaver with James Williamson shows how to create cascading style sheets that are efficient, reusable, and easy to navigate. In this course, James shares tips on how to find and use panels and tools, and how to deploy style sheets to screen, print, and mobile environments. Course topics include creating customized starter pages, learning to rapidly hand-code CSS through using Snippets, and using Dreamweaver's CSS preferences to deploy lightweight styles. Exercise files are included with the course.

Topics include:
  • Building a CSS-friendly workspace in Dreamweaver
  • Creating style sheets visually
  • Hand-coding styles
  • Working with code hinting
  • Organizing style sheets with color coding and sections
  • Writing global classes
  • Eliminating style conflicts
  • Deploying styles
  • Dealing with browser compatibility issues
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

Creating sections for styles

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.

There are currently no FAQs about Managing CSS in Dreamweaver.

Share a link to this course
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.
Upgrade now


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.

Upgrade now

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 preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



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.

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