Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
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.
There are currently no FAQs about CSS Web Site Design.
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.