Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Sometimes, some of the best changes to a program are their small, incremental updates that just make existing features work better. A prime example of this, in CS5, is the addition of CSS Enable to Dreamweaver's CSS Workflow. CSS Enable allows you to enable and disable specific properties of a CSS rule. This allows you to quickly troubleshoot rules, assess the effectiveness of a specific property, and experiment with design. Let's take a quick look at CSS Enable, and the different ways we can utilize it in Dreamweaver. So here we have the tour_ detail_bigsur.htm file open. Now, I'm going to scroll down just a tad bit. I'm focusing on this little area right here, the name of the tour and then the price and the days. Not crazy about that styling. I don't really like what we have going on there. But before we get into working with the CSS of this, I want to take a closer look at the actual source code of this, so that we understand the structure that we're styling. I'm going to go to Split screen view, and I'm look at the Source Code. I may need to move this over little but more, so it's less confusing. What we're looking at is we're looking at a heading two, so both of these lines are single heading, heading two (h2) Big Sur Retreat, and then 3 days $350. You'll notice that the 3 days $350 is in a span tag. Then that span tags class is tourCost. So we're going to have two selectors that we're dealing with here. One is going to target the h2 within the man article. The other one is going to target the span tag inside that h2. So again, we need to modify both of those in order to get the styling that we're looking for, or at least the span tag anyway, because it's the one that, to me, doesn't look all that great. So if I go ahead and click inside this headline, Big Sur Retreat, I can go over to my CSS Styles panel and click on Current. Remember, that's going to show me the current targeted style. I'm going to go down to my Files panel, double-click the tab, so I get a little bit more room for my CSS Styles panel. I see something that's a little different from previous versions of Dreamweaver. Notice that there is a property called margin-bottom. Margin-bottom has this little no symbol right beside it here and here. Well, that is CSS Enable. So prior to working on this file, margin-bottom has been disabled, and it displays with that little circle with a line through it. Well, let's say that I actually do want that margin on the bottom. Enabling it is extremely easy. I can just come right beside that, wherever I find that, and click on it. It's going to turn that property right back on. So you use CSS Enable/Disable in a number of different locations. For example, you can come up here to the Summary. In the Summary, you can Enable and Disable Properties. You can highlight one of the Properties down here in the bottom Summary. You can use the Disable/Enable CSS Property icon, which is right down here at the bottom of your CSS Styles panel, or you can go right beside the Property itself here, and enable and disable it here as well. As we'll see in just a moment, that works in the All view of the CSS Styles panel as well. All right. So I'm going to leave that turned on. So I'm going to remember to enable that. Now I'm going to go down to this 3 days $350. So I'm just going to click right there in that little subsection. I see another listing of properties. Again, I see one that's already been disabled. Okay. Let's change a couple of things here. First off, I'm going to change color. So I'm going to find the color property. I'm going to change it from #FFF to #333, which is a gray. Now it really looks bad, but I am going to play around with disabling some of these other Properties. I'm going to go ahead and Disable the background color. Then I'm going to go ahead and Disable padding. Then I'm going to go ahead and Disable width. So now, that looks a little bit more reasonable. In fact, I want to see what the bottom border is going to look like on this. So I'm going to turn that on. In order to kind of preview how this is really going to look, I'm going to turn Live View on. I can go right up to my Document toolbar right here, click on Live View to turn that on. I like that formatting a lot better than what we had before. So one of the things that you can do with CSS Enable is kind of play around with various properties, find the ones that give you the styling you're looking for, and just kind of go with those. Now, there are other things that you need to be aware of with CSS Enable. One of the things I'm going to do is I'm going to go ahead and open up my CSS file, and look at the code of that. One of the easiest ways to do that is bring up the Code Navigator. So once again, I'm just going to Alt+Click my text. If you're on the Mac, you're going to be Command+Clicking that. I'm going to go right down here to the bottom selector, click on that, check this out. When you're in the Code Navigator, and you hover over Property, if it has disabled properties, it'll show you that here as well. So CSS Enable/Disable displays almost anywhere that you'll see your CSS code. Well, I'm going to click on that to jump to that particular item. Now if I look at this rule in particular, I will see that these properties have been disabled with a comment. It's a very special type of comment, because you'll notice it has this bracket notation disabled. Now you do not want to modify that in Code view, because if you turn the comment off, it's going to leave that bracket behind. This property will not be re-enabled. So make sure any enabling or disabling using CSS Enable is done within the CSS Styles panel. I'm going to switch back to Design view really quickly. As I mentioned before, all of those Properties that we disabled, we really don't want them anymore. So I'm going to switch over to my All view, just to kind of preview how that looks. If I scroll down, I can find this selector. There it is: #mainContent #mainArticle h2 span.tourCost. Now, I see that all of those disable Properties are listed. Well, this is a nice, little feature. I can right click that selector, and I have the choice of enabling all disabled properties. So if you just wanted to turn them all back on, you could do that. You also have this really cool option. So if you play around with it for a little while and you decide, "You know what? The ones that I've disabled I really don't need them anymore," you can choose Delete All Disabled in Selected Rule. As soon as I do that, it's literally going to go into your CSS and just delete all those. So all those commented areas are ripped out of that particular property, leaving me with the styling that I was really looking for, which is really, really cool. So CSS Enable can speed up the process of troubleshooting Rules, experimenting with different styling, or the process of modifying any CSS Rule. While it is a great way to quickly try out various Rule combinations or check to see if a specific Property is causing trouble, remember that leaving a CSS Rule disabled does leave a proprietary comment in your CSS file. This may confuse some team members or add unwanted weight to your code. So make sure you get rid of any disabled properties when you're done working on a particular rule.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.
Your file was successfully uploaded.