CSS Text : Styling
Text Formatting Selectors in CSS :
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the direction of writing |
| letter-spacing | Specifies the space between characters in a text |
| line-height | Specifies the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Specifies the space between words in a text |
Property 1 : Color
<html> <head> <style> h1 { color:#ff0000; } </style> </head> <body> <h1>This is heading 1</h1> <body> </html>
Explanation :
- color property is used to specify the color of the text in CSS.
- color property can be used in many ways -
body {
color: blue;
}
h1 {
color: #00ff00;
}
h2 {
color:rgb(255,0,0);
}
- We can specify color by direct name,using hex value or by specifying the color composition.
Property 2 : Text Alignment
h1 {
text-align: center;
}
h1 {
text-align: right;
}
h1 {
text-align: justify;
}
We can set alignment of the text in CSS using text-alignment property. CSS text alignment can have different values -
- Centered
- Aligned to left
- Aligned to right
- Justified
Property 3 : Text Decoration
h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } h4 { text-decoration: blink; }
We can decorate text using this property. We can show underline to particular text or we can hide decoration using this property.