Quick Links
In this you Learn how to manipulate CSS Text using CSS properties.
1. color: property is used to set the color of a text.
2. direction: property is used to set the text direction.
3. letter-spacing: The letter-spacing property specifies the space between characters in a text.
4. word-spacing: The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit.
5. text-indent: The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text. Property values are length (px, pt, cm, em, etc.), %, and inherit.
6. text-align: The text-align property specifies the horizontal alignment of text in an element.
7. text-decoration: The text-decoration property specifies how the text will be decorated.
8. text-transform: The text-transform CSS property specifies how to capitalize an element’s text. For example, it can be used to make text appear with each word capitalized.
9. white-space: The white-space property specifies how white-space inside an element is handled. The values can be set as normal, inherit, nowrap, etc.
10. text-shadow: The text-shadow property adds shadow to text.
Set the Text Color:
Example:
<html>
<head>
</head>
<body>
<p ><b>style = "color:red;"</b>
This text will be written in red. </p>
</body>
</html> Set the Text Direction :
Example:
<html>
<head>
</head>
<body>
<p <b>style = "direction:rtl;"</b>>
This text will be rendered from right to left
</p>
</body>
</html>
Set the Space between Characters:
Example:
<html>
<head>
</head>
<body>
<p <b>style = "letter-spacing:5px;"</b>>
This text is having space between letters.
</p>
</body>
</html>
Set the Space between Words:
Example:
<html>
<head>
</head>
<body>
<p <b>style = "word-spacing:5px;"</b>>
This text is having space between words.
</p>
</body>
</html>
Set the Text Indent:
Example:
<html>
<head>
</head>
<body>
<p <b>style = "text-indent:1cm;"</b>>
This text will have first line indented by 1cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>
Set the Text Alignment:
Example:
<html>
<head>
</head>
<body>
<p <b>style = "text-align:right;"</b>>
This will be right aligned.
</p>
<p <b>style = "text-align:center;"</b>>
This will be center aligned.
</p>
<p <b>style = "text-align:left;"</b>>
This will be left aligned.
</p>
</body>
</html>
Decorating the Text:
Example:
<html>
<head>
</head>
<body>
<p <b>style = "text-decoration:underline;"</b>>
This will be underlined
</p>
<p <b>style = "text-decoration:line-through;"</b>>
This will be striked through.
</p>
<p <b>style = "text-decoration:overline;"</b>>
This will have a over line.
</p>
<p <b>style = "text-decoration:blink;"</b>>
This text will have blinking effect
</p>
</body>
</html>
Set the Text Cases :
Example:
<html>
<head>
</head>
<body>
<p <b>style = "text-transform:capitalize;"</b>>
This will be capitalized
</p>
<p <b>style = "text-transform:uppercase;"</b>>
This will be in uppercase
</p>
<p <b>style = "text-transform:lowercase;"</b>>
This will be in lowercase
</p>
</body>
</html>
Set the White Space between Text :
Example:
<html>
<head>
</head>
<body>
<p <b>style = "white-space:pre;"</b>>
This text has a line break and the white-space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>
Set the Text Shadow :
Example:
<html>
<head>
</head>
<body>
<p <b>style = "text-shadow:4px 4px 8px blue;"</b>>
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
Recommended Posts: