Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The level of control that CSS allows you to have over your text is pretty remarkable and in this movie, we're going to talk about transforming text, that is forcing the text to conform to capitalization rules for your site, regardless of how the original text was typed. This is particularly valuable in situations where you can't control the text input, say when the text is coming from a database, or when text is being updated by a third party. If you need the name of the product to always be capitalized, for example, the text-transform property allows you to specify that.
In addition to examining the text- transform property, we'll also take a look at the font-variant property, which allows you to choose stylized capitalization like small caps. So here I've opened our faq.htm file again. This is found in the 07_09 resources folder. Now I'm just going to scroll down a little bit and talk about what it is that we're going to be doing. Down here, all of our tour names really should be capitalized. Currently, they're not. There is a wide variety of capitalization going on there.
So we need to fix that. If I scroll down, I can see that at the bottom of each section, there is a link that returns people to the top of the page. Sometimes it's capitalized, sometimes it's not. It doesn't seem to be very consistent. Frankly, I would like for them to be all lowercase. So I'm going to new use text- transform to do that for me. Then finally, at the very bottom of the page in our footer, we have our company name right there. Frankly, I would like a more stylized treatment of that. So I might want to see what that looks like in small caps, so I could see if I wanted to treat it that way throughout my entire site.
So let's scroll back up and tackle those one at a time. Let's go ahead and tackle these guys first. So again, I'm going to go to target a rule by using my Code Navigator. I'm going to hold down the Alt key. That's Command+Option on the Mac. Click on that Rule. The one that we're looking for is not all the way at the bottom. This time, it's #mainContent #mainArticle ul.faqNav li. So I'm going to go ahead and select that. Again, remember, I can use the CSS Styles panel, or I can hand-code it if I wanted to.
I will double-click the Files panel to give myself a little bit more room. Then I'm going to make sure that is indeed the selector that I have selected. There we go. So I'm going to go down and add a property to that. I'm going to add the text- transform property, so text-transform. If you're worried about spelling and then the dash and all that, remember, you can grab that through the pulldown menu, text-transform. Now let's take a look at the options that text-transform gives us. We have capitalize, which is going to make sure that each word is capitalized.
We have uppercase, which is going to make it all caps. We have lowercase, which is going to make sure it's all lowercase. We also have none, which basically means leave it alone. We have inherit the basically says, "Hey, what's the parent object doing? Let's do that." Well, we're going to choose capitalize. So when we can click back in the Design view, we can see that each of our tour packages is now capitalized, regardless of whether it was before or not. So that's really allowing me to cover my bases on that. Now I'm going to scroll down a little bit, find one of these links Return to top.
Now if I target that with my Code Navigator, what I'm looking for is this selector right here, #mainContent #mainArticle p a.top. So that is any a tag which is an anchor, which is the link tag with the class top applied to it, found inside of a paragraph, found inside of mainArticle, found inside of mainContent. I know those can get little long. So I'm just going to click on that and with that targeted and highlighted, this time let's double-click that, so you can see where text-transform is in the CSS Rule definition dialog box.
Well, here it is right here, Text-transform. I'm going to grab that pulldown menu. This time, I'm going to say lowercase. Click OK. Now when I click in Design view, I can see that each of those is now all lowercase. Perfect. Exactly what I wanted. Now let's scroll all the way down, and take a closer look at Explore California. Once again, I'm going to go ahead and bring up my Code Navigator for that. The very bottom rule, #footer # footerBody #footerRightColumn heading 1, that's the one we want.
I'm just going to double-click that as well, because I want to show where this is in the CSS Rule definition dialog box if you are ever creating a Rule and you want to use Font-variant. Right above Text-transform is Font-variant. If I grab that pulldown menu, notice I have two options here: normal and small-caps. Normal is the default, so unless you're trying to overwrite something that's been done earlier, you're probably only going to use this if you ever just want small-caps. So I'm going to just choose small- caps, click OK, and click back into my Design environment.
Now, Dreamweaver doesn't do the best job of previewing what small-caps are going to look like. So what I want to do is do a Save All, click back on Design view and I'm going to click Live View to render this page with the WebKit rendering engine. If I scroll down to my footer now, I can see that actually looks a little bit better. You might also want to preview that in another browser, say Firefox, for example. Now when I scroll down, all the way down to the footer, I can see my small-caps there. I kind of like the way that looks, so I think I'm going to leave it like that. All right.
Excellent. Now all the tour names, return links, and the footer text is displaying following our sites specifications, regardless of how the text was entered. Whether you use the text-transform and font-variant properties to ensure proper text display or to create stylized displays that vary from the actual content, you'll find these properties an indispensable technique in controlling your site's CSS.
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.