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

Resolving conflicts


From:

Managing CSS in Dreamweaver

with James Williamson

Video: Resolving conflicts

As your CSS becomes more complex, it's inevitable that you write a style, look at your design and say, why is that happening? Now, this usually happens after you write a style and just don't see what you expect. The formatting just isn't there. The culprit is typically a style conflict, a situation where either the cascade or the specificity of the rules involved thwarts your desired formatting. Searching through hundreds of lines of code to find these conflicts and resolve them can be time-consuming, and is really frustrating.
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

Resolving conflicts

As your CSS becomes more complex, it's inevitable that you write a style, look at your design and say, why is that happening? Now, this usually happens after you write a style and just don't see what you expect. The formatting just isn't there. The culprit is typically a style conflict, a situation where either the cascade or the specificity of the rules involved thwarts your desired formatting. Searching through hundreds of lines of code to find these conflicts and resolve them can be time-consuming, and is really frustrating.

Well, that's where the CSS Styles panel comes to our rescue once again. As we'll see in this exercise, it can help us quickly and easily resolve any style conflicts we come up against. Now if I scroll down a little bit, I can see that we have this area down here where we have our current monthly Tour Spotlight, highlighting the Explorer's Podcast, which is a nice little Flash video, and a little section on Have questions. So all those headlines are fairly related, but this one, and we want make it stand out a little bit. It's the Tour Spotlight. We really want people to take a look at that because we're highlighting that particular tour for the month.

So I think we want to change the color of that headline. I want to make it red. It is sort of that nice bright accent color that we have. Now I could do that in number of different ways, but writing a class seems to be one of the most efficient ways to do that. That also allows me to reuse that on other pages for pretty much any headline I want. I just apply the class, and I will have it work. So let's go ahead and do that. So what I'm going to do is just select my main.css. Make sure I am working with the external style sheet, right up here. Create a brand-new CSS Rule. I am going to go ahead and choose Class as the Selector Type, and I am just going to type in .spotlight.

That seems to be pretty self-explanatory. So .spotlight, and I want to define it in main.css. So if you didn't highlight the style sheet earlier, you can just choose from here. I am going to go ahead and click OK, and this is going to be a really easy style to write. I am just going to go right over here to Color, and I am going to type in #cb202a, and if you hit Tab, you'll see that sort of bright red color that this is going to be. I will go ahead and click OK, and of course, writing a style is only half of it. We have to apply the style, as well.

So I am going to click inside the headline for Tour Spotlight, and if you really want to make sure you have the heading, remember you can use the tag selector right here to click on the h2 tag, and that's going to select the entire heading, not just the text inside of it. So now what we're going to do is we are going to go ahead and apply our class. So I am going to click on my HTML properties right here, and you can see the Class pulldown menu. Right now, no class is associated with that. And I want to find this one right here, spotlight, the one we just created. I am going to go ahead and click on that, and now our headline is not red.

So we were expecting it to be red, but it's not. So obviously one of our other styles is conflicting with this, and so we have a style conflict that we need to resolve. Now, if we had to do this by hand, we would have to flip back over, find any of these styles that were related to this, try to figure out exactly which selector is overwriting this and why. Is it a problem with the cascade? Is it a problem with inheritance? Is it problem with the specificity? There is all manner of issues that really could be here. So I think what I want to do is let the CSS Styles panel let me know what's going on. It can help me with this. So I am going to go over to my Files panel again.

I am going to double-click the tab of the Files panel. I'm just going to collapse it, just give me a little more room, because I am working with probably less screen real estate than a lot of you guys. Now currently I'm looking at my styles in the All view, and that's not really helping me here. I want to click on the Current view, and in the Current view, I have got two options, and they are indicated by these two little icons right here. They look like little stairs. The first icon is just going to basically show us, in this middle section, information about any property. So if I click text-align, for example, it will tell me where it's defined, what selector -- in this case, the wrapper rule is driving this.

So it sort of gives you an overview of where all the issues are. Now if I select Color, notice that when I select Color, it says hey color is defined in a rule #spotlight h2. And you are like, hey, that's actually supposed to be coming from the Spotlight class selector that I've created, so what's the deal? Well the icon just to the right of that is an icon that will show us the entire cascade. So if I click on that, this middle section gets a lot larger. As a matter of fact, you may need to rearrange these panel sections, maybe like leave less room for the summary and more room for Cascade, so you can see that there is quite a lot going on here.

So what we are looking at right now is a list of rules, a list of rules is showing up from the closest rule, which is right down here on the bottom, the one that takes precedence over any of the other rules, and it just goes up. This is going to show you any conflicts that might be happening due to specificity. It's going to show you any conflicts that might be happening due to cascade, or due to inheritance. It's going to show these selectors in the order that they're applying to the element. And one at the very bottom is the last one applied, and of course the last rule applied wins. In this case, we have this #spotlight h2, and if I hover over that, it tells me it's defined in main.css, and has a specificity of 101. Okay.

But if I look at spotlight and click that, I can see color has a strike-through, and that tells me that color is not being applied and if I hover it, it does not apply to your selection because it's been overridden by the rule #spotlight h2. So it tells you the exact rule that's causing you grief. Now it's interesting. If I hover over spotlight over here, it tells me that this has a specificity of 10. So I am dealing with one selector that has a specificity of 101. I am dealing with another selector that has a specificity of 10. So it's pretty clear what's happening here. Specificity of the #spotlight h2 rule, that descendent selector, is overriding just a single class selector here.

It's not specific enough to override that bottom selector. So all we have to do now is change the specificity of this selector, and we are in good shape. So I am going to go back to my All CSS styles. I am going to find that spotlight class selector that we wrote earlier. It's probably at the very bottom of your styles. I am going to go ahead and click on it once and then click one more time. And when I do that, it highlights. So I am free to go ahead and change the name here in the CSS Styles panel. I don't have to switch over the code to do that. So I am going to click right in front of the period, for spotlight there. I am going to type in #spotlight and spelling counts, so I got to be very careful there.

So #spotlight h2 and then no space .spotlight. So what this is, this is an element-specific class selector. So you're saying an h2, with a class of spotlight found inside the spotlight region. I am going to hit Enter or Return. Look what happens. I now have a red headline. So now if I switch back over to Current, I can see that that is much more specific now. It's 111 as opposed to 101, and our conflict has been resolved. All that's left for us to do, really, is just move this up into the proper location, so that our styles are organized properly.

Now that was a pretty easy conflict to resolve, I have to admit, but if you have been writing CSS for any time at all, you've probably come across at least one instance of style conflicts that took a long time to resolve. Using the Current view in the CSS Styles panel to display the cascade and the specificity of your rules makes hunting down and solving those conflicts remarkably simple.

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.