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

Managing CSS in Dreamweaver
Illustration by

Creating modular style sheets


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Creating modular style sheets

Now that we have separate style sheets for our tables and forms, we have a few options for how to apply them to the pages that need them. The first option would be to add another link on the page to the necessary page. So, let me switch over to Code View real quick, and you can see right there is the link to our main style sheet. So, if we needed to, we could add on the link tag below this that would link to, say, the table styles or the form styles, whatever we would need. Now, we do have a title attribute. Notice this title attribute right there. Now, that lets the browser know that this is the default style sheet.
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 modular style sheets

Now that we have separate style sheets for our tables and forms, we have a few options for how to apply them to the pages that need them. The first option would be to add another link on the page to the necessary page. So, let me switch over to Code View real quick, and you can see right there is the link to our main style sheet. So, if we needed to, we could add on the link tag below this that would link to, say, the table styles or the form styles, whatever we would need. Now, we do have a title attribute. Notice this title attribute right there. Now, that lets the browser know that this is the default style sheet.

If you've got more than one link tag, it's really hard to blend all those guys together and let them know that those are the default style sheets. That can become an accessibility problem. So, we want to try to avoid that a little bit. All right! So, I want to switch over to our main. css, right up here in our related files. Honestly, it's going to take you forever to highlight this thing. There so many styles in it. So, here is my advice. Go ahead and highlight the character encoding and cut it. Then do a Select All, hit Delete, paste it back. Easy! Everything is gone.

I'm going to go ahead and save the file, switch back over to Design View, and oh, no, all the hard work, all the months of labor in getting our styles written shot. Well, don't worry about it. Let's go back into our main.css. In the main.css, go down the next line, and we're going to do an @import. Now, if you've never seen the @import, this is how it looks. A couple of lines below the encoding character, you're going to type in @import. Now, as soon as you do that, notice that Dreamweaver recognizes it and changes the color. So, I'm going to type in a space, and then url.

So, we need to indicate where these styles are located. What we're going to do is inside the parentheses here, I'm going to type in global.css, and then a semicolon. Okay, so if you remember, we pared down our main styles as global.css in the previous exercise. So now, using @import, we're basically telling this external style sheet, bring in those styles at run time and display them on the page. How cool is that! I'm going to do a Save All, and switch back over to Design View, and our styling is right back. Cool! So, our external sheet, main.css, is now actually bringing in global.css at run time.

Notice that in the related files, global is showing up here, which is really cool! Now, you want to be careful about trying to daisy-chain these. You wouldn't want to do an @import in the global style sheet as well. The problem with that is a lot of browsers don't recognize any type of an @import that is more than one layer nested deep. So, you want to keep those on the top-level style sheets. All right! I'm going to go ahead and close all of our open files. After I've closed all my open files, I'm going to scroll up and open up the _css folder, and I'm going to open up main.css from there.

Now, I know this is the file that we were just looking at, but it's now opened without being a related file, and I'm a little freer to do extra things with it, such as do a Save As. Okay, so here in our main.css, really, what we're bringing in is the global styles. We're going to need a version of this that's going to bring in the Table styles, and we need a version of this that's going to bring in the Form styles. So, let's go ahead and take a look at maybe the possibility of doing that. Let's do a Save As. Save it in the same directory. This time what I want you to do is save it as main_forms.css. There we go! In the main_forms.css, we're going to do another @import right below the first one.

We're going to do @import url, and here we're going to do form_styles.css. So, we're going to just look right over here, and bring in the one we need. Cool! So now, this main_forms.css is saying, okay, I've got all the global styles inside me, as well as the form styles. So, if you have a page that's using forms, go ahead and link media rather than the other one. Now, I want to talk about something else here, too. You'll notice that both of these @ imports are importing a singular file that's found in this directory.

One of the things you want to avoid is trying to do any type of importing past one level deep. What I mean by that is I wouldn't go under the global.css and put an @import in that one, because most browsers won't be able to drill down that deep and retrieve it. The other thing you want to be careful about here is the cascade. The order in which these styles are defined are the order they appear in the cascade. So, anything in these form styles that had a conflict would actually overwrite anything in the global styles. So, that's a very real concern when you're planning out how you're going to strip these styles apart and how you're going to work with them within the cascade.

I'm going to go ahead and save that, and let's do one more Save As. Now, this time in the same directory, save it as main_tables.css, as well. Here, we're going to replace the form_styles. So, I'm going to delete that. Now, the reason I deleted it is because I wanted to show you an alternate method of using @import. I'm going to go my CSS Styles panel, and I'm going to click to attach a style sheet. I'm just going to hit Browse, and I'm going to browse to the 04_04/_css directory.

Here, what I'm looking for is this table_styles. So, just like our forms, table_ styles has all of our table styling. Let me go ahead and click OK. Notice that Link is grayed out. The only thing available to us here is Import. So, when I click OK, I can see directly underneath that top one now, @import url("table_styles.css");. All right. We're going to go ahead and save that, and now we have our modular styles. We have one that's just bringing in all of our global styles. We have one that's bringing in the global plus the forms, and another one that's bringing in the global plus the tables. Now, as you could imagine, this is an incredibly simple example.

You could go ahead and import multiple style sheets on this. All right! Now, let's show this in action. So, I'm going to go ahead and close all of these. I'm going to go over to my Files panel, and I want to scroll down and open up the Contact page. Now, currently the Contact page has a lot of forms on it. But if I scroll down, the forms look horrible, or at least they don't look the way that I want them to. Now, why is that? Well, remember, main.css doesn't have those in it anymore; it just has the global. So, what we're going to do is we're going to change the page that's being linked here.

So, I'm going to switch over to Code View. I'm going to go up to the very top of the document. There is link href here. I'm going to change main.css to main_forms.css, just like that. I'll do a Save All. If I preview that in my browser, I now see that this one has the form styling, although the rest of the site doesn't need the extra code. So, we just sort of leave it off. Now, this approach is not going to work for everyone, nor is it appropriate for everyone. But for certain sites, you can certainly save bandwidth, increase organization, and that might be the most important part, and make modifying and maintaining styles easier by using modular style sheets throughout the site.

So, one team member could be working on the layout while another team member could be working on color, and you don't have to be worry about overwriting anything. Now, as with many things, proper planning is required in order for styles to render properly and not conflict with other modular styles at run time. As a matter of fact, that could be an absolute nightmare! Now, be sure to think through the execution of modular styles carefully, before attempting to implement them into your site.

There are currently no FAQs about Managing CSS in Dreamweaver.

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

join now 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
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

Notes cannot be added for locked videos.

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.