Home » CSS

Text Formatting in CSS

CSS text formatting: Here, we are going to learn about the text formatting in CSS, how to apply various text formatting using CSS properties?
Submitted by Anjali Singh, on October 15, 2019

CSS text formatting

CSS text properties allow you to style your text in various ways very easily. Such as color, alignment, spacing, direction, etc.

Text Color (color property)

The color property is defined by the CSS. We can either write the name of the color or the color code to use our color on the site.

Syntax:

    Element{
        color:white; //#000000
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        h1 {
            color: red;
        }
        
        p {
            color: green;
        }
    </style>
</head>
<html>

<body>
    <p>HELLO WORLD!</p>
    <h1>HEADING</h1>
</body>

</html>

Output

text formatting in CSS Example Output 1

Text Alignment (text-align property)

text-align property is used to align text horizontally. The possible values of this property could be: left, right, center, justify and inherit.

Syntax:

    Element{
        text-align:right;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        h1 {
            Text-align: center;
        }
        
        p {
            Text-align: right
        }
    </style>
</head>
<html>

<body>
    <p>HELLO WORLD!</p>
    <h1>HEADING</h1>
</body>

</html>

Output

text formatting in CSS Example Output 2

Text Decoration (text-decoration property)

The text-decoration property is used to remove or set decorations from the text. The possible values of this property could be: none, underline, overline, blink, line-through and inherit.

Syntax:

    Element{
        text-decoration: overline;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        h1 {
            text-decoration: none;
        }
        
        h2 {
            text-decoration: overline;
        }
    </style>
</head>
<html>

<body>
    <h1>HELLO WORLD!</h1>
    <h2>HEADING</h2>
</body>

</html>

Output

text formatting in CSS Example Output 3

Text Transformation (text-transform property)

The text-transform property is used to change the cases of the text for example, it sets the case to lowercase or uppercase or just makes the initial letter capital. Possible values could be: none, capitalize, lowercase, uppercase and inherit.

Syntax:

    Element{
        text-transform: none;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            text-transform: uppercase;
        }
    </style>
</head>
<html>

<body>
    <p> Some content</p>
</body>

</html>

Output

text formatting in CSS Example Output 4

Text Indentation (text-indent property)

The text-indent property comes in use when we have to indent the first line of text of any element. This property comes with the following values: percentage, length (specifying space) and inherit.

Syntax:

    Element{
        text-indent: 50%;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            text-indent: 100px;
        }
    </style>
</head>
<html>

<body>
    <p> Some content</p>
</body>

</html>

Output

text formatting in CSS Example Output 5

Word Spacing (word-spacing property)

The word-spacing property deals with the spacing between the words. Possible values are: length, normal and inherit.

Syntax:

    Element{
        word-spacing: 20px;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            word-spacing: 50px;
        }
    </style>
</head>
<html>

<body>
    <p> Some content</p>
</body>

</html>

Output

text formatting in CSS Example Output 6

Letter Spacing (letter-spacing property)

The letter-spacing is a very useful property when it comes to putting spaces between the letters of the words. This can also have negative values as well. Its values are the same as word-spacing: normal, length and inherit.

Syntax:

    Element{
        letter-spacing: 10px;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        h1 {
            letter-spacing: -3px;
        }
    </style>
</head>
<html>

<body>
    <h1>Some content</h1>
</body>

</html>

Output

text formatting in CSS Example Output 7

Line Height (line-height property)

The line-height or leading property defines the height of a line of a text. Its possible values are length, percentage, inherit, number and normal.

Syntax:

    Element{
        line-height:50%;
    }

Example:

<!DOCTYPE html>

<head>
    <style>
        p {
            letter-spacing: 3px;
        }
    </style>
</head>
<html>

<body>
    <h1>Test page</h1>
    <p>
	IncludeHelp site is specially designed to provide help to students, 
	working professionals and job seekers. We are fully dedicated to make each tutorial 
	very simple to learn and understand. This site is not created for business purpose, 
	but for spreading education about programming languages and to help the concerned learners 
	out who are enthusiastic to learn new technologies.
    </p>
</body>

</html>

Output

text formatting in CSS Example Output 8






Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.