Next ❯

CSS Text

  • Learn CSS text styling to control color, alignment, decoration, transform, and shadows.

  • What Is CSS Text Styling ?

    CSS Text styling defines how text appears, behaves, and feels on a webpage.

    It controls:

    Text color
    Alignment & spacing
    Readability
    Visual hierarchy
    Professional appearance

    In simple language:

    CSS text properties decide how readable, clean, and polished your content looks.

    Without proper text styling:

    Content feels cluttered
    Text becomes tiring to read
    Users lose interest quickly

    Why CSS Text Styling Matters

    Improves Readability

    Well-styled text is:

    Easy to scan
    Comfortable for the eyes
    Accessible for all users

    Real-life comparison:
    A neatly printed book is easier to read than random handwritten notes.

    Controls Text Layout & Flow

    CSS text properties help manage:

    Alignment
    Spacing
    Line structure
    Content hierarchy

    Real-life comparison
    Newspapers align text into columns so readers can scan information quickly.

    CSS TEXT PROPERTIES

    Text Color (color)

    Purpose

    Defines the color of text.

Text Color Property

The color property defines the color of text inside an element. 

p {
  color: #333;
}

  • Dark text on light background improves readability
    Softer colors reduce eye strain

    Real-life comparison:
    Black ink printed on white paper.

    Text Alignment (text-align)

    Purpose

    Controls horizontal positioning of text.

    Text Alignment (text-align)

    Purpose

    Controls horizontal positioning of text.

    Text Alignment (text-align)

    Purpose

    Controls horizontal positioning of text.

    Text Alignment (text-align)

    Purpose

    Controls horizontal positioning of text.

    Common values:

    • left (default)
    • center
    • right
    • justify


Text Alignment Property

text-align controls the horizontal alignment of text inside an element. 

h1 {
  text-align: center;
}

p {
  text-align: justify;
}

  • justify gives clean paragraph edges

    Real-life comparison:
    Books and magazines use alignment to maintain clean reading flow.

    Text Decoration (text-decoration)

    Purpose

    Adds or removes decorative lines from text.

    Values:

    • underline
    • overline
    • line-through
    • none

Text Decoration Property

text-decoration adds or removes decorative lines like underline or line-through from text. 

a {
  text-decoration: none;
}

.price {
  text-decoration: line-through;
}

  • Removes default link underline
    Shows discounts clearly

    Real-life comparison
    Crossing out completed tasks on a checklist.

    Text Spacing 

    Spacing directly affects readability and comfort.

    Letter Spacing (letter-spacing)

    Controls distance between characters.

Letter Spacing

letter-spacing increases or decreases the space between letters in text. 

h1 {
  letter-spacing: 2px;
}

  • Real-life comparison:
    Spaced capital letters on road signs.

    Word Spacing (word-spacing)

    Controls space between words.

Word Spacing

word-spacing controls the space between words in text. 

p {
  word-spacing: 4px;
}

  • Line Height (line-height)

    Controls vertical space between lines.

Line Height

line-height controls the vertical spacing between lines of text to improve readability. 

p {
  line-height: 1.6;
}

  • Most critical property for readability

    Real-life comparison:
    Extra spacing between notebook lines improves legibility.

    Text Transformation (text-transform)

    Purpose

    Changes text casing without touching HTML content.

    Values:

    • uppercase
    • lowercase
    • capitalize

Text Transform

text-transform changes the text case (uppercase, lowercase, capitalize) without modifying the HTML content. 

h2 {
  text-transform: uppercase;
}

.name {
  text-transform: capitalize;
}

  • Real-life comparison
    Proper capitalization in names and headings.

    Text Indentation (text-indent)

    Purpose

    Adds space before the first line of a paragraph.

Text Indent

text-indent adds space before the first line of a paragraph. 

p {
  text-indent: 40px;
}

  • Real-life comparison:
    Indented paragraphs in printed books.

    Text Shadow (text-shadow) — Optional Enhancement

    Purpose

    Adds a shadow effect behind text.

Text Shadow

text-shadow creates a shadow behind text to make it more attractive and visually appealing. 

h1 {
  text-shadow: 2px 2px 5px gray;
}

  • Adds depth
    Best used lightly for headings

    Real-life comparison
    Raised or embossed lettering on signboards.

Complete CSS Text Styling Example

This example demonstrates how multiple CSS text properties improve readability, alignment, spacing, and overall visual presentation. 

<!DOCTYPE html>
<html>
<head>
    <title>CSS Text Practical Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .content {
            width: 500px;
        }

        h1 {
            color: #1a73e8;
            text-align: center;
            letter-spacing: 2px;
        }

        p {
            color: #333;
            line-height: 1.6;
            text-align: justify;
            word-spacing: 3px;
        }

        a {
            text-decoration: none;
            color: green;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>Welcome to CSS Text</h1>
        <p>
            CSS text properties help control the appearance and readability
            of content on a webpage.
        </p>
        <a href="#">Read More</a>
    </div>
</body>
</html>

  • Clean typography
    Balanced spacing
    Professional appearance
    Improved reading experience

    Common Mistakes

    Using very light text colors
    Ignoring line-height
    Overusing shadows
    Writing long paragraphs in ALL CAPS

    Best Practices for CSS Text:

    Use dark text on light backgrounds
    Maintain line-height between 1.5–1.8
    Use text transformations sparingly
    Avoid excessive decoration
    Keep typography consistent across pages

    Real-Life Summary

    Text styling is how content communicates visually.

    • Good text → users stay longer
    • Poor text → users leave faster
    • CSS text properties → clarity, control, professionalism

    CSS Text controls color, alignment, spacing, and casing
    Strong typography improves readability and UX
    Essential for professional web design
    One of the most important CSS foundations

Next ❯