Home » Blog » CSS » Learn About Text Styling in CSS
CSS Text Styling
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.
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.
CSS Text Direction:
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:
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>
CSS Text Line Height:
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>
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>
CSS Text Decoration
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>
CSS Text Indent:
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>
CSS Text Transform:
text-transform is used to convert text in lowercase or uppercase letters. There are three types of text-transform.
Uppercase – will turn all text into uppercase letters.
Lowercase – will convert all text to lowercase.
Capitalize – The first letter of all words in the text will be Capitalize.
For example, paste the following code into an HTML file and then look in the browser:
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>
Conclusion
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…
