In this session, we demonstrate how to style the social networking link list. We first assign a class to the list and give it some CSS customization.
Video Transcript
Rick: And so now we’ve got the link working the way we want it to work. Now we need to style it so we’d have that background image in there and that’s actually the interesting part of this. And what we’re going to do is we’re going to assign a class to this which is something similar to what I was talking to Susan about earlier here. We’re going to assign a class and that would be class equals and then I’m just going to say social-links and hit save. And now what we’re going to do is work on this in Firefox.
Okay so we’ve got our custom CSS file which is what we’re going to edit here. I’m going to say .custom and then we’re going to say .social-links. And actually, I’m going to say UL social-links. And then what we’re going to do is a give it a background image: URL equals… oh pardon me… UL… yeah, it’s double quotation marks. And then we need to go get the URL so we have to go back and get that from this. That is your URL. Oh yeah, Firefox. Let’s just make sure I got that right. UL class social-links, background image URL… okay, I’ve got my… oh, I was missing… that was what I was missing. I was missing the quotation… the parenthesis around this. So now that shows up there. Now we don’t want it to repeat so we say background repeat: no repeat; Okay and then we want to give it a height colon and that was 350 pixels, right?
Lesli: Let me look.
Rick: Yup, okay. 350 pixels and it doesn’t look like we need to define a width but we may as well move our LI items over. So we’re going to say padding: left… pardon me, padding-left colon and it looks to me like about 40 px. I guess 50 px, yeah.
Lesli: We’ve got it right-aligned?
Rick: Yes, we can have them right-aligned but we’re going to right-align the LI item and not… let’s see… not the UL item. .custom and then .social-links LI and then text align: left… right. Okay and so now actually, you know maybe we want that background image to move… you know actually, I think we should make our background… let’s get rid of this padding and let’s just say background position top center.
Lesli: Actually, I’d love to have it right… the background image, I think I’d love to have it right-aligned because it makes it look like it’s wrapped around the edge of that column.
Rick: Okay so top right, like that you mean?
Lesli: Yeah.
Rick: Okay so now we’re going to say padding right and not 50 pixels but more like 10. Okay, 15? Does that look about right to you?
Lesli: Yes it does.
Rick: Okay so then now we have those bits of it, right? Now what we have to do though is move these things down and change their color. Now, I suppose we could move them down… well actually, the first thing is… the first question is should the text be the only hot link or should the entire rectangle be hot?
Lesli: Wow. That would be great if the whole rectangle could be hot.
Rick: Okay. Well, that’s usually what you do with something like this. You usually have the whole thing be hot. And so what we’ll do now then is say .custom .social-links LI a which is the link. Now the first thing we have to do is we have to make it a block level element which so we can have a height and a width. So we say display: block because link tags are, by definition, in line elements and not block level elements. So in line elements can’t take a height and a width or margins or padding. But block level elements can. And now we’re going to give it a height of what looks like it’s about 30 px and then a width of… is that about 100… no, 80 px. So now, if I hover over an a… oh, isn’t that funny? So 80 was too small. 120, 180, 140. Looks like it needs to be a little smaller, 135. There we go. So that’s a block level element now. Is that… actually, I guess we could keep it at 140 and then give ourselves some padding on the… that’s probably what we ought to do. If we want the whole thing to be hot, let’s see… 145, okay.