HTML and CSS —

Using Shorthand for Font Styles

As with backgrounds, there's a shorthand property for font styles. These incorporate some of the font properties and the line-height property, but none of the text properties. What's more, you have to pay close attention to order when you use shorthand with fonts.

The shorthand property is font: and the order of its values is as follows: font-style, font-variant, font-weight, font-size/line-height, font-family.

p {font: italic small-caps bold 14px/15px Arial, Helvetica, sans-serif;}

This will result in all paragraphs being italic, small-capped, and bold, with a font size of 14 pixels, a line height of 15 pixels (note the slash between them, the only time this symbol is ever used in CSS) and text in Arial, Helvetica, or a default sans-serif font.

If you want to leave out any value, just keep the integrity of the rest of the order:

p {font: bold 14px Arial, sans-serif;}

This results in a 14-pixel bold Arial font. You can use shorthand any time you like; just be aware that, with fonts, order is imperative or your style sheet might not work.

QUANTUM LEAP: UNSUPPORTED AND POORLY SUPPORTED FONT AND TEXT PROPERTIES

Several poorly or completely unsupported styles are available in the current specification for fonts and text. I'd like to take a moment to mention them here, mostly because they're really cool. Also, I bring this up because eventually support for these properties will likely be more widespread.

The font-size-adjust property enables you to set an adjustment value so that all your fonts appear relatively uniform in terms of their sizing. This would come in very handy because different fonts have different native sizing: Surely you've noticed that a 12-pixel Times font is smaller than a 12-pixel Arial font. Well, as soon as you begin to have multiple fonts, you might want to make them more visually uniform. By setting a font-size-adjust value, you normalize the size of the fonts so that all fonts within the style are sized consistently. You can see why this would be useful.

The font-stretch property enables you to condense or expand text. This is helpful when you want to get some interesting effects.

Finally, the text-shadow property enables you to create a drop shadow effect for your text. Won't this be cool when you can actually use it? The property allows for color and offset values, and will eliminate the need for graphics when the goal is simply to add a shadow effect to the text.


Now You're Getting Fancy!

I just know you're having fun now! You've got enough skill with images, color, and text to really create a nice-looking page or site.

But, of course, there's lots more to learn with CSS. In the next tutorial, you'll take a look at the ways links are used in today's web design. Once we could style links with only limited options, but now we can have multiple styles of links, including multiple colors for all states, even hovers.

You'll also learn about lists and how the combination of lists and links has become a mainstay of approaching contemporary navigationboth vertical and horizontal, helping you to create awesome and interactive interfaces with minimal or even no use of images.