New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

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

Managing CSS in Dreamweaver
Illustration by

Creating styles visually


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Creating styles visually

Regardless of the method that you choose to create new rules in Dreamweaver, when creating a new CSS rule visually, you'll use the New Rule dialog to specify the selector, and the CSS Rule Definition dialog to set the rule's properties. While this process is fairly straightforward, knowing the ins and outs of it can really help speed up the creation of CSS in Dreamweaver. As you can see, our page currently has no styling whatsoever. To get structure on the page, notice we have a body tag, a div with an id of mainContent, but past that, really nothing going on, style-wise.
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 styles visually

Regardless of the method that you choose to create new rules in Dreamweaver, when creating a new CSS rule visually, you'll use the New Rule dialog to specify the selector, and the CSS Rule Definition dialog to set the rule's properties. While this process is fairly straightforward, knowing the ins and outs of it can really help speed up the creation of CSS in Dreamweaver. As you can see, our page currently has no styling whatsoever. To get structure on the page, notice we have a body tag, a div with an id of mainContent, but past that, really nothing going on, style-wise.

So the first thing I'm going to do is go over to my Files panel and collapse it. Again, that gives me a nice, larger view of my CSS Styles panel, and I want to create a New Rule. So I'm just going to go right down to the bottom of CSS Styles panel, and I can see there is an icon right down here. That looks like a page with the Plus symbol on it. I'm going to go ahead and click that to create a New Rule. Now this brings up the New CSS Rule dialog box. This is where you're going to tell Dreamweaver which elements on the page you want to target, so what Selector you want. Notice that we have several different types of selectors that we can choose from: classes, ID selectors, Tag, which is also referred to as element selectors, and Compound selectors.

The Compound Selectors pretty much are anything you want. Usually they're descendent selectors, but that means you can just type in anything you'd like into the dialog box. I'm going to choose Tag. I can go ahead and grab from the pulldown menu in the Selector Name whichever tag I want, or if I'd like, I can also highlight it and just type it in. So let's go ahead and do the body tag. So either I grab that to the pulldown menu or just type in body. Now spelling counts here, so if you're going to type into this dialog box, make sure you type everything correctly. Now after you tell it which type of selector you want, and then after you define the selector, the next thing in this dialog box is to choose where that rule is going to be located.

Now in this case, we're going to say, This document only, but notice we can also attach it within a New Style Sheet File. If our current page had a style sheet already attached to it, we could also place it in there. So for this one, I just want to say, This document only. So I'm going to go ahead and click OK, and now we're presented with a brand-new dialog box. This is the CSS Rule Definition dialog. Now notice that on the left- hand side we have categories. So we can look at the properties regarding Type, Background properties, Box model properties, Positioning properties, all sorts of categories over here.

I'm going to stick with Type for the moment, and what I'm going to do is go to Font, grab the pulldown menu and choose Georgia, Times New Roman, Times, serif. So you can see that within this dialog box, there are already a lot of predefined font stacks in here. If you're coding by hand, you'd have to type in those font stacks yourself, but Dreamweaver has a lot of those already in. You're free to create your own, if you want to use one that Dreamweaver doesn't have by default. For font size, I'm just going to choose 100, and I'm going to type in percent. Now there are plenty of units of measurement that you can use.

You're free to grab the pulldown menu here and use whatever you'd like. But if you know the unit of measurement you want to use, you don't have to do that. You can just go ahead and add it directly after the number itself, as I did here with percentage. If you hit Tab, notice that it will go ahead and populate that there. So that works perfectly. Now I'm going to go to the Box Category. In the Box Category, I'm going to choose 0 for Padding, 0 for Margin. I'm just going to leave Same for all selected. So I'm going to go ahead and click OK. Notice that our font changed, font size may have shifted on you just a little bit, but also our content is now budding up right at the edge of the page, because our default margins and padding are now gone.

Notice in the CSS Styles panel it now shows you that selector, and we get a nice overview of the selector, as well. Let's go ahead and create another rule, but we're going to have Dreamweaver sort of shorten that process. I'm going to click right here in the headline, Got questions. You'll notice its right there inside of an h1 tag. So I'm going to go ahead and choose New CSS Rule. When I do that, at first it's going to try to do a Compound Selector because there is some structure involved here. But I'm going to switch that to Tag, and notice that it automatically puts h1 in there, because that was the element that we were focused on.

Once again, I'm going to say, This document only, and click OK. For that one, I'm going to choose a Font-size of 2em. Notice again, all I have to do is type em directly after that. For Color, now when you choose a Color using any of Dreamweaver's visual tools, you do get a Swatch panel. Now at first, people get really excited about that, but the reality of it is you're not going to be able to save your Custom Colors to this. So this is just the Web safe color palette. You do have a Color Picker, so you could mix a color together if you'd like. That would work out just fine. You could also type in the hexadecimal value directly right here.

Now there is also another feature here that I really like about this Color Picker. Notice that if I click the color chip, I can go right over here to the image and really anywhere within your document window, and I can just pick a color directly out of that. So if I want to get that particular blue, I can click that. If I hit Apply, I can preview those changes. You can see I can preview the color here. Now I'm actually going to type in the hexadecimal value. So I'm going to leave the pound or octothorpe character there, and right after that I'm going to type in 193742. So unfortunately, it's not going to remember those colors for you, or store them, so if you have Custom Colors that you're going to be using, you're probably going to type this in manually each time.

