Let's discuss what CSS text properties?
We are going to see one of the style sheet properties called "Text Property".It's consists of Eight different Text properties. So, guys, let's see all text properties in detail with their example.
- Text decoration
- Text transform
-Text-direction
- Line spacing
- Word spacing
-Text alignment
-Line-height
<html>
<head>
<title>CSS text properties</title>
<style type="text/css">
h2.one{text-decoration:line-through;}
h2.two{text-decoration:overline;}
h2.three{text-decoration:underline;}
</style>
</head>
<body>
<h2 class="one">Online Help</h1><p>[This is line through]</p><br>
<h2 class="two">welcome to my blog</h1><p>[This is over line]</p><br>
<h2 class="three">online help</h1><p>[This is underline]</p><br>
</body>
</html>
READ: How to add background image in HTML
h1{text-transform:lowercase;}
td{text-transform:capitalize;}
READ: CSS font properties
h2{letter-spacing: 1px;}
here, we are discussing word spacing.
The word-spacing property is used to increases or decreases the white space between words. So that we can specify the value for this property in terms of px,pc, in, mm.
p{text-align:right;}
td{text-align:justify;}
p.big{line-height:200%;}
I hope you guys understand what is CSS text properties. If you have any doubts or something incorrect or you wanna give more information about this topic then please comment below.
READ: CSS list properties
We are going to see one of the style sheet properties called "Text Property".It's consists of Eight different Text properties. So, guys, let's see all text properties in detail with their example.
CSS text properties:
The text displayed on the web page is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties and the paragraph is also indented, aligned, and the space between characters is specified. So some of the text formatting properties are as follow:- Text decoration
- Text transform
-Text-direction
- Line spacing
- Word spacing
-Text alignment
-Line-height
1.Text decoration:
Now, what is text-decoration? The text-decoration property is used to set or remove decorations from the text. so the possible value for this property is none, overline,line-through, underline and blink. Sample program for text-decoration:<html>
<head>
<title>CSS text properties</title>
<style type="text/css">
h2.one{text-decoration:line-through;}
h2.two{text-decoration:overline;}
h2.three{text-decoration:underline;}
</style>
</head>
<body>
<h2 class="one">Online Help</h1><p>[This is line through]</p><br>
<h2 class="two">welcome to my blog</h1><p>[This is over line]</p><br>
<h2 class="three">online help</h1><p>[This is underline]</p><br>
</body>
</html>
READ: How to add background image in HTML
2.Text Transform:
The text-transform property is used to specify either uppercase or lowercase letters in a text. So that we are able to specify our text easily. This property can be used to turn everything into uppercase or lowercase letters or capitalize the first letter of each word.
Example:
p{text-transform:uppercase;}h1{text-transform:lowercase;}
td{text-transform:capitalize;}
3.Text-Indent:
The text-indent property is used to specify the indentation of the first line of a text within an element. so the value for this property is in terms of px,pc, in, mm.
Example:
p{text-indent : 50px;}READ: CSS font properties
4.Text Direction:
The direction property specifies the direction in which the text should flow. Then, the possible values are ltr(left to right), rtl(right to left)
Example:
p{direction : rtl;}5.Letter-Spacing:
The letter-spacing property increases or decreases the space between characters in a text within the element. The value for this property is in terms of px,pc, in, mm.
Example:
p{letter-spacing : 2px;}h2{letter-spacing: 1px;}
6.Word-Spacing:
here, we are discussing word spacing.The word-spacing property is used to increases or decreases the white space between words. So that we can specify the value for this property in terms of px,pc, in, mm.
Example:
p{word-spacing: 30px;}7.Text Alignment:
The text-align property is used to set the horizontal alignment of a text. because of this text alignment, Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, ad the left and right margins are straight.
Example:
h1{text-align:center;}p{text-align:right;}
td{text-align:justify;}
8.Line-height:
The line-height property is used to specify the gap between lines in the text. So that the lines should be separated equally. This can be done by specifying the line height in terms of px,pc, in, mm, and percentages.
Example:
p.small{line-height:90%;}p.big{line-height:200%;}
I hope you guys understand what is CSS text properties. If you have any doubts or something incorrect or you wanna give more information about this topic then please comment below.
READ: CSS list properties