Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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 in this video, what we're going to do is look at three different ways that you can affect the way that a font is presented. The first of these is font style. So this is a font-style: italic as an example and all the paragraphs are italicized, yeah. Now there's one other value for font style and that's oblique. You can have italic or oblique and ostensibly these are different.
If you look at this, the text here, this is a specific italic font face that's created for this particular font and if we set this to oblique, then there should be a difference, but there isn't. In this browser, like to say extensively there should be a difference and oblique fonts is really just the regular font that's been slanted and italic font has its own face. The letter forms are specifically drawn for the purposes of being displayed in italics, as it turns out browsers, at least as of this recording, treat the two as being equivalent, the oblique as italic and vice versa and it might be that one or two browsers at least get right down to it, basically browsers just don't draw a distinction, italic is oblique and vice versa. So almost nobody ever uses oblique as a value.
They use italic or they don't. Now, there's the default value for font style which is normal and that's not an italicized not oblique text basically. So pretty much any time you see a font style, it's going to have an italic at this point. Now there's another way to affect fonts and that's by changing the weight. So we can make their weight bold. So now we have bold face to an italicized text and bold facing involves different faces than either italics or normal. Dig into the guts of a font package on a computer you're going to find like a normal italic font face and a bold font face and a bold-italic font face and there may be several more besides, but that's how fonts are typically set up. Now, you can say instead of bolding, you can say bolder as in this should be more bold than its parent element should be, but that honestly doesn't have much effect in current browsers. It's also technically possible to give font-weight a series of numeric values from 100 to 900 in increments of 100 and that would theoretically let the browser pick between any one of nine different weights.
So you can have a really late font at the 100 and a really heavy font at 900 and browsers just basically don't support that and the fonts that are available don't have the faces to support that anyway. So pretty much if you see font-weight either's going to be bold or normal, which is the default value. And then finally there is a somewhat interesting, there's an interesting little font effecter called font-variant, then the default value for font-variant is normal, just like the others and it has only one other value, and that's small-caps.
And if we are to say for our heading levels 1 to 4, h1, h2, h3, h4, font-variant small- caps, this is the result. You notice how the headings have changed to use small caps or small capitals. What that really means is that capital letters are used throughout but what would normally be lowercase letters have smaller capitals and what would normally be uppercase letters just have normal capital letters. That's really all there is to font-variant. And in this case, because there are really two values, normal or small caps, the only time you would ever use font-variant is if you want an element to have small caps. Now where this gets interesting is if we were to try to apply that to the paragraphs as well.
Now it turns out that the particular font we are using actually does have the ability to have a bold italics small caps font because small caps is yet another font face and a small-cap bold italic and so on and so forth, these are all individual faces within the font and so we have this ability. Not every font is going to let you combine these and it's difficult to predict ahead of time, which fonts will permit you to combine these and which ones won't. There are literally some fonts that if you try to bold face italicize, they will not let you. They're rare, but they do exist.
we're going to talk more about font faces and how fonts work in a later video in this chapter. So you can italicize, you can boldface, you can small cap, sometimes, perhaps even often you can combine them but you may on occasion run into a case where you try to combine let's say italicizing and small caps and something goes wrong and what you have to keep in mind is that it may not be your fault, they may simply be whatever font face you're working with, but when it comes to the common font faces, this is not generally a problem and we'll see, as I say in a letter video, how characters are assigned given font faces and what the implications can be.
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.