Video: Creating rollovers with pseudo-class selectors

The final type of selector we're going to talk about is called the Pseudo-class Selector". A pseudo-class describes the state of a particular element on your page, and isn't based on something that can be determined when looking at the source code of a document. Pseudo-classes are tacked onto the end of other selector types to assign a style that happens only when an object is in a certain state. The most common type of pseudo-class, and the ones that you'll use more often than any other, are the link, visited, hover, and active pseudo-classes. These pseudo-classes are most often applied to links or "a" Tags. The common rule using pseudo-classes is to remove underlined links when your user holds his, or her mouse over the link. If you recall back in the movie when set page properties, we actually created some pseudo-class rules only you didn't know they were pseudo-class rules. If you go look at our style sheet, we see these styles here, these are actually pseudo-class rules. Let's take the link rule for example.

In Dreamweaver CS3 Essential Training, instructor Garrick Chow delves into the many powerful features of the latest version of this powerful web design application. He covers everything from the simplest basics of using Dreamweaver CS3 to applying it to develop a fully interactive, accessible site. Garrick explains the new interface features, and demonstrates how to create, edit, manage, design, and publish a professional website with Dreamweaver CS3 and complementary applications. Exercise files accompany the training.

Creating rollovers with pseudo-class selectors

The final type of selector we're going to talk about is called the Pseudo-class Selector". A pseudo-class describesthe state of a particular element on your page, and isn't based on something that can be determined when lookingat the source code of a document. Pseudo-classes are tacked onto the end of other selector types to assign a stylethat happens only when an object is in a certain state. The most common type of pseudo-class, and the ones that you'll use more often than any other, are the link, visited, hover, and active pseudo-classes. These pseudo-classes are mostoften applied to links or "a" Tags. The common rule using pseudo-classes is to remove underlined links when your user holds his, or her mouse over the link. If you recall back in the movie when set page properties, we actually createdsome pseudo-class rules only you didn't know they were pseudo-class rules. If you go look at our style sheet,we see these styles here, these are actually pseudo-class rules. Let's take the link rule for example.

Here the "a" Tag is the type selector. It's a Tag. So if we were just defining an anchor tag we would just createa type selector with an "a". But because it's followed with a ":link", just like the ":visited", ":hover", and ":active" here,are all the pseudo-classes at the end of that selector. Meaning, these rules are only activated in certain situations.In this case within it's an unvisited link, a visited link, when the user rolls the mouse over the link,and when user clicks down on the link for active. And again this is the most common type of pseudo-classing we'll find.

And just as a side note, when you apply particular set of pseudo-classes, they should always be displayedin this order. Because of the cascading nature of style sheets, if you had hover first, followed by active, then visited, and link,your links might not behave the way you want them to. They should always appear link, visited, hover, and active.Some people like to use the pneumatic device of "love-hate", "L-V-H-A", to remember that order,but pseudo-classes are not always just for setting this basic type of link. In an example we're going to take a look at,we're going to use pseudo-classes to create some more sophisticated navigation on our page here.

Because currently, the links here on the side of the page are just regular text that have underlines under them,and we've changed some colors. But we want to make these look a little more like buttons, and we can actually do thisjust with Cascading Style Sheets, we don't have to actually go into an image editing program, and create image buttons.We can create buttons with Cascading Style Sheets. So, let's come in here, and were going to create a New style. For the Selector Type, it's going to be Advanced, and in this case we're going to type "#tdSidebar" because this appearsin the sidebar area. Remember, we created that ID for the sidebar in a movie on ID selectors.

We're going to add "a". Again this can be called a descendent selector", because in this role we're selecting all anchors,or links that appear inside the sidebar table cell. we're going to make sure this is attached to our current style sheet.We'll click on OK, and in the Type category here, we're going to check "none", meaning we don't want any kind ofdecoration. We don't want an underline, an over-line or anything on this text, but we are going to change the color.Let's come in here to the color field, and we'll type "#474F49". We'll to go over to the Block category list, here.

