HOME
TOEFL
IELTS
PHP
CSS

Text

Text Color
The color property is used to set the color of the text. The color can be specified by:

  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • Hex - a hex value, like "#ff0000"
body {color:blue}
h1 {color:#00ff00}
h2 {color:rgb(255,0,0)}

Text Alignment

The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration

The text-decoration property is used to set or remove decorations from text.
a {text-decoration:none}

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

p.uppercase {text-transform:uppercase}
p.lowercase {text-transform:lowercase}
p.capitalize {text-transform:capitalize}

Text Indentation

The text-indentation property is used to specify the indentation of the first line of a text.

p {text-indent:50px}

Font Family

The font family of a text is set with the font-family property.
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:

Example
p{font-family:"Times New Roman",Georgia,Serif}

Font Style
The font-style property is mostly used to specify italic text.
This property has three values:

  • normal - The text is shown normally
  • italic - The text is shown in italics
  • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

Setting the text size with pixels, gives you full control over the text size:

h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}