Join James Williamson for an in-depth discussion in this video CSS inspect, part of Dreamweaver CS5 New Features.
If you have been working in Web development for any amount of time, you are probably familiar with tools such as Mozilla's Firebug, or Webkit's Web Inspector. Those tools allow you to interact with elements on the page and visually see how their CSS properties affect your page layout. Using this type of feature is a great way to quickly size up your page, find errors in your layout, or determine exactly where margins or padding are being applied. The downside of these tools, especially for those of us working in Dreamweaver, is that you have to preview the page in a browser and then enable the feature to utilize it.
This can negate the speed advantage that these tools give you and make them a bit cumbersome for gathering quick CSS layout information. CSS Inspect, a new feature in CS5, gives you much of the same functionality built right into Dreamweaver. When used with the proper arrangement of panels and views, it can become a very powerful part of your day-to-day CSS workflow. So, here I have the mission.htm file open from the 01_05 folder, and I just need to make some simple adjustments to the layout.
Now, since I created this page, it's pretty easy for me to understand who has padding, or where margins are being applied. But imagine if you were opening up this page for the first time, and you had some goals that you wanted to achieve. Well, you would probably spend a fair amount of time trying to figure out exactly which rules are controlling which elements. So, what I am going to do is I am going to go right up to our Document toolbar, and I am going to switch to Live View. Now, Live View changes the Design View pane, so that we are viewing the page through Dreamweaver's internal WebKit browser.
Now, just to the right of that, we have a brand new icon, which says Inspect. So, clicking on that is going to turn on CSS Inspect. Now, as soon as I turn that on and start mousing around my page, you are going to see a very different look. What we are looking at is we are looking at the different elements and the margin and the padding on those elements. So, when you hover over an element, the sort of blue turquoise view that you are seeing is the actual width and height of the element itself. The yellow are the margins for that particular element, and then that sort of magenta color would be any padding.
Now obviously, as we mouse around, we notice that not every single element has margins and paddings, and some have a mixture of them, but it's really easy for us to see exactly what we have going on. Well, let's say we want to add a little bit of space above the headline, Who we are, but below Mission to allow for future breadcrumbs to show up in that region. Well, I want to find out exactly what is creating this amount of space between the border and Who we are. Mousing over the headline, Who we are, doesn't give me that amount of space. It has a top margin applied to it, but it still doesn't take up all that region.
Mousing over Mission doesn't show me any spacing there at all either. And as a matter of fact, I want to use this tool very carefully. Notice, down here, the Tag Selector. This is right down here on the Status Bar. The Tag Selector gives us the ID of the element that we are mousing over. So, we can see that we are really not mousing over any elements that are showing us where that spacing is occurring. Well, here is another great little feature of CSS Inspect. Because of the way elements are nested inside of each other, we can actually navigate through CSS Inspect by using the arrow keys on your keyboard.
So, if I mouse over this Heading 1 and hit my left arrow, notice in the Tag Selector, it just walks right back up to the div with the ID of mainArticle. Now, when I see that, I can clearly see that that is the element whose margin is controlling that overall spacing. So, if I go ahead and just click on that element, that sort of freezes everything in place, and it allows me to go over to my CSS Styles panel and make a change. So, here, I am going to increase that top margin to 75 pixels, and notice that I now have an increased amount of space above the headline.
It's going to give me enough room for any breadcrumbs that I might want to put in there a little bit later on. I am going to go ahead and do a Save All. And that was a very quick and easy change. Notice how easy it was for me to find out exactly which element to add that margin to. If you were coming to this page for the first time, and you hadn't been involved with the development of it, that would have been a huge time saver. Now, I am going to scroll down the page. Notice that as soon as I click on an element, Inspect is turned off. So, the moment you change your focus from inspecting the page to actually looking at an element, specifically, you are basically going to disable CSS Inspect.
So, I am going to scroll down a little bit, and I notice that my Monthly Specials sidebar down here isn't looking quite the way I want it to. It's not as wide as some of these other call-outs, and there is some spacing issues with the elements inside of it. So, I am going to use CSS Inspect to help me figure out exactly which elements I need to change to get it to look the way I want it to. Now, another thing you may have noticed previously when I turned Inspect on, if I turn Inspect on, we get this little message right here from Dreamweaver. It says, "Inspect mode is most useful with certain workspace settings." Well, I want to know more about that, so I am going to click on More Info.
Now, that tells me that Inspect works best when I have my CSS Styles panel opened in Current mode. Well, check, I have got that. Enable Split Code/Live View. I don't have that. And Enable Live Code. I don't have that. So, Split View is going to give me that code on the left and design on the right. That way, as I go through my elements, I can actually see, in the code, the elements that I am hovering over. So, that's nice and helps me identify that without having to use the Tag Selector. And Live Code is useful if I am using any dynamic pages.
So, that way, I can see the actual HTML code that's being generated, rather than the Placeholder, PHP, or ColdFusion text. So, I am going to say, go ahead and switch that. And that's going to enable all those settings. So, my CSS Styles panel remains in Current. Live Code is now turned on. And as I mouse through everything, you can see, in the Code View, that I am actually looking at the different elements that I am hovering over, which is really cool. So, the first thing I want to deal with is the fact that this sidebar isn't quite as wide. Now, at first glance, you might think we need to change the width of that, but if I hover over that sidebar div, over in the CSS Styles panel, I can see that I don't really have a defined width, but I do have a defined margin.
So, I am going to click on that to sort of free CSS Inspect, go over to my margin, and I am going to change this 50-pixel margin to 0. And as soon as I do that, notice I get a much wider sidebar, and everything is more or less aligning the way that I want it to. But the last problem that I need to fix is I would like to get an equal amount of spacing between the top of this border and the bottom of the border. And you will notice that we have got some crowding down towards the bottom. So, I need to figure out exactly which element I can use to push that border down.
Once again, CSS Inspect is really going to help us with that. I am going to turn Inspect on. And if I mouse over my different elements, I can kind of see that it's really the images that are going to be pushing that border down, because these paragraphs here just don't go far enough down. Now, I need to figure out exactly how much space I have above these images, so that I know exactly how much to modify that padding amount by. So, if I go to the headline itself, here I can see that it's the one that's controlling the spacing between the headline and the border itself.
By just hovering over that and looking over at my CSS Styles panel, so I can see that the value for padding top is 1em. Well, I need a similar value for the bottom padding of my image. So, I am just going to go ahead and click on that. To focus it, come right over here to my CSS Styles, change that to 1em. Very quick and easy change. And if turn focus off, I can now see that all of my images are giving me an equal amount of spacing below the border and above the border, exactly what I wanted to get. That's really cool.
Now, I am not suggesting that CSS Inspect is going to replace Firebug or WebKit Inspector in your workflow, but it does offer you a very easy way to visualize how your page elements are interacting with one another. I find myself using it, just to remind myself which element I placed padding or margins on to achieve specific spacing. Not having to search through all my CSS Code for this information has saved me a ton of time already. For those of you working in a team environment, especially if you weren't involved with the initial creation of the site CSS, you are really going to love this feature.
You will be able to quickly and easily get up to speed with the structure of the page, as well as the CSS that's driving the page's layout. You will spend more time working on the design and less time navigating through the code to find a specific property. That alone makes CSS Inspect a welcome addition to your Dreamweaver CSS Workflow.
- Comparing Dreamweaver CS4 and CS5
- Setting up a new web site using the enhanced Site Setup dialog
- Browser Lab integration
- Working with CMS frameworks
- Using the Adobe Widget Browser
- PHP and site-specific code hinting
- Navigating in Live View