And from the Display field here, we're going to choose "block". Now there are lots of choices in here.But by setting all the links to be "block level" elements, that ensures that each link reserves space in the document,and all the anchors will stack up on top of each other. If the anchors were left as in-line elements, which is what they areby default so, we can select "inline" here without seeing any kind of change. Those would then all line up in a row,which is not the effect that we want. I want all of my links to be on their own line. So, we're choosing these to be"block level" elements. Essentially, block level elements reserve space, which means that nothing else cansit to the left, or right of that element. In-line elements on the other hand don't reserve any more space than it takesto display them, which is why in this case, History is followed by, From The, on the same line,and then it's the next line for, Fields, and then, Tea Types appears on the same line.

We want them all to be on separate lines. A couple more things to do here, let go over to the Box category,and we're going to keep "Same for all selected" here. I'm going to type in "8", meaning eight pixels are going to beapplied to the padding for Top, Right, Bottom, and Left around each of my links, and were also going to entera margin, of in this case, 10 pixels. So basically setting the value for the padding adds some space around thetext inside the anchor, which would make it look more like a button. Adding a margin around the link,ensures that they're all nicely spaced out, and their borders aren't going to be butting up, or touching each other.

Now, let's determine what these buttons are going to look like. Let's go to the Border category,and were going to uncheck "Same for all" for all of these, because I just want a border on the top,and bottom of these buttons. So, we'll choose "solid" for the Top. Let's make it 1 pixel. In this case will set a Colorof #CED2B6, and I'm going to do the same for the Bottom. Make it solid, 1 pixel, and the Bottom border will bethe same Color at the Top, just like so. This just adds some visual separations between the buttons,and let's the users know where the Hotspots are, and where they can click. Let's go ahead and click OK,and keep an eye on these links, and watch what happens to them. Pretty cool. Now, each of the links is surrounded bya dotted line because {italic}Dreamweaver {plain}now sees them as Block level elements. When we actually preview this page in ourbrowser, we won't see these dotted lines. They'll look a little bit different, but before we do that, let's do one more thing.

Let's set up a hover state for these buttons so, that they'll actually change appearance slightly when weroll our mouse over them. So, let's create another rule, and with Advanced selected, this time we're going to type "#tdSidebar" again, followed by "a", but this time, a pseudo-class of "hover" will follow that.Okay, so, the hover pseudo-class is going to change the background color of the links when the user hovers his,or her mouse over the link. Click on OK. Let's go back to the Background category, and will choose a colorfor the background for when the user hovers the mouse over the link, and we'll call this "#FBFCF9",and that's all we're going to do here. We're just going to have the background color change when we roll themouse over the link. Click on OK. Let's make sure that we save our style sheet, and while we're in here,you can see there's the descendent selector we created there, and here is the pseudo-class style we created.

Let's preview this in the browser, refresh, and there are our links, and notice when I roll over them,we have these nice roller effects this is really incredible if you think about it. We didn't have to create a single image for this.We just took plain text, wrote a couple of CSS rules for them, and now we have these very nice looking buttons over hereon our sidebar. So that's all there is to CSS rollovers the process is simple, but the payback is amazing.You can create complicated navigation without using a single image, which cuts down on ban width, and page load time,and also makes your pages much easier to maintain. If I decide to add a new link, or change the text of the link,there's no need to create, or edit a new image file. So we've covered a lot of information about CSS in this chapter,and hopefully I've given you an idea of what CSS is capable of. We'll definitely be working more with CSS inthe upcoming chapters, but again, I encourage you to check out the CSS specific training on thelynda.com online training library. You'll find a lot more information, and find out a lot more aboutwhat CSS is capable of in {italic}Dreamweaver.{plain}

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.

Already a member ?

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

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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:

new course releases

newsletter

general communications

special notices

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:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.