HTML text can be styled using CSS. Text formatting properties are used for this purpose.
Text Color
The color property is used to color the HTML text. In CSS, color options can be given by three different ways:
- HEX value - #000000
- RGB value - rgb(0,0,0)
- Color name - Black
For example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.color {color:red;}
p.color {color:blue;}
</style>
</head>
<body>
<h1 class="color">This is a Heading</h1>
<p class="color">This is a paragraph</p>
</body>
</html>
Direction
The direction property is used to denote the text direction or the direction in which the text is written.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.dir {direction:rtl;}
</style>
</head>
<body>
<p>This paragraph is in default direction.</p>
<p class="dir">This paragraph is from right to left.</p>
</body>
</html>
Letter Spacing
The letter-spacing property is used to increase or decrease the space between the characters in a text.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.letter_space {letter-spacing:3px;}
h2.letter_space {letter-spacing:-3px}
</style>
</head>
<body>
<h1 class="letter_space">This is a Heading</h1>
<h2 class="letter_space">This is a Heading</h2>
</body>
</html>
Line Height
The line-height property is used to specify the height of each line.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {line-height:50%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p class="small">This is a paragraph
This is a paragraph
This is a paragraph</p>
<p class="big">This is a paragraph
This is a paragraph
This is a paragraph</p>
</body>
</html>
Text Align
The text-align property is used to horizontally align the text.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.align {text-align:left;}
h2.align {text-align:center;}
h3.align {text-align:right;}
</style>
</head>
<body>
<h1 class="align">This is a Heading</h1>
<h2 class="align">This is a Heading</h2>
<h3 class="align">This is a Heading</h3>
</body>
</html>
Text Decoration
The text-decoration property is used to specify the decoration added to the element.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.decoration {text-decoration:overline;}
h2.decoration {text-decoration:line-through;}
h3.decoration {text-decoration:underline;}
</style>
</head>
<body>
<h11 class="decoration">This is a Heading</h1>
<h21 class="decoration">This is a Heading</h2>
<h31 class="decoration">This is a Heading</h3>
</body>
</html>
Text Indent
The text-indent property is used to specify the indentation of the first line of the text.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.indent {text-indent:50px;}
</style>
</head>
<body>
<p class="indent">CSS is used to control the style and layout of multiple
web pages. It defines how to style HTML elements. An HTML element can be
displayed with different styles using CSS.</p>
</body>
</html>
Text Shadow
The text-shadow property is used to add shadow to text element.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
h1.shadow {text-shadow:5px 5px #ffffff;}
</style>
</head>
<body>
<h1 class="shadow">This Heading have Shadow</h1>
</body>
</html>
Text Transform
The text-property is used to specify the capitalization of the text element.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is a Paragraph</p>
<p class="lowercase">This is a Paragraph</p>
<p class="capitalize">This is a Paragraph</p>
</body>
</html>
Unicode Bi-Directional Text
The unicode-bidi property is used along with the direction property to set whether the text should be overridden to support multiple languages.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.dir_bidi {direction:rtl;
unicode-bidi:bidi-override;}
</style>
</head>
<body>
<p>This paragraph is in default direction.</p>
<p class="dir_bidi">This paragraph is from right to left.</p>
</body>
</html>
Vertical Align
The vertical-align property is used to set the vertical align of a text element.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
img.top {vertical-align:top;}
img.bottom {vertical-align:botoom;}
</style>
</head>
<body>
<p>This <img class="top" src="Birds.jpg" />paragraph is at the top of the
image.</p>
<p>This <img class="bottom" src="Birds.jpg" />paragraph is at the bottom
of the image.</p>
</body>
</html>
White Space
The white-space property is used to specify how to handle white spaces inside an HTML document.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.white_space {white-space:nowrap}
</style>
</head>
<body>
<p class="white_space">This is a paragraph. This is another paragraph. This
is yet another paragraph and so the number of paragraphs continues.</p>
</body>
</html>
Word Spacing
The word-spacing property is used to increase or decrease the white space between words.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
p.word_space {word-spacing:20px}
</style>
</head>
<body>
<p class="word_space">This is a paragraph.</p>
</body>
</html>
