everything you ever wanted to know about the basics of CSS

Chapter 9 : CSS Text Properties

Inherited: Yes


Color

You can set the color of text with the following:

  color: value;

Possible values are

  • color name – example:(red, black…)
  • hexadecimal number – example:(#ff0000, #000000)
  • RGB color code – example:(rgb(255, 0, 0), rgb(0, 0, 0))


Letter Spacing

You can adjust the space between letters in the following manner. Setting the value to 0, prevents the text from justifying. You can use negative values.

  letter-spacing: value;

Possible values are

  • normal
  • length

Example:

These letters are spaced at 5px.


Text Align

You can align text with the following:

  text-align: value;

Possible values are

  • left
  • right
  • center
  • justify

Examples:

This text is aligned left.

This text is aligned in the center.

This text is aligned right.

This text is justified.


Text Decoration

You can decorate text with the following:

  text-decoration: value;

Possible values are

  • none
  • underline
  • overline
  • line through
  • blink

Examples:

This text is underlined.

This text is overlined.

This text has a line through it.


Text Indent

You can indent the first line of text in an (X)HTML element with the following:

  text-indent: value;

Possible values are

  • length
  • percentage

Examples:

This text is indented 10px pixels.


Text Transform

You can control the size of letters in an (X)HTML element with the following:

  text-transform: value;

Possible values are

  • none
  • capitalize
  • lowercase
  • uppercase

Examples:

this first letter in each word is capitalized, though it is not in my file.

this text is all uppercase, though it is all lowercase in my file.

THIS TEXT IS ALL LOWERCASE. THOUGH IT IS ALL UPPERCASE IN MY FILE.


White Space

You can control the whitespace in an (X)HTML element with the following:

  white-space: value;

Possible values are

  • normal
  • pre
  • nowrap


Word Spacing

You can adjust the space between words in the following manner. You can use negative values.

  word-spacing: value;

Possible values are

  • normal
  • length

Example:

These words are spaced at 5px.

Back to top