CSS Text Styling

CSS Text Color

To set the text color of an element you must use the color property.

selector { color: value (or color name); }

Color is usually indicated in the following ways:

  • an RGB value - like: "rgb(0,0,255)", "rgb(255,0,0)", "rgb(255,255,255)" (used rarely)
  • a color name - like: "blue", "red", "white" (quite often)
  • a HEX value - like: "#0000FF", "#FF0000", "#FFFFFF" (nearly always)

Take a look at color names and HEX values here: Color Codes

Example: changing the text color of the entire page.

body { color: rgb(0,0,255); }
/* or */
body { color: blue; }
/* or */
body { color: #0000FF; }

Example: changing the text color of the paragraph and header.

p { color: #FF7F50; }
h4 { color: #800000; }

This is paragraph. Text color Coral (#FF7F50)

This is header. Text color Maroon (#800000)

CSS Text Decoration

The text-decoration property is used to set or remove decorations from text.

selector { text-decoration: value; }


p { text-decoration: line-through; } 
ol { text-decoration: overline; } 
ul { text-decoration: underline; }
h4 { text-decoration: blink; } /* Not fully supported */

Example: remove underlines from links.

a { text-decoration: none; } 

CSS Text Indent

The indentation of the first line of a text, can be set by the text-indentation property


h1 { text-indent: 35px; }

CSS Text Align

The text-align property is used to set align of a text.

There is four types of align:

  1. Left (default);
  2. Right;
  3. Centered;
  4. Justified;


p { text-align: right; } 
ol { text-align: left; }  /* Default */
ul { text-align: center; }
h4 { text-align: justify; }

CSS Text Transform

The text-transform property can be used to turn text into uppercase, lowercase letters, or capitalize the first letter of each word.


h1 { text-transform: uppercase; }
h2 { text-transform: lowercase; }
h3 { text-transform: capitalize; }

CSS Letter Spacing

To set the spacing between letters, use letter-spacing property


p { letter-spacing: 15px; }

This is paragraph

CSS Word Spacing

To set the spacing between words, use word-spacing property


p { word-spacing: 15px; }

This is paragraph