With CSS we can style and format text in a variety of ways.
This includes text color, font size,alignment,line-height and other properties.
Text color
The color property specifies the color of the text.
If no color is specified, the element will inherit the parent's text color.
An element with a custom color for text.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="color:teal;">
A paragraph with a text color
</p>
</body>
</html>
Output
Text alignment
The text-align property sets the horizontal text alignment.
Text can be aligned left,right,center or justified.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.text-align {
border: 3px solid lightblue;
padding: 25px;
}
</style>
</head>
<body>
<p class="text-align" style="text-align: left">Left-aligned text</p>
<p class="text-align" style="text-align: center">Centered text</p>
<p class="text-align" style="text-align: right">Right-aligned text</p>
</body>
</html>
Output
Justify text alignment
The justify value for text-align stretches each line to the element's width.
Both left and right margins are perfectly aligned.
Code
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.text-justify {
padding: 20px;
border: 5px solid lightblue;
max-width: 400px;
text-align: justify;
}
</style>
</head>
<body>
<p class="text-justify">
A computer is an electronic device that accepts data from the user, processes it,
produces results, displays them to the users, and stores the results for future usage.
Data is a collection of unorganized facts & figures and does not provide any further
information regarding patterns, context, etc. Hence data means "unstructured facts and figures".
Information is a structured data i.e. organized meaningful and processed data.
To process the data and convert into information, a computer is used.
</p>
</body>
</html>
Output
Text Decoration
The text-decoration property adds a line to text.
The line type can be underline, overline, line-through , and none.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="text-decoration: underline">Underline</p>
<p style="text-decoration: line-through">Line Through</p>
<p style="text-decoration: overline">Overline</p>
</body>
</html>
Output
A none value removes underlines from an HTML element.
This link is rendered without an underline.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p>
A link with no underline: <br />
<a href="https://google.com"
style="text-decoration: none; color: darkslateblue;">Google.com</a>
</p>
</body>
</html>
Output
Text transformation
The text-tranform property specifies the case of the text.
Possible values include uppercase, lowercase or capitalize.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="text-transform: uppercase">
Data means "unstructured facts and figures"
</p>
<p style="text-transform: lowercase">
Data means "unstructured facts and figures"
</p>
<p style="text-transform: capitalize">
Data means "unstructured facts and figures"
</p>
</body>
</html>
Output
Text Indentation
The text-indent property specifies the indentation of the first line of text.
The value can be any valid length value, such as, px, pt, cm, etc.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="text-indent: 30px">
An Operating System acts as a communication bridge (interface) between the user and computer hardware.
The purpose of an operating system is to provide a platform on which a user can execute programs
in a convenient and efficient manner.
</p>
</body>
</html>
Letter Spacing
The letter-spacing property sets the space between the characters in text.
Its value can be positive or negative.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="letter-spacing: 1.5px">
An Operating System acts as a communication bridge (interface) between the user and computer hardware.
The purpose of an operating system is to provide a platform on which a user can execute programs
in a convenient and efficient manner.
</p>
<p style="letter-spacing: -1.5px">
An Operating System acts as a communication bridge (interface) between the user and computer hardware.
The purpose of an operating system is to provide a platform on which a user can execute programs
in a convenient and efficient manner.
</p>
</body>
</html>
Text Shadow
The text-shadow property adds shadow to text.This property accepts up to 4 values: x-offset, y-offset, blur, and color.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="font-size: 20px; text-shadow: 2px 2px #ccc;">
An Operating System acts as a communication bridge (interface) between the user and computer hardware.
The purpose of an operating system is to provide a platform on which a user can execute programs
in a convenient and efficient manner.
</p>
</body>
</html>
Word Spacing
The word-spacing property sets the space between the words in text.Its value can be any valid length value, such as, px, pt, cm, etc.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
</head>
<body>
<p style="word-spacing: 8px">
An Operating System acts as a communication bridge (interface) between the user and computer hardware.
The purpose of an operating system is to provide a platform on which a user can execute programs
in a convenient and efficient manner.
</p>
</body>
</html>
No comments:
Post a Comment