Introduction to CSS Text Formatting

Introduction to CSS Text Formatting

Text Formatting. CSS text formatting properties is used to format text and style text. Text-color property is used to set the color of the text.

In previous days, you were constrained to represent the text by using the old version of CSS. You had <font> tag to change the shading and typeface of the content, however measuring was obstructed by utilizing the pre-characterized text dimensions. The various impacts like intensity and strike-through were conceivable in just fundamental structures with the help of HTML labels. Presently, the user can use a variety of CSS text formatting properties to arrange the text on the web pages in his ways.

In this chapter, you are going to see numerous CSS text formatting properties. CSS text formatting properties are utilized to design the text, style the text, describe a couple of formatting styles, etc. The properties provide you the visual representation of the characters, spaces, words, paragraphs and many more.

Details of Text formatting ways in CSS:-

1. Text Color

This property can be used to change the color of the text. It can be defined by using color property.

Example: Illustration of text color

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Color Property</title>
</head>
<body>
<p style=”color: crimson;”>Hello world….</p>
<p style=”color: royalblue;”>Welcomw to EDUCBA…</p>
</body>
</html>

It will display the following output:

2. Text Alignment

This property can be used to change the horizontal of the text. It can be defined by using left, right, center, justify properties.

Example: Illustration of text alignment

<! DOCTYPE html>
<html>
<head>
<title>Text Alignment Property</title>
</head>
<body>
<p style="text-align:left;">Hello World...</p>
<p style="text-align:center;">Welcome to EDUCBA...</p>
<p style="text-align:right;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

3. Text Decoration

This property can be used to decorate the text. It can be defined by using underline, overline, line-through properties.

Example: Illustration of text-decoration

<!DOCTYPE html>
<html>
<head>
<title>Text DecorationProperty</title>
</head>
<body>
<p style="text-decoration:line-through;">Hello World...</p>
<p style="text-decoration:underline;">Welcome to EDUCBA...</p>
<p style="text-decoration:overline;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

4. Text Transformation

This property can be used to change cases of the text. It can be defined by using capitalize, uppercase, lowercase properties.

Example: Illustration of text transformation

<!DOCTYPE html>
<html>
<head>
<title>Text Transformation Property</title>
</head>
<body>
<p style="text-transform: capitalize;">hello world...</p>
<p style="text-transform: uppercase;">Welcome to educba...</p>
<p style="text-transform: lowercase;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

5. Text Indentation

This property can be used to indent the first line of the text. It can be defined by using px, cm, pt properties.

Example: Illustration of text indentation

<!DOCTYPE html>
<html>
<head>
<title>Text Indentation Property</title>
</head>
<body>
<p style="text-indent:20px;">Hello World...</p>
<p style="text-indent:5cm;">Welcome to Educba...</p>
<p style="text-indent:30pt;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

6. Word Spacing

This property can be used to give space between words. It can be defined by using the word-spacing property.

Example: Illustration of word spacing

<!DOCTYPE html>
<html>
<head>
<title>Word Spacing Property</title>
</head>
<body>
<p style="word-spacing:5px;">Hello World...</p>
<p style="word-spacing:10px;">Welcome to Educba...</p>
<p style="word-spacing:20px;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

7. Letter Spacing

This property can be used to give space between characters. It can be defined by using the letter-spacing property.

Example: Illustration of letter spacing

<!DOCTYPE html>
<html>
<head>
<title>Letter Spacing Property</title>
</head>
<body>
<p style="letter-spacing:5px;">Hello World...</p>
<p style="letter-spacing:10px;">Welcome to Educba...</p>
<p style="letter-spacing:15px;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

8. Line Height

This property can be used to give space between the lines. It can be defined by using line-height property.

Example: Illustration of line-height

<!DOCTYPE html>
<html>
<head>
<title>Line Height Property</title>
<style>
h3
{
line-height:2.5;
}
h4
{
line-height:150%;
}
</style>
</head>
<body>
<h3>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a  <br> leading global provider of skill based education
</h3>
<h4>
At eduCBA, it is a matter of pride to us to make job oriented<br> hands on courses available to anyone, anytime and anywhere.
</h4>
</body>
</html>

It will display the following output:

9. Text-direction

This property can be used to change the direction of the text. It can be defined by using rtl property. It sets direction from right to left.

Example: Illustration of text direction

<html>
<head>
<title>Text Direction Property</title>
</head>
<body>
<p style = "direction:rtl;">
Hello World...Welcome to Educba...
</p>
</body>
</html>

It will display the following output:

10. Text-shadow

This property can be used to give shadow for the text. It can be defined by using the text-shadow property. It uses components such as left position, the top position, size of the blur, color name.

Example: Illustration of text-shadow

<!DOCTYPE html>
<html>
<head>
<title>Text Shadow Property</title>
<style>
h3
{
text-shadow:3px 3px 2px lightblue;
}
h4
{
text-shadow:3px 3px 2px plum;
}
</style>
</head>
<body>
<h3>
Hello World...Welcome to EDUCBA...
</h3>
<h4>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a skill based education
</h4>
</body>
</html>

It will display the following output:

11. Ems

This is a scalable unit for sizing. This em property can be used to define the size of the text according to the surrounding text. The default size of the text is 1em, which is equal to 12pt. 2em is equal to 24pt and so on.

Example: Illustration of ems property

<!DOCTYPE html>
<html>
<head>
<title>Ems Property</title>
<style>
h3
{
font-size: 0.8em;
}
h4
{
font-size: 1.2em;
}
</style>
</head>
<body>
<h3>
Hello World...Welcome to EDUCBA...
</h3>
<h4>
EDUCBA (Corporate Bridge Consultancy Pvt Ltd) is a skill based education
</h4>
</body>
</html> 

It will display the following output:

12. Font Family

This property is used to provide various types of font-family names for the selected text. For instance, Helvetica, Calibri, Arial, Sans-serif, Times, Courier New, etc.

Example: Illustration of the font-family property

<!DOCTYPE html>
<html>
<head>
<title>Font Family Property</title>
</head>
<body>
<p style="font-family:cursive;font-size:10pt;">Hello World...</p>
<p style="font-family:sans-serif;font-size:15pt;">Welcome to Educba...</p>
<p style="font-family:Georgia, serif;font-size:20pt;">Educational Consultant...</p>
</body>
</html>

It will display the following output:

Conclusion

So far, we have studied about text formatting ways in CSS. You could see the text is presented with different types of text formatting properties. These properties are very important aspects of CSS to display the text on the web page so that users or readers can get attract by seeing your text on the website. Make use of these text properties very easily and effectively on the web pages.

Thanks for reading. If you liked this post, share it with all of your programming buddies!


This post was originally published here

css css3 html html5 design-pattern

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch

HTML5 and CSS3 Fundamentals - Learn HTML5 and CSS3 From Scratch, you'll learn the fundamentals of HTML5 & CSS3 programming. Tune in to learn concepts about web pages, CSS3 styles and HTML5 features.

Colorful Drop-Down Menu in HTML CSS | Drop-Down Menu in HTML CSS

Download File: https://drive.google.com/file/d/1PpbVEw_mSvUPfA0WqdgcKWSoc-VnqgqW/view?usp=sharing Want to create a Drop-Down Menu with HTML & CSS? Check out ...

Neumorphism Landing Design HTML CSS | Landing page design HTML CSS

Neumorphism Landing Design HTML CSS | Landing page design HTML CSS

Profile Card Design with HTML & CSS

/* insert google fonts */ @import url('https://fonts.googleapis.com/css?family=Fira+Sans|Titillium+Web&display=swap'); font-family: 'Titillium Web', sans-ser...