EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

CSS Text Formatting

By Mahantesh NagathanMahantesh Nagathan

Home » Software Development » Software Development Tutorials » CSS Tutorial » CSS Text Formatting

CSS Text Formatting

Introduction to CSS Text Formatting

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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

List of CSS text formatting properties

Below is the list of CSS text formatting properties.

CSS Text Formatting Properties

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

Code:

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

Output:

CSS Text Formatting1

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

Code:

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

Output:

CSS Text Formatting 2

3) Text Decoration

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

Popular Course in this category
CSS Training (9 Courses, 9+ Projects)9 Online Courses | 9 Hands-on Projects | 61+ Hours | Verifiable Certificate of Completion | Lifetime Access
4.5 (5,454 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)jQuery Training (8 Courses, 5 Projects)

Example: Illustration of text-decoration

Code:

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

Output:

CSS Text Formatting3

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

Code:

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

Output:

CSS Text Formatting4

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

Code:

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

Output:

CSS Text Formatting5

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

Code:

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

Output:

CSS Text Formatting6

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

Code:

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

Output:

CSS Text Formatting7

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

Code:

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

Output:

CSS Formating8

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

Code:

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

Output:

CSS Formating9

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

Code:

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

Output:

CSS Formating10

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

Code:

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

Output:

CSS 11

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

Code:

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

Output:

CSS 12

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.

Recommended Articles

This has been a guide to CSS Text Formatting. Here we have discuss an introduction and list of CSS text formatting properties in detail with the sample code examples and proper output. You can also go through our other suggested articles to learn more –

  1. What is CSS?
  2. CSS Commands
  3. CSS Arrow
  4. CSS Triangle Generator

CSS Training (9 Courses, 9+ Projects)

9 Online Courses

9 Hands-on Projects

61+ Hours

Verifiable Certificate of Completion

Lifetime Access

Learn More

1 Shares
Share
Tweet
Share
Primary Sidebar
CSS Tutorial
  • CSS
    • Introduction To CSS
    • What is CSS?
    • Uses Of CSS
    • Advantages of CSS
    • Career In CSS
    • CSS Commands
    • Is Css Case Sensitive
    • CSS object-fit
    • Types of CSS Selectors
    • CSS Radio Button
    • CSS Attribute Selector
    • CSS first child of class
    • CSS Selector nth Child
    • CSS Parent Selector
    • CSS Child Selector
    • CSS Not Selector
    • CSS Descendant Selector
    • CSS Inline Style
    • Checkbox CSS
    • CSS Appearance
    • CSS Font Properties
    • CSS font-variant
    • CSS Pagination
    • CSS Table Styling
    • CSS Table Cell Padding
    • CSS Padding Color
    • CSS Text Formatting
    • CSS for Text-Shadow
    • CSS text-stroke
    • CSS text-indent
    • CSS Rotate Text
    • CSS Text Color
    • CSS Center Div
    • CSS Arrow
    • CSS Arrow Down
    • CSS offset
    • CSS Cursor
    • CSS Layout
    • CSS Grid Layout
    • Button in CSS
    • CSS Button Border
    • text-align in CSS
    • CSS Horizontal Align
    • CSS Position
    • CSS Box Sizing
    • CSS box-shadow
    • CSS Text Underline
    • CSS Text Outline
    • CSS Blinking Text
    • Text Decoration CSS
    • CSS Vertical Align
    • CSS Word Wrap
    • CSS Padding
    • CSS Font Color
    • CSS Color Generator
    • CSS Margin Right
    • CSS Margin Color
    • CSS Color Codes
    • CSS Color Transparent
    • CSS Color Chart
    • CSS Link Color
    • CSS z-index
    • CSS Curved Border
    • CSS Border Left
    • CSS left
    • CSS Gradient Generator
    • Radial Gradient in CSS
    • CSS Shape Generator
    • CSS Triangle Generator
    • CSS background-color
    • CSS Background Image
    • CSS background-clip
    • CSS background-blend-mode
    • CSS Drop Shadow
    • CSS line height
    • CSS line break
    • Sticky Footer CSS
    • CSS Header Design
    • CSS Border Style
    • CSS Border Generator
    • Sticky Sidebar CSS
    • CSS Transparent Border
    • CSS Border Radius
    • CSS translate
    • CSS transform
    • CSS 3D Transforms
    • CSS Text Transform
    • CSS Transition Effects
    • CSS Transition Property
    • CSS Animation Transition
    • Negative Margin CSS
    • CSS Navigation Bar
    • CSS Overflow
    • CSS overflow-wrap
    • CSS Lists
    • CSS list-style
    • CSS Order
    • CSS Box Model
    • CSS Inner Border
    • CSS Icon
    • Menu Icon CSS
    • CSS Multiple Borders
    • Opacity in CSS
    • CSS Float Right
    • CSS Clear Float
    • CSS clip
    • CSS disabled
    • CSS Border Padding
    • Border Images in CSS
    • CSS Visibility
    • CSS Validator
    • CSS Clearfix
    • CSS Counter
    • CSS Letter Spacing
    • CSS root
    • CSS zoom
    • CSS calc()
    • CSS.supports()
    • CSS Loader
    • Media Query CSS
    • CSS @keyframes
    • CSS @bottom
    • CSS page-break-after Property
    • CSS page-break
    • CSS Position Fixed
    • CSS skew()
    • CSS Row
    • CSS Masking
    • CSS Scrollbar
    • CSS Overlay
    • CSS Important
    • CSS Cursor Hand
    • CSS Inherit
    • CSS Position Relative
    • CSS Compressor
    • CSS tricks
    • CSS Outline Property
    • CSS Flexbox Properties
    • CSS flex-direction
    • CSS content property
    • CSS Typography
    • CSS Formatter
    • CSS nowrap
    • CSS Column
    • GridView CSS
    • CSS Viewport
    • CSS Minify
    • CSS Combinators
    • CSS in React
    • CSS Matrix 
    • CSS Pseudo Elements
    • CSS Pseudo Classes
    • CSS Pointer Events
    • CSS Resize
    • CSS Inheritance
    • CSS Interview Questions
    • Cheat Sheet CSS
  • CSS3
    • What is CSS3?
    • CSS3 Interview Questions
    • Cheat sheet CSS3
  • sass
    • How to Install SASS
    • SASS Interview Questions
    • What is Sass
    • SASS Comments
    • Sass Variables
    • SASS Import
    • SASS if else
    • SASS Nesting
    • SASS @each
    • SASS @at-root
    • SASS @extend
    • SASS @media
    • SASS @for
    • SASS Map
    • SASS Selectors
    • SASS Color Functions
    • SASS Mixins

Related Courses

CSS Training Course

Bootstrap Training Course

JQuery Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - CSS Training (9 Courses, 9+ Projects) Learn More