1) Text Color
This property can be used to change the color of the text. It can be defined by using color property.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h3{font-family: 'Times New Roman', Times, serif;}
p{font-family:'Courier New', Courier, monospace;}
</style>
</head>
<body>
<h3>Yasham Acadamy</h3>
<p>Welcome to Yasham Acadamy</p>
<p >Educational Institute</p>
</body>
</html>2) Text Alignment
This property can be used to change the horizontal of the text. It can be defined by using left, right, center, justify properties.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h2{text-align: left;}
h3{text-align: center;}
h1{text-align: right;}
</style>
</head>
<body>
<h2>Educational Institute</h2>
<h3>Welcome to Yasham Acadamy</h3>
<h1>Yasham Acadamy</h1>
</body>
</html>3) Text Decoration
This property can be used to decorate the text. It can be defined by using underline, overline, line-through properties.
<!DOCTYPE html>
<html lang="en">
<body>
<p style="text-decoration: underline;">Welcome to Yasham Acadamy</p>
<p style="text-decoration: line-through;">Yasham Acadamy</p>
<p style="text-decoration: overline;">Educational Institute</p>
</body>
</html>4) Text Transformation
This property can be used to change cases of the text. It can be defined by using capitalize, uppercase, lowercase properties.
<!DOCTYPE html>
<html lang="en">
<body>
<p style="text-transform: capitalize;">Welcome to Yasham Acadamy</p>
<p style="text-transform: lowercase;">Yasham Acadamy</p>
<p style="text-transform: uppercase;">Educational Institute</p>
</body>
</html>
5) Text Indentation
This property can be used to indent the first line of the text. It can be defined by using px, cm, pt properties.
<!DOCTYPE html>
<html lang="en">
<body>
<p style="text-indent: 20px;">Welcome to Yasham Acadamy</p>
<p style="text-indent: 5cm;">Yasham Acadamy</p>
<p style="text-indent: 30pt;">Educational Institute</p>
</body>
</html>6) Word Spacing
This property can be used to give space between words. It can be defined by using the word-spacing property.
<!DOCTYPE html>
<html lang="en">
<body>
<p style="word-spacing: 5px;">Welcome to Yasham Acadamy</p>
<p style="word-spacing: 20px;">Yasham Acadamy</p>
<p style="word-spacing: 30px;">Educational Institute</p>
</body>
</html>7) Letter Spacing
This property can be used to give space between characters. It can be defined by using the letter-spacing property.
<!DOCTYPE html> <html lang="en"> <body> <p style="letter-spacing: 20px;">Educational Institute</p> <p style="letter-spacing: 4px;">Educational Institute</p> <p style="letter-spacing: 15px;">Educational Institute</p> </body> </html>
8) Line Height
This property can be used to give space between the lines. It can be defined by using line-height property.
<!DOCTYPE html>
<html lang="en">
<body>
<p style="line-height: 20px;">Welcome to Yasham Acadamy</p>
<p style="line-height: 2.8px;">Yasham Acadamy</p>
<p style="line-height: 50%;">Educational Institute</p>
</body>
</html>
9) Text-direction
This property can be used to change the direction of the text. It can be defined by using rtl property. It sets direction from right to left.
<!DOCTYPE html>
<html lang="en">
<body>
<p style="direction: ltr;">Welcome to Yasham Acadamy</p>
<p style="direction: rtl;">Yasham Acadamy</p>
</body>
</html>10) Text-shadow
This property can be used to give shadow for the text. It can be defined by using the text-shadow property. It uses components such as left position, the top position, size of the blur, color name.
<!DOCTYPE html>
<html lang="en">
<style>
h3{text-shadow: 4px 4px 4px blue;}
h2{text-shadow: 2px 2px 2px red;}
</style>
<body>
<h2>Welcome to Yasham Acadamy</h2>
<h3>Yasham Acadamy</h3>
</body>
</html>
