CSS Cheat Sheet: Text

CSS Text includes font-family, font-size, font-weight, font-style, font-variant, text-decoration, text-transform, text-spacing, text-indent, text-shadow…

Font Family————————

• font-family: arial, helvetica, serif, georgia;
• font-family: “Times New Roman”

Font Size————————–
font-size:
Example: use for p | body | h1 | h2 | h3 | h4 | h5 | h6

• p { font-size: 2.5em; }

Font Weight———————-
font-weight: {normal | bold | bolder | lighter | 100 | 200 | 300 | 400 (same as normal) | 500 | 600 | 700 (same as bold) | 800 | 900}
Example:

Font Style————————
font-style: {italic | normal}
Example:

• strong { font-style: italic; }

Font Variant————————
font-variant: {normal | small-caps | inherit };
Example:

• p { font-variant: small-caps; }

Text Decoration—————–
text-decoration: {underline | overline | line-through | none | blink | inherit}
Example:

• a { text-decoration: none; }
• a:link {text-decoration: none;}
• a:visited {text-decoration: line-through;}
• a:hover {text-decoration: underline overline;}
• a:focus {text-decoration: underline overline;}

Text Transform—————–
text-transform: capitalize | uppercase | lowercase | none
Example.: can use for strong | div | p

• div { text-transform: capitalize; }

Text Spacing——————-
text spacing: letter-spacing, word-spacing, line-height, text-align
Example: can use for p | div |

• div { letter-spacing: 0.2em; word-spacing: 1em; line-height: 0.5; text-align: center;}

Text Indent————————
text-indent: { length | percentage | inherit } ;
Example:

• p { text-indent: 2.5em; }
• p: first-child { text-indent: 2.5em; }

Text Shadow————————
text-shadow: { shadow | none | inherit } ;
text-shadow: X-coordinate Y-coordinate blur radius Shadow Color
Example:

• .subtitle { text-shadow: 5px 5px 5px #fafafa; }
• p { text-shadow: 1px 3px 2px #fafafa; }
• p { text-shadow: 1px 3px 2px #fafafa, 3px 2px 1px green;  }
• p { text-shadow: 5px 1px 2px #fafafa, 3px 2px 1px green, 1px 2px 1px red; }