CSS Text
The color of the text displayed in the web page is by default black and alignment left. Using css, you can change the style, color, alignment etc .. of the text displayed in the web page to be used for the text in css. The property is as follows -
1. Color
2. text-align
3. text-decoration
4. text-transform
5. text-indent
6. letter-spacing
7. word-spacing
8. line-height
9. text-shadow
1 color
Use the color property to change the color of the text (element) displayed in the web page.To change the color in this property, you can give the color of rgba value, hex value or the name of the color.
Example 1
|
<!DOCTYPE html> <html> <head> <title>Your web page title</title> </head> <body> <h4 style="color: red;"> using color name</h4> <h2 style="color: #FF0004;"> using hex value</h2> <h3 style="color:rgba(255,0,4,1.00);"> using rgba value</h3> </body> </html> |
Output
using color name
using hex value
using rgba value
1.2 Text Background color
To change the background color of a text, we use the background color property.
Example 1.2
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style=" background-color:red;">Paragraph </p> </body> </html> |
Output
Paragraph
2 Text Align
To align a text horizontally in the left, right, center, use the text-align property.
Example 2
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <h1 style="text-align: center;">center</h1> <p style="text-align: left;">Left</p> <p style="text-align: right;">Right</p> </body> </html> |
Output
center
Left
Right
3 text-decoration
Text decoration property is used to decorate text or display it in a webpage different from normal text, use different value in this property.
1 Text – decoration : none
Use the value of none to remove text-decoration.
2 Text – decoration : overline
In a web page, we use the overline value to display horizontal line above a text.
3 text–decoration : line- through
Let's use line-through value to display horizontal line between the text displayed in the web page.
4 text – decoration: underline
Use the underline value to display the underline below the text displayed in the webpage.
Example 3
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="text-decoration: overline;">overline</p> <p style="text-decoration: line-through;"> line-through</p> <p style="text-decoration: underline;">underline</p> </body> </html> |
Output
4 Text Transform
We use the text-transform property to capitalize, uppercase and lowercase a text in a web page.
Example 4
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="text-transform: lowercase;"> LOWERCASE </p> <p style="text-transform: uppercase;">uppercase</p> <p style="text-transform: capitalize;">capitalize</p> </body> </html> |
Output
lowercase
UPPERCASE
Capitalize
5 Text Indent
The web page uses the text indent property to display the paragraph line after giving some space to the first line, its value is given in px, em, pt, etc ..
Example 5
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="text-indent: 50px;"> first paragraph paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph</p> </body> </html> |
Output
first paragraph paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph first paragraph
6 Letter spacing
To increase or decrease the space between the letters of a word appearing in a web page, use the letter-spacing property. Its value is given in px, em, pt etc ..
Example 6
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="letter-spacing: 15pt;">paragraph 1</p> <p style="letter-spacing: -2px;">paragraph 2</p> </body> </html> |
Output
paragraph 1
paragraph 2
7 Word spacing
Paragraph content appearing on the web page uses the word-spacing property to increase or decrease the space between words. Its value is given in px, em, pt etc ..
Example 7
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="word-spacing: 8px;">This is a first paragraph</p> <p style="word-spacing: 0px;">This is a second paragraph</p> </body> </html> |
Output
This is a first paragraph
This is a second paragraph
8 Line height
To increase or decrease the vertical distance between two sentences that appear in a web page, use the line height property in its value, px, cm, pt etc ..
Example 8
|
<!DOCTYPE html> <html> <head><title></title></head> <body> <p style="line-height: 0px;"> This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph </p> <p style="line-height: 50px;"> This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph </p> </body> </html> |
Output
9 text-shadow
Use the shadow property to display the shadow of the text appearing in the web page or to apply the shadow to the text. Its value is given in px, cm, pt etc ..
Example 9
|
<!DOCTYPE html> <html> <body> <h1 style="text-shadow: 2px 2px;">First Heading</h1> <h1 style="text-shadow: 2px 2px red;">Second Heading</h1> </body> </html> |
Output
