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

Using CSS Inspect

From: Managing CSS in Dreamweaver

Video: Using CSS Inspect

If you've ever used Firebug or WebKit's Web Inspector, you're probably used to visually inspecting your page to check your layout. In Dreamweaver, you can use CSS Inspect to examine the Margin, Padding and other Box model Properties of elements on your page. CSS Inspect is part of Dreamweaver's WebKit Integration, and as we'll see, it gives you the ability to accurately preview and troubleshoot your designs from within Dreamweaver. And one of the things I want to do is fix some spacing issues that I've got, so I'm going to turn Live View on. Now Live View shows us the page as it's rendered in the WebKit space, not Design View, and gives us a more accurate preview.

Using CSS Inspect

If you've ever used Firebug or WebKit's Web Inspector, you're probably used to visually inspecting your page to check your layout. In Dreamweaver, you can use CSS Inspect to examine the Margin, Padding and other Box model Properties of elements on your page. CSS Inspect is part of Dreamweaver's WebKit Integration, and as we'll see, it gives you the ability to accurately preview and troubleshoot your designs from within Dreamweaver. And one of the things I want to do is fix some spacing issues that I've got, so I'm going to turn Live View on. Now Live View shows us the page as it's rendered in the WebKit space, not Design View, and gives us a more accurate preview.

So I'm going to scroll down a little bit, and in my Tour Descriptions, I can see that I have some spacing issues here that I want to fix. Number one, I have had too much above these headlines, and I really would like the spacing to be a little but more equal between this area and the headlines themselves. Also this Rating area, I would like that to float a little bit more in the middle and not be as close to the top paragraph as it currently is. Okay, so those are some spacing options I want to change. So I'm going to use CSS Inspect to show me which elements I need to modify to get the proper spacing. So to turn Inspect on, I just go right up here beside Live View and turn Inspect mode on.

And as soon as I do that, Dreamweaver says, hey Inspect mode is most useful with certain workspace setting. I'm like, oh really. Tell me more. So I click on More Info, and it tells me that, hey your CSS Styles panel should be open in Current mode. Mine's currently in all, so that's not right. And you should be viewing your screen is Split Code View so that you have Code View on one side, Live View on the other, and you can also enable Live Code. What Live Code will do for you is show you, if you're interacting with any JavaScript base elements, for example, it will show you the code that gets generated. And now I can automatically switch these settings if I like, or I can choose them myself.

I'm just going to have Dreamweaver do it for me. So I am like, yeah sure, go ahead and Switch to that. That's fine. Now I like turning Live Code off because unless I am working with some type of an AJAX Widget, I don't really need that on. It is helpful to have my CSS Styles panel Open to current and have at Code View open. It's going to help me out. But I'm going to change over to my main.css, so that I can change my code really easily. Now I'm also going to double-click on the Files panel tab to collapse that, so that I can see my CSS Styles Properties. Okay, one last thing to do. I'm going to bring this a little bit over so that I have a little bit more room in looking at my elements on the page.

Now you might have noticed if I start hovering over elements, I get to see some highlight colors, so what's going on there? Well essentially, I'm looking at the Box model properties for those elements. The sort of a translucent blue color that we're seeing, that's the width and the height of the element. Any yellow is a margin, and any time you see that sort of magenta color, those are padding. So you can see padding, margins, your content regions. You can really kind of see what's going on there. You'll also notice that that right down here, on the Tag Selector, as we hover over an element, we get to see which element we're selecting. If we were in Code View, it would be highlighting code as well, and over here in the CSS Styles panel as I move through this, you'll notice that the CSS Styles panel in the current section is showing me the selector that I'm working on as well.

Okay, well let's start using this to tackle the spacing issues that we're having. One of the things that I'm most interested in finding out is how much space I need above my headings and then going ahead and setting that. Well if I hover over the Div Tour Description right here, I can see looking over at my CSS Styles panel that the margin on the bottom is 15 pixels and my padding 10 pixels. So I've got 10 pixels worth of padding on the top and the bottom, but I have 15 pixels worth of margin between them, as well. So if I hover over at my heading here, I get to see a really large margin above that. But if I look over at my properties, I don't see any margin top so what's the deal there? Well, just because it's showing you that property, doesn't mean that it's being set with that particular selector.

Let me show you what I mean. If I click on the heading, Big Sur Retreat, it actually turns Inspect mode off. It sort of freezes it in that location. So if I go up through my list, h1, h2, h3, I don't see any top margin. At h2, however, I see a margin top of 1.2 ems. Okay, well that's setting now for every single heading in my site. This particular one needs to be a little different, so I'm actually going to use this bottom selector, which is # mainContent, and I've got another divider here that I can change. You know, you really start to run out of screen real estate pretty fast, so let me explain that a little bit so I can see this selector a little bit better.

So #mainContent.tourDiscription h2, cool. So if I change the top margin on that one, that should adjust the spacing, so I'm going to say, Add Property > margin-top and since we know that our tourDiscription div tag has that 15 pixels worth of margin on the bottom, and we want to equal that, we're just going to say 15 pixels worth for margin-top. As soon as I do that, notice that we get lot more equal spacing between these elements on the page. Now anytime you select a specific element to work on it, Inspect mode is just sort of going to turn itself off. Notice that I can turn it right back on and start inspecting again.

