In this tutorial, we will cover some of the important text styling properties:
The text-decoration property adds various types of text decorations.
Syntex
<style>
selector {
text-decoration: value;
}
</style>There are four values for text-decoration:
Example:
<html lang="en">
<head>
<style>
#p1 {text-decoration: overline}
#p2 {text-decoration: underline}
#p3 {text-decoration: line-through}
#p4 {text-decoration: none}
</style>
</head>
<body>
<p id="p1">Text-decoration: overline </p>
<p id="p2">Text-decoration: underline</p>
<p id="p3">Text-decoration: line-through</p>
<p id="p4">Text-decoration: none</p>
</body>
</html>Output
syntex
<style>
selector{
text-align: value;
}
</style>Example:
<html lang="en">
<head>
<style>
#p1 {text-align: left}
#p2 {text-align: right}
#p3 {text-align: end}
#p4 {text-align: justify}
</style>
</head>
<body>
<p id="p1">Text-align: left</p>
<p id="p2">Text-align: right</p>
<p id="p3">Text-align: end</p>
<p id="p4">Text-align: justify</p>
</body>
</html>Output
syntex
<style>
selector{
text-transform: value;
}
</style>Example:
<html lang="en">
<head>
<style>
#p1 {text-transform: uppercase}
#p2 {text-transform: lowercase}
#p3 {text-transform: capitalise}
#p4 {text-transform: none}
</style>
</head>
<body>
<p id="p1">Text-transform: uppercase</p>
<p id="p2">Text-transform: lowercase</p>
<p id="p3">Text-transform: capitalise</p>
<p id="p4">Text-transform: none</p>
</body>
</html>Output
The letter-spacing property allows to specify the spacing between each character in the text. The property values can be in pixels (px), em, rem, percentage (%), etc.
Example:
<html lang="en">
<head>
<style>
h1{
letter-spacing:8px;
}
</style>
</head>
<body>
<h1>CodeWithRahulGoswmai</h1>
</body>
</html>The value of 3.5 means that the space between lines will be 3.5 times the height of the font size.
Output
The line-height property controls the spacing between the two lines of text.
Example:
<html lang="en">
<head>
<style>
h1{
letter-height:5px;
}
</style>
</head>
<body>
<h1>CodeWithRahulGoswmai</h1>
<h1>Learn Programming Online</h1>
</body>
</html>Output
Syntex:
<style>
selector{
text-shadow: Horizontal offset, vertical offset, blur radius, color;
}
</style>Example:
<html lang="en">
<head>
<style>
h1{
text-shadow: 2px 3px 4px red;
}
</style>
</head>
<body>
<h1>CodeWithRahul</h1>
</body>
</html>Output
