CSS TEXT
You can set following text properties of an element −
- The color property is used to set the color of a text.
- The direction property is used to set the text direction.
- The letter-spacing property is used to add or subtract space between the letters that make up a word.
- The word-spacing property is used to add or subtract space between the words of a sentence.
- The text-indent property is used to indent the text of a paragraph.
- The text-align property is used to align the text of a document.
- The text-decoration property is used to underline, overline, and strikethrough text.
- The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.
- The white-space property is used to control the flow and formatting of text.
- The text-shadow property is used to set the text shadow around a text.
Example :
<html>
<head>
</head>
<body>
<p style="color:black;">
This text will be written in red.
</p>
</body>
</html>
Output :
This text will be written in black.
Example :
<html>
<head>
</head>
<body>
<p style="letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>
Output :
This text is having space between letters.
Example :
<html>
<head>
</head>
<body>
<p style="word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>
Output :
This text is having space between words.
Example :
<html>
<head>
</head>
<body>
<p style="text-indent:1cm;">
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>
Output :
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.
<html>
<head>
</head>
<body>
<p style="text-indent:1cm;">
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>
Output :
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.
Example :
<html>
<head>
</head>
<body>
<p style="text-decoration:underline;">
This will be underlined
</p>
<p style="text-decoration:line-through;">
This will be striked through.
</p>
<p style="text-decoration:overline;">
This will have a over line.
</p>
<p style="text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>
Output :
This will be underlined
--------------------------
This will have a over line.
This text will have blinking effect
Example :
<html>
<head>
</head>
<body>
<p style="text-transform:capitalize;">
This will be capitalized
</p>
<p style="text-transform:uppercase;">
This will be in uppercase
</p>
<p style="text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>
Output :
This Will Be Capitalized
THIS WILL BE IN UPPERCASE
this will be in lowercase
Example :
<html>
<head>
</head>
<body>
<p style="white-space:pre;">
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>
Output :
This text has a line break and the white-space
pre setting tells the browser to honor it just like the HTML pre tag.
Example :
<html>
<head>
</head>
<body>
<p style="text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property, this text will have a blue shadow.
</p>
</body>
</html>
Output :
If your browser supports the CSS text-shadow property, this text will have a blue shadow.