Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In this hands-on course, James Williamson demonstrates the concepts that form the foundation of Cascading Style Sheets (CSS), including styling text, adding margins and padding, and controlling how images display. The course also explores the tools needed to work with CSS, the differences between embedded and external styles, how to use selectors to target elements, and what to do when styles conflict.
You can't always control how text is entered or formatted on your site. When working with a content management system for example, text might be coming in from a database with very little control over who enters the text, or how it's originally typed in. You know imagine, for example, a scenario where every item in the list was supposed to be capitalized, but the author just didn't enter the text that way. You know, rather than edit the text in the database, you can simply use the Text Transform property to capitalize the text the correct way.
Using Text Transform, you can control the case of any element on the page, so let's do that. So I have the transform.htm page opened and you can find that in the 04_05 folder. So very briefly, let me go through the structure of the page. If I scroll down, I can see that inside of our article I have a headline that says Transforming Text, a bit of foreshadowing here, I notice that none of these words are capitalized. Inside that I have a paragraph that talks a little bit about the Text Transform property but we've got some texture in this.
For example, I want all of this to be uppercase. This on the other hand should be lowercase. So we're going to add a little bit of additional structure to that in just a moment in order to make that happen. But let's first introduce the Text Transform property by working with our heading 1. So I'm going to go right up here to the heading 1 style and I'm going to use the text-transform. So a lot of the properties we've been using so far are a font-something, in this case it's text-transform.
And our values, again, Aptana has been nice to show me this. We have capitalized inherit, which you know again just sort of generic keyword. We have lowercase, none, which would undo any transformation that you've done in a previous style, and upper case. So let's take a look at what those will do for us. So I'm just going to do Text Transform:capitalize; So I'm going to go ahead and save that, test this in one of my browsers and sure enough that headline is now capitalized even though the text in the page isn't.
All right, now I'm going to go back down into my code and I'm just going to use some span tags here. I am going to take this text so as, for example, I want all this to be upper case and I'm going to wrap this in a span tag. I'm going to do the same thing with the word THIS, so I'm going to highlight the word 'THIS' and I'm going to go ahead and wrap that in a span tag as well. So I'm going to save this and I'm going to go up to my selectors here, and I'm just going to go ahead and create a couple of classes to help us out here.
So the first class selector I'm going to do is upper, and I'm going to go ahead and give it the Text Transform property. And as you can imagine, I'm going to go ahead and give it uppercase as the value. And then I'm going to create one called lower, text-transform: lowercase, here we go. So I'm going to save that and now the only thing I really I have to do is go down to the span tags, in the first span tag, I'm going to go ahead and do a class of upper, and then in the second span tag, I'm just going to go ahead and apply the class of lower.
So I'm going to go ahead and save that, go back to my browser and refresh the page and sure enough, I want this to be all uppercase, it's indeed now in all uppercase, and the word THIS which was in all caps now just is in lowercase. So the Text Transform, is incredibly easy to use, it gives you a fair amount of power over the case of your text. Do remember though that the changes that you're making here are just visual changes. The change is only made within the browser, that means that the actual content in the page does remain in its original case, that's important to remember if you're working with text that's ever being exported or being syndicated in some way or another.
There are currently no FAQs about CSS: Core Concepts.
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.