Learn about Text Styling in CSS

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.

PropertyDescription
colorUsed to give color to writing.
directionWe 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-spacingThis property is used to set the distance from one letter to another.
line-heightThe height of a line is set by that.
text-alignHow to format / align the text, right or left or center is set.
text-decorationUsed to give a line in the middle of a writing or above or in the middle.
text-indentIn 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-transformUsed to change text in lowercase or uppercase letters.
word-spacingUsed 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

CSS Text Color:

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:

body{
 
direction:rtl;
 
}

rtl means right-to-left;

Recommended: CSS Shorthand Properties- Useful CSS Shorthand

CSS Letter Spacing:

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>

Recommended: Download free HTML CSS Templates with source code for practice

CSS Text Align

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.

  1. Uppercase – will turn all text into uppercase letters.
  2. Lowercase – will convert all text to lowercase.
  3. 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:

<!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>

CSS Text Word Spacing: 

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…

Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Next

Download Free Graphics Design Software: Learning graphic design can be considered as a great career at the present time. However, in order...
Continue Reading
Today we are going to discuss what is the difference between primitive and reference type data in JavaScript and how these data types...
Continue Reading
What is a firewall and how does it works? Why is firewall used and what are its types? Importance of it on your... (discuss in details).
Continue Reading

Reach Out to me!

Discuss a project or just want to say hi? My Inbox is open for all.

"Client satisfaction is the key to me.Always try to provide the best possible services to my clients in every steps."

Narayanganj , Bangladesh
Open for opportunities: Yes!