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

CSS Styles panel overview

From: Managing CSS in Dreamweaver

Video: CSS Styles panel overview

The central location for controlling styles visually in Dreamweaver is the CSS Styles panel. It's not an exaggeration to say that almost anything you can or need to do with CSS can be done through this panel. It provides an overview of all external and embedded styles, and allows you to create and modify and manage styles, and also allows you to focus on the styling of individual elements. You'll find the CSS Styles panel in the CSS panel group, usually located at the top of the Panel dock, although you're free to reposition it anywhere you'd like.

CSS Styles panel overview

The central location for controlling styles visually in Dreamweaver is the CSS Styles panel. It's not an exaggeration to say that almost anything you can or need to do with CSS can be done through this panel. It provides an overview of all external and embedded styles, and allows you to create and modify and manage styles, and also allows you to focus on the styling of individual elements. You'll find the CSS Styles panel in the CSS panel group, usually located at the top of the Panel dock, although you're free to reposition it anywhere you'd like.

Now, at the top of the panel, you'll find buttons for two different views: All and Current. The All view gives you an overview of all of the CSS styles applied to the current document, while the Current view gives you a detailed view of the rules applied to any selected element. All right. Well, let's take a deeper look at the CSS Styles panel. In order to do that, I'm going to go to my Files panel, and I'm simply going to double-click the tab, which is going to collapse that group. That's going to give me much more screen real estate to work with, and I get to see the entire CSS Styles panel and not sort of a little cramped view of it.

Notice that you can grab any of these dividers and move them up or down. So, if you need to see more of one area of the panel versus another, you can always sort of customize that to seeing exactly what you need. Now, let's take a look at the All view, and I want to first turn our attention to the top pane. This is where all of our CSS styles are listed. So, here is our main.css. We know it's an external style sheet that's attached to our page because it has the .CSS extension. I can also see it's been assigned the screen and projection media types.

Then I have a listing of all the styles that are inside this CSS file. Now, I can collapse that. Now, on Mac you'll see a little arrow there, but on the PC I'm just going to click on the little minus symbol. I can also see that I have some embedded styles in this page, one to be specific, and I know it's an embedded style, because I see this style tag. All right. I'm going to go ahead and open my main.css back up again, and I'm just going to scroll down and sort of randomly select a rule. Well, #mainContent is already highlighted, so we'll just go ahead and leave that highlighted. Now, if you don't have #mainContent highlighted, simply scroll down, and any rule that you click on you're going to see just below it, in the Properties pane, you're going to see properties for that rule.

So if you select the one that's on there, you'll see the properties for that rule. Now, you can display these properties in one of three ways. The first is the Category view, and you can see these little icons right down here on the bottom left-hand side of this panel. The Category view is going to show you different categories, such as controlling Font properties, Background properties, Block, Border, Box. You can see most of the properties of the #mainContent selector deal with Box model properties. So, we have width, float, margin-bottom. There, you can quickly go through your categories and find properties you want to apply to it, or look at the properties that have already been applied to it.

We also have a List view. Now the List view is going to show you all of your applied properties in order. They're going to appear at the top. Then after that, you have a listing of every single CSS property that you can set. Now, it doesn't mean that you can set it for that particular element. It's really giving a list of everything. So, it's a nice way to sort of quickly find any properties that you want to apply to it. Now, the third view is my favorite, and it's also the default. That is going to show you only the set properties. What I like about that is it sort of clears out the clutter. All you get are the properties that are assigned to this element.

If you want to modify it by adding properties, you can do that by clicking the Add Property link. Now, we're going to take a look at that in just a moment. I'm going to scroll down over here on my Index page, and I'm just going to click right here into this paragraph of text. Now, as soon as I do that, I don't really see any change in my CSS Styles panel, because I'm still looking at all of the styles. But if I click on Current, notice that now it's focusing on this text, not so much any individual rules. In fact, now I get three panes, and the top pane is giving me a summary of this rule, meaning all of the properties from all of the different rules in style sheet that would apply to this element.

