CSS
In this tutorial we will learn about CSS Text styling property.
We use the color property to set the color of the text. This can take value in color-name, hex, rgb, rgba.
color
Click here for CSS Color tutorial.
In the following example we have set the color of the text to red.
p { color : red; }
This is a sample paragraph.
We use the background-color property to set the background color for the text.
background-color
In the following example we have set the background color lightyellow.
p { background-color : lightyellow; }
We use the line-height property to set the spacing between the lines.
line-height
In the following example we have set the line-height to 16px and font-size to 14px;
p { font-size : 14px; line-height : 16px; }
This is another line.
We use the text-decoration property to decorate the text. Values that we can use are none, underline, overline and line-through.
text-decoration
none
underline
overline
line-through
In the following example we have set the text-decoration to underline.
p { text-decoration : underline; }
In the following example we have set the text-decoration to overline.
p { text-decoration : overline; }
In the following example we have set the text-decoration to line-through.
p { text-decoration : line-through; }
We use the text-align property to align the text horizontally. Some of the values that we can set are left, center and right.
text-align
left
center
right
In the following example we have set the text-align to right.
p { text-align : right; }
In the following example we have set the text-align to center.
p { text-align : center; }
We use the letter-spacing property to set the space between characters.
letter-spacing
In print, the space between characters is referred as kerning.
In the following example we have set the letter-spacing to 5px.
p { letter-spacing : 5px; }
We use the text-transform property to transform the case of the text.
text-transform
Following are the values that we can set.
In the following example we have set the text-transform to uppercase.
p { text-transform : uppercase; }
We use the text-indent property to specify the indentation for the first line of text.
text-indent
In the following example we have set the text-indent to 30px;
p { text-indent : 30px; }
We are discussing the text-indent property. We use it to indent the first line of text. In this example we have set the text-indent to 30px. So, when this paragraph is displayed, the first line is indented 30px to the right and then rest of the lines is displayed normally (without any indentation).
We use the word-spacing to set the space between words.
word-spacing
In the following example we have set the word-spacing to 10px;
p { word-spacing : 10px; }