CSS Text Formatting (original) (raw)

Last Updated : 15 Apr, 2025

CSS Text Formatting allows you to control the visual presentation of text on a webpage. From changing fonts to adjusting spacing and alignment, CSS provides powerful properties to enhance the readability and aesthetic of text.

• CSS lets you adjust font properties, text alignment, spacing, and decorations.
• It helps in creating visually appealing text and improving the user experience.
• Various text-related properties can be combined to achieve unique text styles and layouts. HTML `

<style>
    .initials {
        font-size: 40px;
        font-weight: bold;
        color: #4CAF50;
        text-transform: uppercase;
        font-family: Arial, sans-serif;
    }
</style>

A.B.

`

**In this example

• **Font Size: The text size is set to 40px, making it large and prominent.
• **Font Weight: The text is bold, making it stand out more.
• **Color: The text color is set to a green shade (#4CAF50), giving it a fresh look.
• **Text Transform: The text is converted to uppercase, so the letters appear in capital letters.
• **Font Family: The text uses Arial, which is a sans-serif font, for a clean, modern appearance.

**CSS Text Formatting Properties

These are the following text formatting properties.

Text Formatting Properties

1. color

This property help’s to set the color of a text on your web page which is inside an element or inside the body tag if no element is parenting it.

**Syntax

element{
color: color-name | rgb | rgba | hsl | hsla | hexadecimal;
}

HTML `

<style>
    p {
        color: green;
    }
</style>

Hello GFG

`

2. text-align

This property aligns the text in an element at a specific position. Also it aligns the text on basis of it’s writing direction with properties like start and end it means to the start and end of the container in which it is written.

**Syntax

element{
text-align: left| right |center | justify |start | end | initial | inherit;
}

HTML `

<style>
    p {
        height: 50px;
        background-color: aquamarine;
        text-align: center;
        color: white;
        border: 2px solid black;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts because it contains eve

`

3. text-align-last

This property in CSS understands the last line as the line after a natural line break sequence. Suppose if a person is writing a paragraph this property will consider the last line as the line after the natural line break due to page width end as the last line of the paragraph.

**Syntax

element{
text-align-last: left | right | center | justify | initial | inherit;
}

HTML `

<style>
    p {
        width: 250px;
        border: 2px solid black;
        text-align-last:;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts becaues

`

4. text – decoration

This property basically help’s to add a underline to the text written in your element , In this their are various type’s of decoration context’s that you can apply to your text.

**Syntax

element{
text-decoration: dashed | dotted | double | line-through | none | overline | solid | underline | wavy;
}

HTML `

<style>
    p {
        width: 250px;
        border: 2px solid black;
        text-decoration: underline;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts becaues

`

5. text-decoration-color

This property help’s to add a color to the underline that is made over or under a text with the use of text-decoration property.

**Syntax

element{
text-decoration-color: color | initial | inherit;
}

HTML `

<style>
    p {
        width: 250px;
        border: 2px solid black;
        text-decoration: underline;
        text-decoration-color: red;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts becaues

`

6. text-decoration-line

This property help’s to set the type of line used in decoration of any text.

**Syntax

element{
text-decoration-line: underline | overline | line-through | none | inherit | initial;
}

HTML `

<style>
    p {
        width: 250px;
        border: 2px solid black;
        text-decoration: underline;
        text-decoration-color: gray;
        text-decoration-line:line-through;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts becaues

`

7. text-decoration-style

This property help’s to set the preview of the line used for a particular text.

**Syntax

element{
text-decoration-style: dashed | dotted | double | none | solid | wavy | initial | inherit;
}

HTML `

<style>
    p {
        width: 250px;
        border: 2px solid black;
        text-decoration: underline;
        text-decoration-color: green;
        text-decoration-style: wavy;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts becaues

`

8. text-indent

This property in CSS add ‘s an indentation to the first line written in an element from the starting of that particular element.

**Syntax

element{
text-indent: value in pixel's | inherit | initial;
}

HTML `

<style>
    p {
        width: 250px;
        border: 2px solid black;
        text-decoration: underline;
        text-decoration-color: green;
        text-decoration-style: wavy;
        text-indent: 70px;
    }
</style>

The quick brown fox jumps over the lazy dog. This phrase is often used to test typewriters and fonts becaues

`

9. text – justify

This property in CSS specifies the kind of justification that has to be made to a text on basis of inter-word space or inter-character space.

**Syntax

element{
text-justify: initial | inter-word | inter-character | inherit;
}

HTML `

<style>
    h1 {
        text-align: center;
        color: green;
    }
    div {
        height: 100px;
        width: 80%;
        margin: 20px auto;
        padding: 20px;
        border: 2px solid black;
        text-align: justify;
        text-justify: inter-word;
        column-count: 3;
        column-gap: 1em;
        column-rule: 2px solid red;
        font-size: 16px;
    }
</style>

NEWSPAPER GFG

`

10. text-overflow

This is a CSS text property with the help of which you can decide that how you want to show the begining of the hidden text in your document.

**Syntax

element{
text-overflow: clip | ellipse | inherit | initial;
}

HTML `

<style>
    p {
        width: 200px;
        height: 50px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 2px solid black;
    }
</style>

CSS Text Formatting refers to applying styles to text elements to control appearance and layout. This includes properties for color, alignment, decoration, indentation, justification, shadows, spacing, and direction. These properties enhance readability and aesthetics, improving the presentation of textual content on web pages..

`

11. text-transform

This is a property in CSS with the help of which a user has the control over the casing of the text in your element.

**Syntax

element{
text-transform: capitalize | lowercase | uppercase | initial | inherit
}

HTML `

<style>
    p {
        text-transform: capitalize;
    }
</style>

Welcome to gfg

`

12. text-shadow

This is a property which help’s the user to add a shadow to the text in your element.

**Syntax

element{
text-shadow: shadow-height shadow-width blur-radius shadow-color;
}

HTML `

<style>
    p {
        font-size: 23px;
        font-family: sans-serif;
        font-weight: 900;
        text-shadow: 10px 10px 5px red;
    }
</style>

Welcome to gfg

`

13. bdo

This is a tag in html that overrides the content written inside it to a specific direction using the dir attribute with it.

HTML `

<style>
    bdo {
        font-size: 23px;
        font-family: sans-serif;
        font-weight: 900;
        text-shadow: 10px 10px 5px red;
    }
</style>

`