Now you don't really need to be in the Split Screen View if you're not going to be doing hand coding. So if you're going to continually work with CSS Styles panel, you can just switch back to Design View and kind of see everything without having to worry about that. Dreamweaver keeps giving you this little message that says, are you sure about that? But you can just ignore that if you like. Okay now, what we need to do next is focus on the spacing of this span text right here, Span.option. Now its set to display as a block-level element, but we're not getting spacing above it. We'd really like to add an equal amount of spacing above and below it. Now in order to do that, we have got to navigate some pretty complicated waters.

This text is filed in this Span tag with a class or option applied to it, but it's inside of a parent paragraph. It's being told to display as a block-level element. Below the parent paragraph, we have another paragraph that contains these two items. These are links, one with A with a class of book, another link with a class of more. Now as we hover over those elements, we can see that some of those elements have margins applied to them, and some of them don't. Notice that the book has a top margin applied to it. More has a top margin applied to it. The parent paragraph has a bottom margin applied to it.

But our span text doesn't have a margin applied to it. Okay, well there's a little bit of a mystery here, too. Notice that what CSS Inspect can show me. If I hover over of the parent paragraph, take a look at where the bottom of that margin ends, that yellow border that you're seeing there. The very bottom of that is the bottom of that margin. Okay, kind of stare at that space for a moment. Now if I hover over this link, notice that its top margin goes up to that spot and ends. So those two margins, the top margin and the bottom margin of this paragraph are touching each other. Well that's kind of weird, because in CSS vertical margins are supposed to collapse.

So if you think about it, if those two elements are touching each other, they really should be collapsing down into one singular margin, but they're not, and why is that? Well let's use CSS Inspect to find out. Notice that if I hover over one of these links, book now!, I actually have another way of going through elements on the page. Certain elements, due to say collapsing elements or things like that, you may not be able to hover over them. But if I hit the left arrow key on my keyboard, notice that it goes right through the Tag Selector, in the Tag Selector right down here, this area, and watch right down here while I do this.

Notice it just goes back up to the paragraph that's inside of that, then to the div tourDescriptions. I can just keep going up. The right arrow will move me back down. So you can actually click to the left and to the right on your arrows to sort of browse through those areas. So you can look at some pretty detailed structure that way. Now what we've learned is that the parent paragraph, it's holding those two links, has collapsed because they're floated outside of it, but the top margin is still being applied. So what's happening is the bottom two's top margin is collapsing with that one, but because of that parent paragraph, the paragraph just above that one isn't collapsing with those guys, so essentially that paragraph that they're inside of it is acting as a buffer so that we don't get margin collapse there.

So we need to make a few changes to make sure that all works. Number one, we know now that we really don't need the top margin only, so I'm going to get rid of them. So with CSS Inspect turned on , I'm going to click on the book now! link, and I can see that just above that here's, this #mainContent a.book. I'm going to click on that, and I'm going to get rid of that top-margin. So I'm going to click on the margin section right here. Type in zero. Here we go. And now I'm going to do the same thing to learn more. I'll click on that. Click on its particular selector, which is just above it. If you're wondering what the bottom selector is, that's the hover selector, so that's the roll-over.

So let's click on #mainContent. tourDescription a.more, and I'll change that one, as well, to 0 pixels. So now we're not getting that extra margin. We're getting the collapse occurring. I can turn Inspect back on, and you can see that as we hover over those we don't get that margin, and the parent paragraph still has that margin, but it's collapsing now. So now those guys are looking the way that I want them to. I still would like to push my Optional 4 day tour available down a little bit so that sort hovers in between those. And if I look at its parent paragraph, I can see this particular margin on the bottom is 1em.

So I've got 1em's worth of margin on the bottom. So I'm just going to split the difference there, turn Inspect back on, find the Span tag and click, and then on its selector I'm just going to add a property there. I'm going to add margin-top, and we'll do .5em, so we'll do half of that, and there we go. That's going to push it down by about half of its available margin, and now the spacing is nice and equal. That was exactly what we wanted. And again, you can turn Inspect on and off any time you want. Anytime you focus on an element, Inspect is going to turn itself off.

So you just have to remember to turn it back on. So it's going to take you a little practice getting used to using it. Make sure, for example, that if you're over an element, and you're not looking at exactly what you think you should be looking at, use your arrows to either go to the left to go up through the source code, or you can use your right arrow to go down through the source code. Now it might take a little practice to get used to it, but the CSS Inspect gives you an incredibly powerful way to preview and refine your design. Keep in mind that CSS Inspect uses WebKit, so you'll still need to test it in other browsers. So the spacing you're getting here is the WebKit rendering with CSS Inspect might not be exactly what you see in other browsers.

So you definitely want to just keep testing it. However, it is a great way to visualize how elements are affecting each other and for tracking down the correct rule to edit, if you need to make changes to especially where spacing and different box model properties are involved.

Show transcript

This video is part of

Image for Managing CSS in Dreamweaver
Managing CSS in Dreamweaver

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