GregHowley.com

A Beginners Guide to CSS

1. What is CSS?
2. Where to put your stylesheets
3. CSS Selectors
4. CSS Properties
5. Cascading
6. Wrap Up

A Beginners Guide to CSS

Page 4

CSS Properties

Now that you know about how to link or embed a stylesheet, and how to select different portions of a document, let's look at some of the basic properties that you can modify. This is by no means a complete listing, but it should give you a good start. You will notice that when assigning multiple properties, a semicolon must be used to separate each. In fact, ending each property with a semicolon is a good habit to get into.

Color

Yes, yes, yes! You're sick to death by now of changing text colors. But up until now, we've used named colors like red and green. But while there are bazillions of these named colors you can use, you're often better off using hexidecimal colors. Red becomes #FF0000 and green becomes #00FF00. But nobody expects you to memorize all these - you can find a good listing of sites which will list many hex colors in WebFu's externals section under Colors. When using hexidecimal coloring, the first two characters indicate red, the second two blue, and the final two green. With combinations of these, any color is possible. An example of hex color use follows.

Font

There are many font properties which can be adjusted. Font size, font weight, and of course the font itself, which in CSS is called font-family.

font-size

Font sizes can be specified in a number of ways, but unlike with the old font tag, a unit is required. That unit may be an absolute measure such as in (inches), cm (centimeters), pt (points), or pc (picas). It may also be a relative measure such as px (pixels), % (percentage), or em (em's). You may also use keywords rather than units. Valid keywords are xx-small, x-small, small, medium, large, x-large, and xx-large. Relative sizes are calculated relative to the parent element. You'll find that both keywords and relative sizes may display differently in different browsers.

font-weight

A font's weight is a measure of its boldness. Valid values are bold and normal. Alternatively, you may specify a numeric value from 100 to 900. Theoretically, you could use any number, such as 442, but it's usually difficult to see the difference between 400 and 500, so there's no reason to use values that aren't multiples of 100.

font-family

Unlike many other CSS properties, the font-family property accepts multiple values. Obviously a chunk of text can only be shown in one font - the later values are provided in case the person viewing the text doesn't have your first choice font installed. So you may decide that your page looks great in 11 point Tahoma. But since not everyone will have the Tahoma font installed, you may choose arial as a fallback. Also, it is encouraged to provide a generic alternative as a last resort. Generic font families are serif, sans-serif, monospace, cursive, and fantasy. Although you can choose to provide only one font, it's generally not the best decision.

The multiple fonts must be separated with commas, and if you choose a font with multiple words, you must enclose it in quotes so that the separate words aren't interpreted as separate font names. Spacing outside the quotes is unimportant.

font-style

The font-style property indicates whether the text should be displayed in normal, oblique, or italic text. Oblique text is similar to italic in that the face is slanted, but it is not a true italic, as it lacks script.

font-variant

The font-variant property lets you change your font to something called small-caps. The capitalized letters within a small-caps block will be larger, but all letters will be capitalized.

Text-align

It's time to stop using that center tag. Stop using <div align="center"> too. All you need is the text-align property. Valid values are left, right, center, and justify. A note: justified text generally does not look as good on the web as it does on the printed page, where text can be manually adjusted if it doesn't look quite right.

There are many more properties, but these should give you a good start. The examples here all use the style attribute, but you'll find that the two other methods are far superior.