Text Styling: There on Many texts and images are the website, isn’t it? The more beautiful the text, the more beautiful the website. To give CSS we have given below all the features / rules of the text. There is no problem if not understanding anything by reading, everything will be easily understood when we look at the example.
| Property | Description |
| color | Used to give color to writing. |
| direction | We write English and Bengali from left to right, some countries have to write like Arabic from right to left. This will be from right to left or from left to right so the direction is set with CSS rule. |
| letter-spacing | This property is used to set the distance from one letter to another. |
| line-height | The height of a line is set by that. |
| text-align | How to format / align the text, right or left or center is set. |
| text-decoration | Used to give a line in the middle of a writing or above or in the middle. |
| text-indent | In newspapers we often see that there is a little gap before the word in the first line. Such a gap is given in the HTML file with text-indent. |
| text-transform | Used to change text in lowercase or uppercase letters. |
| word-spacing | Used to give space between each word in the text. |
In addition to these, there are some other properties of CSS text styling.
Recommended: Learn About CSS Background Properties
In the meantime, we’ve seen the text-color change . Let’s see again
p{
color:red;
}
Which will change the text of all the ‘P’ tags to red. Instead of the name of the color, the color code can also be given.
We write English and others from left to right, some countries have to write like Arabic from right to left. This will be from right to left or from left to right so the direction is set with CSS rule. Left-to-right is set by default. The way we write. If you create a web site for a country that writes from right to left, you need to set it right-to-left. And it sets:
body{
direction:rtl;
}
rtl means right-to-left;
Recommended: CSS Shorthand Properties- Useful CSS Shorthand
letter-spacing: This property is used to set the distance from one letter to another.
body{
letter-spacing:5px;
}
The more pixels I give, the more space there will be between the two characters. Again if letter-spacing: -5px; Di, then one color will fall on another color.
For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
p {letter-spacing:5px;}
h1 {letter-spacing:-3px;}
</style>
</head>
<body>.
<h1>This is a heading </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>
The line-height is set to the height of a line. For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
</p>
<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>
</body>
</html>
Recommended: Download free HTML CSS Templates with source code for practice
How the text-align texts are set / aligned is set to right or left or center. Three types can be aligned, center, left & right. Normally all the text is left aligned. For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
.center{text-align:center}
.left {text-align:left}
.right {text-align:right}
</style>
</head>
<body>
<h1 class="center">This is centered text</h1>
<h1 class="left">This is left aligned text</h1>
<h1 class="right">This is right aligned text</h1>
</body>
</html>
Used to take a text with text-decoration or to give a line above or in the middle. Three types of text-decoration can be done, underline, overline and line-through. For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
#underline {text-decoration:underline;}
#overline {text-decoration:overline;}
#line_through{text-decoration:line-through;}
</style>
</head>
<body>
<h1 id="underline">a text with underline</h1>
<h1 id="overline">a text with overline </h1>
<h1 id="line_through">a text with line-through with it</h1>
</body>
</html>
In text-indent magazines we often see that there is a little gap before the word in the first line. Such a gift is given in the HTML file with text-indent. For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</body>
</html>
text-transform is used to convert text in lowercase or uppercase letters. There are three types of text-transform.
For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">uppercase transformed text.</p>
<p class="lowercase">Lowercase Transformed Text</p>
<p class="capitalize">capitalize transformed text</p>
</body>
</html>
Word-spacing is used to give a gap between each word in the text. For example, paste the following code into an HTML file and then look in the browser:
<!DOCTYPE html>
<html>
<head>
<style>
p
{
word-spacing:30px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
</body>
</html>
Today I think I have written a lot. Isn’t it? CSS Text Styling have many more properties, you can learn them slowly. Another day I will write about other styles. Good luck to everyone.
Find it helpful? Please share with your friends and Read my others article about coding and programming, Tips, Productivity , Resources etc…
Discuss a project or just want to say hi? My Inbox is open for all.