Then the middle pane here is giving me a cascade. It's showing me which rules are applied to this. If I click through them, I can even see which values are being applied, and which are inherited, which are not inherited, which are being overwritten. This is a really useful view we're going to take a closer look at a little bit later on. Well, just as in my All view, if I want to add another property to a rule, I could do that. So, I could click right here to add a property, and if I wanted to, I could just type in say margin-bottom. Now, if you're not that comfortable with typing in a value, you're worried about misspelling it or something, you can also grab the pulldown menu, and you can choose Properties that way, which is pretty cool.

Now, just to the right of that, you're going to be typing in a value. I'm just going to type in 1 em. Now, notice that I can type in the em value right after it. I don't have to grab it from the pulldown menu. If I hit Return, it would go ahead and add a 1 em margin-bottom to my paragraph selector. Now, another cool thing that we can do here is that we can enable and disable specific properties. Let's say we're troubleshooting, and we're wondering if this spacing is what we really want between these lines. Well, I could come right over here to my Properties and disable that line-height property to see what it would look like without the line property applied.

I could peruse the whole page and kind of see if it affected my page negatively in other areas. Then I could enable it again simply by clicking. Now, this is called Enable, Disable CSS Property, and you can do this just about anywhere. Notice that the icon is right down here in the lower right-hand corner. Notice that the icon also is showing up here in your Summary for Selection, and you can go ahead and enable and disable here. Even if you're working in the All view, you can still enable and disable properties right there. So, it's a really powerful little tool to use. Now, just sort of going over some of the other options, and I'm going to turn it back on, because often it's horrible, but some of our other options that we have down here. We can delete properties and rules. As we've seen, we can enable and disable them.

We can edit rules. We can create new ones. These are all things that we're going to be doing a little bit later on. But I'm interested in one in particular here, which is to attach a style sheet. I'm going to go over here to All again. I notice that I have one external style sheet, which is main.css. Well, I'm going to go ahead and click the Attach Style Sheet icon right here, and now I can attach an entirely new style sheet to this page. So, I'm just going to hit Browse. I'm going to browse into the 01_05 folder/ _css, going to that folder, and I'll choose our print style sheet, and also I'll go ahead and click OK.

Now, since this is a print style sheet, you can choose whether to add that through the use of a Link tag or add Import. I'm going to use a Link tag, and I'm also able to go ahead and assign a Media type to this. So, I can go to the pulldown menu and choose print, or I could just type it in if I wanted to. I'm going to go ahead and click OK. Notice that we now have a brand-new style sheet attached. Now, one of the things I'm trying to show here is how cool some of the Visual tools are in Dreamweaver. But just because they're cool, doesn't mean that they're going to do everything right. Now the CSS Styles panel does almost everything right. But this is one of the things that it gets a little wrong which is really kind of why I wanted to point it out to you, so that you'll be aware of it.

I'm going to switch over to Code view, and I'm going to make sure I'm looking at my source code. I'm going to scroll up towards the head of the document. So here, we can see the Link tag for our main style sheet. Here we see our embedded styles, and then, right here on line 13, we could see our print style sheets. So, what Dreamweaver does, the order that you create your styles is the order it's going to assign these. Well, even though it's a print style sheet, it's still a bad idea to have it below in the embedded styles. So, I'm going to grab that, cut it, so Ctrl+X or Command+X, and then paste it on the line below our main.css.

I'm just going to sort of reorder those guys. Save that. Switch back to Design view. Now, if I look at my CSS Styles panel, I can see that it's changed order here too. Now, I would love to tell you that you could drag them out here, but it doesn't quite work that way. But it's nice, because it gives you a nice visual clue as to whether your styles are out of order or not. So you can see the order that they're being applied to the page, which is pretty cool. So, I think it's pretty clear that the CSS Styles panel puts an amazing amount of information at your fingertips. Now, it's often going to give you the fastest and most efficient way to create and modify rules, and it gives you a really cool central location to control all of your styles throughout your entire site.

Now, I want you to pay attention, because as we delve a bit deeper into Dreamweaver's ability to control and manage your styles, we're going to be exploring this panel in a lot more detail. Keep in mind that just like everything else, you must fully understand how the panel works in order to use it effectively. Knowing its nuances and quirks, like adding style sheet links to the bottom of the head tag, as well as the strengths are important for making sure the panel is used properly throughout the development process.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

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

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.