Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In writing, the rules for defining the case of letters are pretty straightforward; in sentences you uppercase the first letter, as well as those of proper names and nouns, everything else lowercase. CSS allows you to control whether targeted text is uppercase, lowercase, or capitalized all for stylistic intent through the Text-transform property. Let me show you how it works with the tours.htm file that I have open now from the Chapter 5 > 05_02 folder. I'm going to go in and double-click on Tours which serves as the page ID for this site.
Then I'll go into Edit Rule and from the Type category, you'll see an option over on the right-hand side called Text-transform. Now, let's say that I want my text to always be uppercase, I can choose Uppercase from Text-transform. I'll just go ahead and click Apply and you can see now that all of my text, no matter how it was entered, all of the page IDs would be uppercase. Same thing applies to lowercase; if I decide to go a little bit more subtle.
Let's leave it at lowercase. Not only can you control upper and lowercase, but you can also ensure that every letter in a phrase is capitalized. Let's scroll down a bit to see the callouts over on the left-hand side and here we have the text, "Did you know?", which is being used as the heading for this particular callout. So if I want to make sure that every letter is always capitalized in this because they might change the text, but stylistically I want it always to be capitalized, I can select the rule, and you can see that this is callOut.h1, but I actually want it to be just the trivia one.
So I'm going to go ahead and select that. Now I can see that there is no specific rule for that. So let's create one quickly. I'll choose New CSS Rule, and it doesn't quite get what I'm looking for. So I'm going to make it a little bit less specific, and then add-in the h1 tag, because I don't want to target the entire block. I want to target just the h1. Alright. So I'll click OK, and now I can go to Text-transform and choose Capitalize. If I click Apply, you can see that all the letters are now capitalized.
The Text-transform feature really comes into play when you've got content being contributed to the page by the client. Regardless of whether the client enters uppercase, lowercase, or capitalized text, it always displays the way you, the designer, specified.
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.