Hello Devs, 

In this tutorial, we will learn CSS Text

In this section, we will discuss as how to add color to a text, how to change the font size, and how to change the font-family etc.


Text Color Property:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  color: red;
}
 
h1 {
  color: green;
}
</style>
</head>
<body>
 
<h1>Heading</h1>
<p>This example is all about how to add color to a text.</p>
 
</body>
</html>


Text Alignment Property:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
  color: blue;
}
 
h2 {
  text-align: left;
  color: green;
}
 
h3 {
  text-align: right;
  color: orange;
}
</style>
</head>
<body>
 
<h1>Center Heading</h1>
<h2>Left heading</h2>
<h3>Right Heading</h3>
 
<p>The three headings above are aligned center, left and right.</p>
 
</body>
</html>



Text Decoration:

Example

<!DOCTYPE html>
<html>
<head>
<style>
.one{
  text-decoration: overline;
}
 
.two{
  text-decoration: line-through;
}
.three{
  text-decoration: underline;
}
.none{
  text-decoration: none;
}
</style>
</head>
<body>
 
<p class="one">This is paragraph with overline attribute.</h1>
<p class="two">This is paragraph with line-through attribute.</h2>
<p class="three">This is paragraph with underline attribute.</h3>
<p class="three">This is paragraph with none attribute.</h3>
 
</body>
</html>



Text Transformation

Example

<!DOCTYPE html>
<html>
<head>
<style>
.uppercase {
  text-transform: uppercase;
}
 
.lowercase {
  text-transform: lowercase;
}
 
.capitalize {
   text-transform: capitalize;
}
</style>
</head>
<body>
 
<p class="uppercase">This is a uppercase paragraph.</p>
<p class="lowercase">This is a lowercase paragraphp.</p>
<p class="capitalize">This is a capitalize case paragraph.</p>
 
</body>
</html>



Text Indent:

Example

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-indent: 100px;
}
</style>
</head>
<body>
 
<p>Students can be children, teenagers, or adults who are going to school, 
but it may also be other people who are learning, such as in college or university. 
A younger student is often called a pupil. Usually, students will learn from a teacher or a lecturer if at university.
</p>
 
</body>
</html>


Letter Spacing:

Example

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  letter-spacing: 5px;
}
 
h2 {
  letter-spacing: -5px;
}
</style>
</head>
<body>
 
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
 
</body>
</html>


May this example help you.