Join Paul Trani for an in-depth discussion in this video Modifying Cascading Style Sheets, part of Creating a First Web Site with Dreamweaver CS5.
Now, CSS has a lot of power, and it has more power than the simple Page Properties lets on. In fact, I'm going to cancel out of this and I'll show you the CSS Styles panel. So here I am in the CSS Styles panel. Notice I don't have Current selected. I have All selected. And that shows me all of the various CSS styles associated with this page. So from here I can pick any one of these that I want to modify. And quite frankly, I want to modify some of these links.
The hover link, in fact. As I double-click it, I go into the CSS Rule definition for this hover. Now, note that there's plenty of selections in here that were just not available in the Page Properties. Starting with just the color, I'm just going to change the color first off, okay? So I'm just going to modify three properties in here. Now, your probably thinking, "Well, that white isn't going to show up on the yellow." And you would be right, especially if I take away the underline, okay? So now it's just white text when you hover over any link.
But what I'm going to do next is go to this Background section. So I can do a lot in here, but most importantly I'm just going to change the background color. So at this point I'm going to select that sort of greenish color and that's the color the background's going to be when you roll over any link. I'll select OK. Next step is the active, so I'll double click on that. And I'll do the same thing in here. Maybe change the color to white. Change the background to red, okay.
So it's going to pop red when you click on a link. And I will select OK. So just a couple properties that I have modified using the CSS Styles panel. What I'm going to do next is I'm going to test this out, but I'm not going to go to Preview in Browser and open up Safari or Firefox or something else. That's another step that I don't really want to deal with because what I can do is I can use live view. So if I click on Live View, this will actually show me what the Web page will look like to anybody looking at it.
So it actually is running a Web browser within Dreamweaver. So with that turned on, I can go down here and test out my links. Sure enough, I can see the rollover. It's looking great. I like that pop because it really stands off, kind of pops out at you more than, say, a simple underline. And if I click on it, there's that active link color. I can see that it turns red. So again, using live view is really effective, especially when you get into some of the styles pertaining to links.
And aside from that, the CSS options that I have in my CSS Styles panel is really advanced, allowing me to change the visual property of any Web page.
- Understanding Internet and Web site principles
- Adding content to a Web page
- Linking to Web sites and e-mail addresses
- Styling content with CSS
- Exploring Dreamweaver’s pre-built layouts
- Inserting images
- Adding SWF content
- Uploading and testing a Web site