Now, I'm going to go to my Box Category. I'm going to deselect Same for all for Margin. I'm going to give it a Top margin of 0, a Right margin of 0, Bottom margin of 0.4 ems and a Left margin of 0. I certainly could have just gone right down to the Bottom margin and chosen that, as well. We can go and click OK. Now I can see all of my summary of my properties there. Now I'm going to scroll down a little bit. So far, we've done two element selectors. Let's take a look at writing a different type of Selector. So if I scroll down to the Customer notifications paragraph, I can see in the first line we have right here, When you book a tour with Explore California.

So I'm just going to highlight the words Explore California. Maybe I want those styled a little bit differently than the rest of my page. So with that text highlighted, I'm going to click New CSS Rule. Now interestingly enough, you'll notice that Dreamweaver went ahead and automatically chose Class for Selector Type. It did that because I had a range of text selected and not in one specific tag. So I'm just going to go ahead and choose a Selector Name for this. I'm just going to type in .company. Now the dot is important. It precedes any Class Selector. So I want to make sure it's typed in, and then the word company right behind it.

If you leave that off, Dreamweaver will place a dot in there for you, but it's a bad practice to get in the habit of doing. So make sure you remember to place a dot before any class name. Now so far, we've placed these rules in the current document, but what if you wanted to create a brand-new style sheet? Well, creating a new rule and a new style sheet all at the same time is a pretty efficient operation, if you're creating a new style sheet for your site. So I'm just going to choose New Style Sheet File. Click OK. Now I'm prompted by an entirely new dialog box to go ahead and name this particular style sheet. I'll go inside the _css folder, and I'm going to save it as main.css.

I'm going to go ahead and Save that. So you'll notice it went ahead and created the style sheet and attached to the page in one operation, as we're creating the style. That's pretty efficient. So I'm going to go ahead and change my Font-weight to bold. I'm going to go ahead and apply that same Color. Now again, it would be really helpful if you can remember it for us, but it can't. So I'm just going to type in #193742, and go ahead and click OK. Now you'll notice that nothing changed on the page. Well, it created the class, but it's not going to automatically apply it for you.

So I can go ahead and go down to my Properties Inspector, and through the use of this Targeted Rule, I can grab that pulldown menu and just apply the company class to that range of text. Here we go. Now we have our new styling. Before we finish, let's do one more selector. I'm going to go right up here to my image, and I'm going to click on that to image to select it. I'm going to go back over to my CSS Styles panel, and click New CSS Rule. Now as soon as I do that, and notice again, it keeps trying to do Compound Selector. Compound selectors by and large will be descendent selectors, meaning you're targeting a specific element inside of another element.

You're really free to type in any Selector that you want. I do want to point something out though. Let's say that for whatever reason, you just chose Tag, ID, or Class. And then you decide, well, I just want to type in a Selector. So, maybe I might type in #mainContent img.articleImage. So this is a pretty complex Selector. I'm targeting a Class-specific element selector, img.articleImage, and I'm doing that inside of the mainContent element. Now if I go and click OK, Dreamweaver says no, you can't do that.

Class names must start with an alphabetical character. To be honest with you, if there is one thing that annoys me about the New CSS Rule dialog box, it's this. If you're not paying attention to which Selector Type you're trying, you might just go ahead and start typing. Well, when you click OK, you're going to start typing all over again, because the really bad thing about this is that now when I go down to Compound, I lose what I was typing. So you want to always double-check this first, and make sure you have the Selector Type that you need. Now another nice thing this does is it tries to write the selector for you.

So you can see that we have an image selected inside here, which is inside of a paragraph, which is inside main content. So that's the descendent selector that it gives us. I can also tell it to be Less Specific or More Specific based on its location. Most of the time that can really help you and can speed up the creation of your selectors, but in this case, it's not really going to help us. So I'm going to remove the paragraph. I'm going to make sure the space is still there, and I'm going to add the .articleImage Class Selector to the image element. So what we have here again is #mainContent img.articleImage, all one word, okay? So I'm going to make sure Compound Selector is up here, so I don't have to type that again.

Make sure it's doing it in This document only. I'm going to go ahead and click OK. I'm just going to do a couple of choices here. I'm going to go to my Box Category and Float it to the right. I'm going to go to my Block Category and change the Display of this to a block-level element. Then finally, to keep the text away from it, I'm going to go to the Box Category, and set some Padding. So I'm going to turn Padding off. Do 1 em for the Padding for the Top, 0 for the Right, 1 em for the Bottom, I type in 1 em and 1 em for the Left.

So if you're used to hand-coding your styles, one of the things you have to get used to in this dialog box is where is everything? So you'll notice that I just clicked, and said, okay, let's go to Box and get my floating. Let's go to Block, and get the Display properties. So it's going to take a little while before you're totally comfortable with where all your properties are. Now, you're also not going to find all of your properties. Notice, for example, if I go to Border, I don't have the Border Collapse property. It's not here. The CSS3 properties aren't here. So don't expect to find everything in this dialog box. So if you're used to hand-coding, there are some properties that you're still going to need to hand-code.

If you're not used to hand-coding, and kind of hoping that you don't have to do that. Notice this dialog box is pretty thorough, but it doesn't have everything. So I'm going to go ahead and click OK. I will apply that class of the image by selecting it, and then choosing articleImage. Notice that our text is now floating around the image. I'm going to click on Live View just to make sure yeah, okay, so that is doing exactly what I wanted it to do. Cool! So creating styles visually in Dreamweaver is pretty fast. But it is a process that can be a little frustrating, if you don't understand why certain things are happening the way they are. If you prefer to hand-code, I doubt this process is going to totally replace that method of writing styles for you full time.

I would encourage you, however, to try it and become familiar with it. There are many instances where adding new rules through the visual dialogs can actually speed up your workflow.

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

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.