Webmaster Logo.Learn HTML and CSS.  
Click to see the benefits of becoming a member.Read the current issue of Almost a NewsletterCool webmaster products.Contact us.   Log in to the webmaster's member area.
About This Reference Chart
This is one of thirty HTML and CSS reference charts in the members area, plus there's an Internet Terms glossary. All of the charts use similar coloring schemes to make them easy to read at a glance. Here are the included charts:

  • Core Attributes
  • HTML and XHTML Elements, Attributes and Values
  • Deprecated and Obsolete Elements and Attributes
  • Proprietary Elements and Attributes
  • Element Compatibility and DTD Chart
  • Valueless Attribute Chart
  • DOCTYPE Declarations
  • CSS Background Color and Background Image Properties
  • CSS Box Model Properties
  • CSS Font and Text Properties
  • CSS List Properties
  • CSS Scrollbar and Cursor Properties
  • CSS Table Properties
  • CSS Aural Properties
  • CSS Display Properties
  • CSS Layout Properties
  • CSS Outline Properties
  • CSS Printing Properties
  • CSS Pseudo-classes and Pseudo-elements
  • CSS At-rules
  • Miscellaneous CSS Properties
  • CSS Units of Measurement
  • CSS Terms and Definitions
  • Browser-safe Color Chart
  • Named Colors
  • Grayscale Colors
  • RGB to Hexadecimal Conversion Chart
  • ASCII Character Chart
  • Web Server Error Chart
  • HTML Troubleshooting Chart
  • Glossary

Each chart is as thorough and nicely displayed as this one. I have to tell you, making these charts was one huge amount of work!

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 is confusing, go through the CSS tutorials or buy my book for a step-by-step treatment. Or for some fun, just experiment!

As a member, you'd have access to 30 top quality reference charts like this one, plus a glossary of Internet terms. You can hunt and hunt the web for easier charts to read—and good luck finding them—or you can join our site and have access to all the charts you need in one place.

Back