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

Structuring style sheets

From: Managing CSS in Dreamweaver

Video: Structuring style sheets

In this chapter, we will talk about best practices for structuring your styles and how Dreamweaver can assist you in making sure your styles are organized properly and are well-commented. Having a strategy for structuring the styles in your site is crucial to ensuring that your styles work properly, and are easy to maintain and update. In this movie, we're going to examine the Explore California style sheet and discuss the theory behind its organizational structure. So I have the main.css file open. This is our finished style sheet, all organized and structured, and I just wanted to take a moment before we start working on the style sheet and structuring it to explain this strategy behind the structure that we've got here.

Structuring style sheets

In this chapter, we will talk about best practices for structuring your styles and how Dreamweaver can assist you in making sure your styles are organized properly and are well-commented. Having a strategy for structuring the styles in your site is crucial to ensuring that your styles work properly, and are easy to maintain and update. In this movie, we're going to examine the Explore California style sheet and discuss the theory behind its organizational structure. So I have the main.css file open. This is our finished style sheet, all organized and structured, and I just wanted to take a moment before we start working on the style sheet and structuring it to explain this strategy behind the structure that we've got here.

At the very top of the style sheet, we have a header, where basically we explain what this style sheet is. We explain the copyright data, if you want to put that in there, that sort of thing. If you're working in a team environment, you know, within this header, you might put a version number, when it was last modified, things like that. Now the thing I like doing in all my style sheets, just below that, we have a Color Guide. This Color Guide is telling myself and other people what colors are used and what those colors are typically used for. So now when I want to write that, if I forget exactly the hexadecimal value for that, I can come up and copy and paste it, and I can also say, okay I'm doing a heading. What colors should I use? And I can read through this to help me with that.

Just below, that we have a table of contents and in the table of contents, it gives me an overview of how my styles have been structured. I have some constants which are global to the entire site. I have a CSS Reset, which sort of is in the middle of those. I have Global Classes that work throughout the entire site. And then from there, I have some styles that are specific to the Index Page or Home page. I have a Top Level Layout Styles which are sort of Global Layout Styles, and then I get into the individual regions themselves: Headers, Navigation, Main Content. all the way through.

Now, that's the way that I like to organize a style sheet. That doesn't mean that it's the way that you're going to organize it. I know a lot of people that will organize the layout in one section, typography in another, color in another. It's really what works for you. The thing is you want to be consistent with it, and you want to make sure you're following that structure so that if you write new navigation selectors, for example, they go in the proper section. Now you'll notice I've done something here to the table of contents. I have sort of these special characters, sort of the ^4, ^5. Well, that actually helps me jump to that section. You'll notice that I've even added a little comment here that says, hey if you want to jump to that section, you can highlight it, hit a specific keyboard combination or do a Find/Replace, and you'll jump right down to that section.

Now if we scroll down into the styles themselves, we can see that I have a nice little comment here, identifying the section. There is that ^ again that will allow me to jump down to that, and then the selectors themselves are written in a very human, readable way. Each selector is on its separate line, even when they are grouped together. Each property is on a separate line, and then I have a space between each selector. So very open. Very readable. Its not necessarily the most efficient way to deploy this particular style sheet, and we'll talk about that in the last chapter in our movie about maybe optimizing this code a little bit more.

Now I want you to notice something about these properties, too. Notice that every time I go to a selector, the properties are in alphabetical order. So color, font-size, margin-top, every time we go to one they are in nice alphabetical order. The reason behind that is if you go some place and you know, I need to adjust wrapper, for example, and I want to adjust the width, I don't have to worry about where to find it. Its really easy to find because it starts with the W, so it's the very last property. Now that could be a little overkill for lot of people, and you might not want to go to that little bit in detail, but you can add that amount of organization to your style sheets if you want to.

It's not hurting anything, and it might help you find and replace values a little bit quicker if you're going to be doing a lot of hand-coding. Notice that the selectors themselves are grouped by content. So, for example, if I go down to the mainContent section, and we're still on our layout right now. Let's go into our actual selectors. So here's the Headers section, notice they're all grouped together. All those selectors inside the header and the same thing with our navigation; they're all grouped together. And I get more and more specific as I go through. When I get to the top of the section, let me find mainContent area, I have some pretty global styles, but as I get deeper into it, it gets more and more specific and I go from one element to the next.

So if I'm working on images, I'll work on images for a while. If I'm working on headings, I'll work on headings for a while, that sort of thing. And so as I need to get more specific with selectors, I do that as I go through this section. So that's a quick overview of the structure and organization of the style sheet for the Explore California Web site. Now every project is unique, and as a designer, you're sure to have your own personal preferences for how you want to organize your site CSS. I'm not saying your style sheet has to be organized like this one. The most important things is to have a strategy for your organization that's going to serve your site over its entire lifespan.

You want to be sure to plan for how the site might grow, or change and evolve over time and whether or not a team will be involved in the site's development. That's really important. All these factors play a huge role in how your styles can be organized and how they're going to be structured.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

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

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.