text-align
Left Aligned Text
Center Aligned Text
Right Aligned Text
.text{
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
}
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
}
text-transform
capitalize every word
UPPERCASE TEXT
lowercase text
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: lowercase;
text-transform: capitalize;
text-decoration
Line-through Text
Underline Text
Overline Text
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: overline;
text-decoration: line-through;
text-shadow
Soft Shadow Example
Strong Shadow Example
/* Soft */
text-shadow: 2px 2px 3px gray;
/* Strong */
text-shadow: 4px 4px 5px red;
text-shadow: 2px 2px 3px gray;
/* Strong */
text-shadow: 4px 4px 5px red;
font-weight
Bold
Ultra Bold (900)
Thin (100)
font-weight: normal; (400)
font-weight: bold; (700)
font-weight: 100; (Thin)
font-weight: 900; (Black)
font-weight: bold; (700)
font-weight: 100; (Thin)
font-weight: 900; (Black)
text-orientation
UPRIGHT
writing-mode: vertical-rl;
text-orientation: upright;
text-orientation: sideways;
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways;
text-orientation: mixed;
color
Names
Hex & RGB Colors
RGBA Color
color: red;
color: #1976d2;
color: rgb(255, 0, 0);
color: rgba(255,0,0,0.5);
color: hsl(120, 100%, 50%);
color: #1976d2;
color: rgb(255, 0, 0);
color: rgba(255,0,0,0.5);
color: hsl(120, 100%, 50%);
font-size
16px Size
1.5em Size
120% Size
font-size: 16px;
font-size: 1.5em;
font-size: 120%;
font-size: 1.5em;
font-size: 120%;
font-family
Arial
Times New Roman
Courier New
font-family: Arial, sans-serif;
font-family: 'Times New Roman';
font-family: 'Courier New', mono;
font-family: 'Times New Roman';
font-family: 'Courier New', mono;
letter-spacing
Normal
Wide Spacing
Tight Spacing
letter-spacing: normal;
letter-spacing: 4px;
letter-spacing: -1px;
letter-spacing: 4px;
letter-spacing: -1px;
line-height
Line 1
Line 2
Line 2
line-height: normal;
line-height: 2.5;
line-height: 50px;
line-height: 2.5;
line-height: 50px;
direction
Text Right-to-Left
Text Left-to-Right
direction: ltr;
direction: rtl;
direction: rtl;