Most of the web-page content is text and therefore text styling is an important aspect.
CSS styles the text with the following properties:
- color
- text-align
- text-decoration
- text-shadow
- text-transform
- direction
- letter-spacing
- word-spacing
- line-height
- text-indent
color
The text color can be set using the color property using the following three permissible values:
Color-name
RGB Code
Hex
1 2 3 4 5 6 7 8 9 | h1{ color:blue; } .text{ color:#CD975A; } .content{ color:rgb(95, 149, 66); } |
text-align
The horizontal alignment of the text can be done using this property. We can align the text to the left, right or center.
Apart from that, the text-align property can also be set to ‘justify’ wherein, every line will be stretched to maintain an equal width for all lines.
Different values for text align properties are
left | right| center | justify | initial |inherit
1 2 3 4 5 6 7 8 9 10 11 12 | h1 { text-align:center; } .left { text-align:left; } .right { text-align:right } .justify{ text-align:justify; } |
1 2 3 4 5 6 7 8 9 10 | h1 { text-align: center; } .right { text-align: right } .one { color: green; text-align: inherit } |
1 2 3 4 5 6 | h1 { text-align: center; } .one { text-align: initial; } |
text-decoration
This is basically to add or remove decorations from the text. For no decoraction the value is set to ‘none’.
Some other values for decoration are ‘overline’, ‘line-throught’, ‘underline’.
Possible values for test-decoration properties are
none |underline|line-through|overline|inherit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | h1 { text-align: center; text-decoration: underline; } .none { text-decoration: none; } .underline { text-decoration: underline; } .line-through { text-decoration: line-through; } .overline { text-decoration: overline; } |
text-transform
This property has to do with the cases of the letters in the text.
You can transform the text to lowercase, uppercase or capitalize (make the first letter of every word as capital)
different values for text-transform property are
capitalize | uppercase | lowercase | none | inherit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | h1 { text-transform: uppercase; } p.lower { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } p.none { text-transform: none; } |
1 2 3 4 5 6 7 8 9 10 | h1 { text-transform: uppercase; } div.upper { text-transform: uppercase; } p{ text-transform: inherit; } |
text-indent
Text indent is the empty space from stating point in first line. The text indentation can be altered by providing appropriate length value to this property.
values for text-indent are
percentage | length | inherit
1 2 3 4 5 6 7 8 9 10 11 12 | p.one { text-indent: 100px; } p.two { text-indent: 20%; } p.three { text-indent: -3em; } </p> |
letter-spacing
The space between individual characters can be defined with this property.
A positive will mean a well-defined space while a negative value will mean overlapping of characters.
values for letter spacing
normal | length| inherit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | h1 { letter-spacing: 5px; } p.normal { letter-spacing: normal; } p.normal { letter-spacing: normal; } p.one { letter-spacing: 0.5em; } div { letter-spacing: 0.2em; } |
line-height
The individual vertical distance between two lines can be set with this property.
values for line height are
normal | number | length | percentage
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | h1 { line-height: 50px; } p.normal { line-height: normal; } p.number { line-height: 2; } p.length { line-height: 3em; } p.percentage { line-height: 140%; } div#un { line-height: 3; } |
Direction
The text direction is also an important factor in styling. Basically, your text will proceed in left to right (ltr) or right to left (rtl).
The default value is ltr. Also, in case of ltr, the default text aligment is left and vice-versa.
values for text directions are
ltr | rtl | inherit
1 2 3 4 5 6 7 8 9 10 11 | .ltr { direction: ltr; } .rtr { direction: rtl; } div { direction: rtl; } |
word-spacing
This is for the horizontal spacing among the words. Just like letter-spacing property, the value here too can be positive or negative.
values for word-spacing property is
normal |length | inherit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | h1 { word-spacing: 20px; } .one { word-spacing: 30px; } .two { word-spacing: normal; } .three { word-spacing: 10vw; div { word-spacing: 1rem; } |
text-shadow
It gives a shadow effect to the text.
The value is given as
horizontal-shadow | vertical-shadow | blur-radious | shadow color
1 2 3 4 5 6 7 8 9 | h1 { text-shadow: 0px 5px 10px #4fc957; } p { font-size: 50px; font-weight: bold; text-shadow: 0px 5px 10px #4fc957; } |