CSS Properties: Text and Font
This section covers some of the basic properties and values used to affect text display.
Text Display Properties
- color: Color is used for describing the color of text. You can use common color names, like blue, black, red, yellow, or hexadecimal RGB (red green blue) values. Hexadecimal values must be preceded by the # symbol. Exanples:
p { color: blue; } p { color: #0000FF; } - text-align: Text-align can be set to left, right, center, or justify. Example:
h1 { text-align: center; } - text-indent: Text-indent is used to indent the first line of text, and can be set to a percentage, or a particular value (usually pixels, px, for the screen, or points, pt, or inches, in, for printing. When combined with padding, text-indent can take a negative value for a so-called "hanging" indent. Examples:
p { text-indent: 25px; } p { text-indent: .5in; }Note that whenever you use units, whether px or pt or in or %, there should be no space between the value and the unit, e.g., 10px. - letter-spacing: Letter-spacing determines the amount of space between letters; usually set in pixels, px, for screen, and points, pt, for print. Example:
h2.comments { letter-spacing: 5px; } - text-transform: Text-form lets you set text to capitalize, which capitalizes the first letter of each word; uppercase, which makes all letters uppercase; lowercase, which makes all letters lowercase; or normal, which is the default and relies on the capitalization in the markup. Example:
h1 { text-transform: capitalize; }
Font Properties
- font-family: Font-family specifies the typeface for text to be displayed in. Common font-families are Arial, Verdana, Helvetica, and "Times New Roman" (whenever we have a font name with spaces in it, we put it in quotes so CSS doesn't "choke" on it; also, be sure the comma-separator is outside the quotes). It's best to give font alternatives to cover all machines, and end with a generic font-family: serif, sans-serif, or mono. Example:
p.important{ font-family: Georgia, "Times New Roman", Times, serif; } - font-size: Font-size speficies the size at which font is to be displayed. Some people prefer the unit of em, partially because it allows text-resizing in Internet Explorer; however, the base-unit of em is different across browsers, which means many designers are more comfortable with the unit of pixel, px, which can still be resized in better browsers like Firefox and Opera. Example:
h2 { font-size: 25px; } - font-style Font-style allows you to run text as italic or oblique (or normal, which is the default).
- font-weight: Font-weight allows you to run text as bold or normal (default).
- text-decoration: Text-decoration allows you to add lines to text, specifically underline, overline, line-through (which looks like struck-out text).
- font-variant: Font-variant can be set to small-caps or normal.
- line-height: Line-height can be specified by a number (e.g., 1, which is single-spacing, or 1.5, which is one-and-a-half spacing), which will be multiplied by the font's size.
A Possible, Complete Text- and Font-Style Declaration for <p>
See if you can imagine what a paragraph would look like with these declarations:
p {
color: gray;
font-family: Arial, sans-serif;
font-size: 10px;
line-height: 1.5;
text-indent: 50px;
}
Updated on Mon. Feb. 27 2006 at 03:09PM