In this topic we are going to discuss how to add color to a text, how to change the font size, how to change the font-family etc.
The color property is used to set a color for an text.
<!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:
The Text-alignment property is used to set the alignment of an text.
<!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>
The text decoration property is used to decorate the text. There are various attribute of text decoration. These are:
<!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
By using text-transform property we can changed the text to uppercase and lowercase letters.
<!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
By using the indentation property we can indentation of the first line of a paragraph.
<!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
The letter-spacing property is used to specify the space between the characters in a text.
<!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>