Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So here for our text instead of doing something like vertically align or horizontally align, we're actually going to transform our text. It's going to be changed into something other than what it intrinsically would be. We're going to concentrate on the text in the content area as we have been and you can see that this is the same old ordinary text that we've been having all along. But what we're going to do is we're going to say content h1 text-transform uppercase, without touching the document source, without changing any of the text in the document, the text will be uppercased, purely stylistic. If we were to go back and take a look in the markup, you can see right here about tea history is all lowercase.
If you look over in the sidebar the tea of the day and post archive headings those are using the capitalization that's already intrinsic to the document. We can say sidebar h3 text-transform lowercase and the text is lowercased. Again this is utterly a stylistic thing and we're not altering what's in the document source at all. And now we're going to do something extra fun, text-transform capitalize using I understand the American spelling with a Z instead of an S as other countries do, but that's just what the keyword is. Text-transform capitalize and the paragraphs all get the first character of each word capitalized.
And that's very interesting. Of course you're relying on the browser to know what exactly a word is and Firefox here does a pretty decent job. It apparently makes the assumption that if there's a string of text that has a space before it that's a word. But if we were to take the same document and load it up in Safari take a look at for example the beginning of the third paragraph where it says It's most likely that it was the Japanese green teas. Notice the its and actually the next line down Japan's, the S in each case after the apostrophe is being capitalized. In fact, if we had the word you're, Y-O-U-R-E, the R after the apostrophe might be capitalized.
This is because Safari's algorithm for determining what a word is assumes that something like an apostrophe which could also be a single quote is the beginning of a word, and that's sort of the problem in relying on these sort of things. You're always at the mercy of what the browser authors were able to come up with. CSS does not define what a word is and, and really that's all for the best because you know linguists argue about that at times and different languages have different ways of marking what a word is. In Latin derived languages, Western European languages, it's usually the case that words are space separated and that sort of thing, but there are languages such as Chinese or Japanese, where no such distinction exists. So what we have here is a situation where by having set text-transform capitalize we have weird capitalization happening in one browser but not in another and that's just the way it is. So you can decide whether or not that means that you want to use text-transform capitalize or not with any text transformation you know like this that could happen. Uppercase and lowercase, not so much of a big deal cause either the text is all uppercased or all lowercased and that's really kind of hard to mess up none the less.
There you go, text transformation.
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.