Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although we aren't going to do anything in this movie that we haven't already done in one form or another, stick with me, because in this movie we're going to tie everything we've learned about styling links together to explore making CSS-based rollovers. The ability to create CSS-based rollovers is based off of the use of what we call pseudo-selectors. There are many pseudo-selectors but the link, visited, hover and active pseudo-selectors allow us to respond to user interaction for our links. In this movie, we will create a CSS -based rollover for our frequently asked questions links.
By creating a separate visual state for the link and the hover, we can create a more compelling visual guide to the pages navigation. So I have the faq.htm file open, and if I scroll down, and I can see that the links that are going to take us down the page don't look quite as good as they used to, but that's because we've ripped all the styling out of it, and we're going to style it again. All right. Now, I want to bring up another toolbar here for this exercise, so what I'd like you to do, go up to the Document toolbar. Right-click that or Ctrl+Click that if you're on a Mac with a single button mouse, and choose Style Rendering.
So our Style Rendering toolbar is going to come up. Now, I'm going to dock mine up in this area. Now actually I can really pretty much dock it anywhere I want, or I can float it around. I just want to place it in a place where it's not going to take up a lot of screen real estate. Now, if you're on a Mac, it is going to dock within the Document toolbar, and you cannot move it around. So, hopefully its placement will be okay for you. Now, notice that the Style Rendering toolbar right here on the end has some pseudo-class selectors: We have link, visited, hover and active. So as we begin to style these, we can preview them here locally by simply previewing that particular state.
The next thing that we're going to do is we're going to give ourselves a little bit more room here, because we're going to do a little bit more hand-coding. Please don't panic. This is really simple stuff, and now we're going to go through it step by step. So if you haven't done a lot of hand-coding, don't worry about it. I promise you, the more you do it, the easier it will get for you. Okay. I'm going to go right over here to our panel dock, and I'm going to collapse that down to icons. It's going to give me a little bit more room. And then I'm going to go to a Split screen view, so that I can see the code on the one side, and my objects on the other.
So, what I'm going to do is scroll down just a little bit more and find my first link, Backpack Cal right there. Now, by using the Code Navigator, you go hold down the Command+Option key on the Mac and click on that, or on the PC you can simply Alt+Click them, and up comes your Code Navigator. Yes, there are a lot of styles being applied here, but there are two in particular that we're interested in, the very two at the bottom. The first one is dealing with the link state; second one is dealing with the hover state. So as we're writing these, we're going to talk about what these pseudo-class selectors allow us to do.
So, I'm going to click on the second one right here, #mainContent #mainArticle ul.faqNav li a:link, all right, so just click on that. That will jump in our CSS, so our code should just jump right there. And I want to break down these selectors, because taken as it right now they can be a little confusing, so let's talk about those. So essentially it's saying, hey, look in the mainContent region, find the mainArticle inside that and find an Unordered list with the class of faq.Nav, which is exactly what this is inside them.
Then find an individual list item, inside that locate a link. So, all that, just to drill - down to one specific link. So it's a very specific selector, but this is what I want you to focus on right here, a:link. Now just underneath that we have the exact same thing repeated, but a:visited. Okay, so what is link and visited actually mean? Link means that it is an anchor tag with an active href attribute, so an href attribute that points to somewhere. So, this wouldn't apply to a named anchor, but it would apply to any link that is actually going somewhere else off the page.
Now, visited is the visited state of the link. You know, often you'll click on a link and then you come back to the page, and there are some type of an indicator that you've been there before, maybe the link changes color, or perhaps there is an icon beside it to let you know that you've visited the page before, but that's what that allows you to do. Now, the comma between these two means that these are being grouped. Now, why would we group those two? Well, in this case, we really don't want to actually show a difference in the linked and a visited state. We don't want the browser to continually update it if it's been visited, because kind of ruins the look and feel of it.
There are certain menus and lists that benefit from visited links, but this is not one of them. So if you want to ensure that the browser doesn't change your styling or change the way a link looks, you can group those two selectors together, and you know that the normal state of the link, and the visited state of the link will look exactly the same. So those are what those two pseudo selectors are doing for us. Okay. I'm going to click right inside the empty declaration, and we're going to start styling our links. So the first thing I'm going to do is get my background color.
So, I'm just going to type in background, and then a colon, and the color that we're going to type in is # CCC and then a semicolon. So that's a light gray, so the word background: #CCC;. Now remember from our earlier lesson on CSS, you have the property on this side. You have the value of the property on this side, and they are separated by a colon. The semicolon tells it to quit reading this line, and go to the next one. Speaking of that, let's go to the next line. On the next line we're also going to give this a border.
So, I'm going to type in border, and we can use a little shorthand notation here. We're going to do 1 px space and then solid and then space and then #999 and then a semicolon. Now, in this instance I was taking advantage of code hinting, so if you begin typing, often Dreamweaver will give you a list, and you can just go ahead and choose from that list, hit Return, and it will finish it for you. That often prevents you from having to really work with a lot of the syntax. You don't have to worry about typing in the colon, that sort of thing. So now, you can actually see in the Design View it's starting to update every single time we do one of these, which is really kind of nice.
Now, after that, we're going to do a little bit of padding. So I'm going to type in a p, it jumps down to padding, notice that, and I hit Return or Enter, and it will go and finish typing that for me, and it will type the colon, which is pretty cool. For padding, I'm going to do 5 px, and then a space, then 0, then a space, 5 px, another space, and then 10 px, and then a semicolon. So, the first value is going to be the top padding. So that's going to be the space between the text and the top of the element. The second one is right padding, but we don't really need any right padding, because most of our text is not going to make it all the way over.
The third value there, I should say, is the bottom padding, and then the fourth one is a left. So, we're pushing the text 10 pixels away from the edge of our element. We're giving it 5 px of space, top-to - bottom, and then we're really not worrying about the right side at all, because we don't need to worry about that. The text will make it that far over. So that should give us some extra space inside that so that the background color doesn't do what it does right now, which is butt right up against the edge of that. All right. So, I'm going to hit Return and go down to the next line, and on the next line I'm going to do font-size. So, font-size, and here we're going to do .85em.
So I'm going to make the font-size a little bit smaller, .85em, so that it fits within these boxes nicely. So, I'll just make that a little bit smaller there. By the way, I know you've noticed that when you type in a unit of measurement like pixels or ems, you use that small abbreviation. There is no space between the value and the unit of measurement. If you leave a space there, that could cause a problem. Next, we're going to go on the next line, and we're going to type in a color. The color for this one is going to be #193742, #193742.
So, I'm going to hit Return, and I'm going to type in width, and for some reason be very careful about typing in wid, because I always end up with widows, but I want width, so let's do width. Now we're going to do 170 px. On the very next line we're going to do display, and we're going to do block. Okay, now what am I doing that for? Well, these two values, width and display, are going to make sure that the link extends for that entire box. So, that's what block is going to do for us, and forcing a width in there forces browsers like Internet Explorer to make the entire box clickable, and not just the text area.
Now, if I click inside the Design View, it should update that. There we go. Notice that we get that sort of teal color. We get that gray all the way around that, and our padding is giving us a little bit of distance between the text itself and the box. Perfect. So, go ahead and do a Save All, and now the normal state of the link is going to look like this, and the active state of the link is going to look like this, but to create a true CSS-based rollover, we now have to work on the hover state. Well, that's what the selector just below this one is going to do for us, so I'm going to scroll down, and just like we did last time, I want to go over this selector.
Now, the first part of it is exactly the same. So the whole long path to the element remains the same, however, here, we're doing a:hover and a:active. Let's talk about those two. Hover is the state of the link when somebody is actively hovering over it. So when somebody rolls over your link, that is considered to be a hover. Active means somebody is actively clicking on the link, or if somebody clicks to the link, and then hits the Back button right away, focus on that link might still be there, so you might see the active version of that. You know, sometimes you see a little border around the link or a little dotted border.
That means a link still has focus. So that would be the hover and the active state. Once again, we're grouping those together, because we want those to look the same. We don't want any other styling to interrupt our link. Okay, now this one doesn't require as much work as our last selector, because here we're going to change a couple of values. We're going to change some color, foreground and background color, and then we're also going to change the border as well. So, the first thing I'm going to do here is type in color, so just type into your selector, type in color: #fff;. That's white, so we're going to change the text to white.
Hit Return to go down the next line, and here type in background, and the color we're going to use here is #cb7d20, so cb7d20 and then a semicolon. That's sort of an orange color, and then go down to the very next line, and type in border: 1px solid #666;, so it's going to be a little bit of a darker color, so as you hover over it, the border will get a little bit darker as well, although it's going to stay the same size.
Now, I'm going to scroll back up just a little bit so you guys can see my code and if you need to just go ahead and pause the video and look at that code a little bit more closely. Hand-coding your CSS is not hard. Dreamweaver gives this a lot of code- hinting, and if you kind of know what you're doing and know the properties, you can go through it pretty quickly. However, if you're brand-new to CSS, obviously this properties aren't going to be familiar to you, the values aren't going to be familiar to you, and if you're not absolutely precise with this code, meaning, one character is off, you forget a space, you forget a colon, then it can cause your entire CSS not to work or sections of it not to work, certainly this not to work.
So, you want to take just a second, maybe pause the video, go over each line of code, make sure everything is exactly as you see it here, and you should be in good shape. While you're doing that, I'm going to go ahead and do a Save All, all right? And now I'm going to go and preview these. Now I can certainly preview them in my browser, and I'm going to do that in just a moment. But I want to use this cool new feature in the Style Rendering toolbar. I really like this, because now I can come over and say, okay. That's what my normal links look like. What about my hover? So, I'm going to click on hover, and you might notice a slight change in your layout.
It's okay. Dreamweaver sometimes has trouble rendering certain issues, and as I scroll down, I can see now that my links have orange background color. They have a sort of a darker border around them, and things don't look the way maybe we wanted it to. So, when you first do this, you might panic a little bit, but don't. What Dreamweaver is doing here is only showing you the hover attributes. CSS is cumulative, so the padding, the lack of decoration on the text, the lack of the underline there, the width of those things, those are not being shown, because they are not part of the actual hover selector, but they're still there.
So, really you're going to use this Style Rendering hover preview to just see specific information. Did I get the orange background color right? Is the border color right? That sort of thing. Don't trust this as an accurate preview. For that, we're going to go ahead and preview this in the browser, or we could use the Live View feature here as well. So, I'm going to click back on links, make sure I've done a Save All, and then preview that in my browser. As soon as I do that I can hover over my links and sure enough I get a nice CSS-based rollover. So our background color is changing, foreground color is changing, the border is changing a little bit, so we're doing all of that through the link, visited, hover and active pseudo-selectors.
If you place the hover, for example, above the visited, then after your visited link, you have no more hover. The visited overwrites in. So most people use the device Love-Hate, LVHA as a way of reminding them the proper order; link, visited, hover and active. Grouping the pseudo-selectors, as we've done here, is another way to prevent those types of problems. Now for additional information on what can be done with links in these pseudo-selectors, you might want to watch the Chapter_07 movie on Positioning Background Images where we create something very similar to this by shifting the position of background images in an element.
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.