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; }

CSS Text Decoration

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

selector { text-decoration: value; }

Example:

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

Example:

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;

Example:

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.

Example:

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

Example:

p { letter-spacing: 15px; }

CSS Word Spacing

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

Example:

p { word-spacing: 15px; }

---