CSS works great on text elements. That may be a heading, a paragraph or a text link. CSS works same for all these elements. Following are the properties used for styling text:
Property | Value | Description |
---|---|---|
Color | blue; | Colors the text |
font-family | "Times New Roman", Times, serif; | Set of fonts to be used by the browser |
font-style | normal; / italic; | To stylize the text |
font-size | 40px; | To set a size of the text |
font-size | 10vw; | Responsive size of the text |
font-weight | normal; / bold; | To make text bolder |
text-align | center; / left; / right; / justify; | To align the text |
text-transform | capitalize; | To convert entire text in Sentence case |
lowercase; | To convert entire text in lower case | |
uppercase; | To convert entire text in UPPER CASE | |
text-indent | 50px; | To set the indent |
letter-spacing | 3px; | To set space between letters |
line-height | 0.8; | To set space between lines |
word-spacing | 10px; | To set space between words |
text-shadow | 3px 2px red; | To set shadow behind text |
background-color | Red; / #ff0000; / rgb(255,0,0); | Colors the background |
background-image | url("paper.gif"); | Puts a background image |
Example 1: color, font-family, font-style, font-size & font-weight
Example 2: text-align, text-indent, line-height, text-transform, text-shadow, letter-spacing & word-spacing
Example 3: background-color & background-image