Sample Chart

CSS Font and Text Properties

Key: In the values listings in the following chart, there are three types of values:

  1. Keyword: A keyword value means you use one of the keywords for the property value. These are indicated by normal text. For example, in setting a background-attachment property, I might use the keyword "fixed" as the value.
  2. Reference: A reference word, such as length, means you substitute the proper value for the reference word. For example, where it says length, you would use a CSS unit of length in place of the word length. In writing the code for a font size, I'd write 14px in place of length; or in writing a border color I might write blue in place of a value listed as named color. Reference words are indicated by italic type.
  3. Inherit: Inherit is actually a keyword value, but it means the property inherits its value from its parent element.

Note: If you need help with the chart's code examples see the Code Example Explanation below.

Font and Text Properties
Property Description Values
color Sets the element's foreground color, which almost always applies to the font color. hexadecimal color | RBG color | named color
Example: {color: black;}
font Shorthand property for setting most font properties in one declaration. The included properties are:

font-style | font-variant | font-weight | font-size or font-size/line-height | font-family

You may set any number of the font properties, but they should be declared in that order. Size and family are required. When setting the font size, you may specify the font-size or the font-size/line-height, but not both.

See example 2 for visual reference.

Values should be separated by a space. Multiple values for font-family should be separated by commas.

Relative size is as it relates to the parent font size or default font size. Values are: larger | smaller

Length refers to any CSS unit of length, such as pixels or ems.

Percentage refers to a percentage of the parent font size or default size.

Line height specifies the minimal height of line boxes within the element.

Font family refers to a specific type face or a style of type, such as serif.

 Font-style values:

normal | italic | oblique | inherit

Font-variant values:

normal | small-caps | inherit

Font-weight values:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Font-size values:

xx-small | x-small | small | medium | large | x-large | xx-large | relative-size | length | percentage | inherit

Font-family values:

family name | generic name

Family names are specific fonts, such as Arial, Verdana, etc.

Generic names are:

serif | sans-serif | cursive | fantasy | monospace

Example: {font: normal 16px Verdana, Arial, sans-serif;}

Example: {font: 14pt/20pt Arial;} (14pt/20pt=size/line height)

font-family Sets the font face (type face) used.

Using a family name requires the font be installed on the user's computer. If it's not available and only one family is listed, the default font will be used.

Multiple fonts may be listed, separated by commas. The user agent will display text using the first font listed that it finds installed on the user's computer.

 Font-family values:

family name | generic name

Family names are specific fonts, such as Arial, Verdana, etc.

Generic names are:

serif | sans-serif | cursive | fantasy | monospace

Example: {font-family: Broadway, Castellar, fantasy;}
font-size Sets the font size.

Relative size values:

larger | smaller

 Font-size values:

xx-small | x-small | small | medium | large | x-large | xx-large | relative-size | length | percentage | inherit

Example: {font-size: 14px;}
font-style Defines the style of the font face. normal | italic | oblique | inherit
Example: {font-style: italic;}
font-variant Allows the use of small capital letters. normal | small-caps | inherit
  Example: {font-variant: small-caps;}
font-weight Sets the weight (heaviness) if the font. Note that some you probably won't see any difference between some weights. normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Example: {font-weight: bold;}
letter-spacing Allows you to change the spacing between characters of text. Length refers to any CSS unit of length, such as pixels or ems. normal | length | inherit
Example: {letter-spacing: 2px;}
line-height Allows you to change the spacing between lines of text.

A number can either be either a whole number or a decimal. It may be preceded by a "-" or "+" to denote positive or negative value.

 normal | number | length | percentage | inherit
{line-height: 110%;}
text-align Sets the horizontal alignment of text. left | right | center | justify | inherit
Example: {text-align: justify;}
text-decoration Sets the text decoration property. A value of none is often used to remove the underline from links.

Note: Blink isn't well supported.

 underline | overline | line-through | blink | none
Example: {text-decoration: line-through;}
text-indent Sets the amount of indentation for the first line of text. Usually used to indent the first line of paragraphs. length | percentage | inherit
Example: {text-indent: 7px;}
text-transform Transforms the case of the text. The value of capitalize makes the first letter of each word a capital letter. capitalize | uppercase | lowercase | none | inherit
Example: {text-transform: lowercase;}
vertical-align Sets the vertical position of text with respect to the surrounding content.

Percentage raises (positive value) or lowers (negative value) the box by a percentage of the 'line-height' value.

Length raises (positive value) or lowers (negative value) the box by the distance given.

 baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length | inherit
Example: {vertical-align: middle;}
white-space Sets how white space (blank spaces, new lines, tabs) is handled.

Normal collapses whitespace and breaks lines as needed.

Pre prevents collapsing of whitespace. Lines are only broken at newlines in the source code.

Nowrap collapses whitespace but suppresses line breaks.

Pre-wrap prevents collapsing of whitespace. Lines are broken at newlines in the source code.

Pre-line collapses whitespace. Lines are broken at newlines in the source code and where necessary.

 normal | pre | nowrap | pre-wrap | pre-line | inherit
Example: {white-space: pre;}
word-spacing Sets the spacing behavior between words.

Length refers to additional spacing between words in addition to the default spacing unless a negative value is used.

 normal | length | inherit
Example: {word-spacing: 1px;}

Code Example Explanation
The code examples are formatted like this: {background-color: #7de55b;}. This shows you how to format the property and value, but it does not include the selector. In an external style sheet, you might use that same code example as the background color for a paragraph, a division, for the entire web page, or with many other elements. To use this code example as the background for a heading, you'd write: h1 {background-color: #7de55b;} in your style sheet. It's not practical list all the selectors available for each style property. If this seems difficult to understand, remember, it isn't necessary to understand this chart right now, CSS syntax and usage is explained in CSS Made Easy. As you learn the lessons in the tutorials you'll automatically understand this chart.

Side Note: This is only one of 17 reference charts that you'll get as a free bonus with the purchase of CSS Made Easy, plus you'll get CSS Master and a Glossary of Internet Terms for Webmasters for free too. Or, you can just purchase the Reference Charts and you'll still get the Glossary for free. Choose your favorite package!

You could also have access to all the CSS Charts included in CSS Made Easy, plus HTML Charts and more by joining my member site or by purchasing the latest edition of my book, Web Site Design Made Easy.