Tutorial 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.
This text is blinking (not in internet explorer).

---

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

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.