In this session we show to use a span tag. We discuss ordered and unordered lists. We then demonstrate how to wrap a list item in a span tag and then create a style in a span tag. We do it this way so that any changes you make will only affect what is wrapped with a span tag.
Rick: The other thing to consider here is instead of using a UL, an unordered list, you could use an ordered list. And then rather than typing numbers in front of each of those things, you could let the number be added automatically by HTML which is another thing you could do. Right now, you’re typing 1, 2, 3 but you could just say old school versus new and let HTML add the 1, 2, 3 and then when you added something in the middle, you wouldn’t have to renumber it.
Member: I think the problem that we came… I ran into with that was whatever the font was is the look that we got with the numbering. We wanted more a fun-looking number… like our font, let’s just say if it was Georgia, well the number 1 in Georgia doesn’t look very fun. Or 8 or 7 doesn’t look fun or so we’re looking or a font to make the numbers be more fun, like you handwrote the numbers.
Rick: But you don’t have that yet.
Member: No, we don’t have that yet. But we’re going to get it together and then come back and then change those numbers to be more fun.
Rick: Okay well…
Member: So unordered list would probably work better, I think and then…
Rick: Yeah because you can’t style the numbers separate from the text in a list like that. So if you do it this way, you could wrap a span tag around the number and give it a different font style and it would only affect the number. It wouldn’t affect anything else.
Member: Okay. Well, this is a lot of work…
Rick: Do you know what I mean by that?
Member: I think I do. Remember, you’re talking to a baby. I just stepped into this. Anything that I’ve done on the web was iWeb and it’s just drag and drop.
Rick: Okay so I’ll show you here. Here we are in this UL and I’m going to type a span tag and then we’re going to say… class equals number and then close the span tag on the other side. Okay so we’ve got a span tag. What a span tag does, a span is a way of changing the style of some text inline. You don’t change all of the style of a text. You’re just changing one little piece of it. And so you wrap that thing you want to change inside of a span tag, opening and closing span tag. And then we gave the span tag a class called number. And now we’ll just update that, come back over and refresh it. Okay and then we can come down here and say .number. That’s the name of our class and now we can say font… let’s see, font family, let’s say Impact. Okay, font family Impact, font size… let’s see, 18 px and then color red. And then let’s say padding left 10 px. Padding right is what I wanted. Okay?
Member: I see.
Rick: So then somewhere down the road, when you say, “Well, we don’t want to use Impact anymore. We’re going to switch to Verdana.” And we don’t want it 18 pixels, now we want it 20 pixels. And we want it green. You can see what happens here, right? Because you’ve changed the style, if you had all of those things wrapped in a span tag, you could have changed all the styles at the same time, all of them at the same time, right?
Member: I see. It makes it much much more interesting.
Rick: So that’s how you would do this. You would wrap the list item in a span and then create its style for the span.