CSS – Text
CSS – Text
In HTML, texts are manipulated and decorated by CSS properties. The text properties are available in CSS are as follows,
Color: this property is used for setting color of a text.
Direction: this property is used for setting text direction.
Letter-spacing: it determines the space between the letters of a word.
Word-spacing: it determines the space between the words of a sentence.
Text-indent: it determines to indent the text of a paragraph.
Text-align: it determines to align the text of a document.
Text-decoration: it determines to overlie, underline or strikethrough of the text.
Text-transform: it determines to capitalize or convert (lower to upper or vice versa) of a text.
White-space: it determines to format of the text.
Text-shadow: it determines to set a shadow around the text.
Example:
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text is testing for text-color.
</p>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
<p style = "letter-spacing:2 px;">
This text is having space between letters with 2px.
</p>
<p style = "word-spacing:5px;">
This text is having space between words with 5px.
</p>
<p style = "text-indent:2cm;">
This text will have first line indented by 2cm and this line will remain at
its actual position this is done by CSS text-indent property.
</p>
<p style = "text-align:right;">
This will be right aligned.
</p>
<p style = "text-align:center;">
This will be center aligned.
</p>
<p style = "text-align:left;">
This will be left aligned.
</p>
<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>
<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>
<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>
<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:
Quiz :Quiz 1: What is the different text properties used in CSS?
Quiz 2: Give an example of text-shadow property in CSS.
