CSS – Text Styling

· CSS3 Module

Text is the soul of every webpage.
If HTML builds the house, CSS decorates the walls, arranges the furniture, and gives beauty to the words inside it.

Good text styling improves:

  • Readability
  • User experience
  • Professional look
  • Attention and focus
  • Website beauty

Imagine reading a book where:

  • all words are crowded,
  • colors are dull,
  • alignment is messy,
  • spacing is uneven.

You would feel tired quickly.

CSS Text Styling solves these problems.

1. Text Color

What is Text Color?

Text color changes the color of words on a webpage.

CSS property:

color:

Syntax

p{
    color: blue;
}

Real Life Logic

Think of a classroom whiteboard.

  • Red color → important warning
  • Green → success
  • Blue → calm information
  • Black → normal reading

Websites also use colors to guide users emotionally.

Example 1 – Simple Text Color

HTML

<p>This is blue text.</p>

CSS

p{
    color: blue;
}

Example 2 – Different Colors

h1{
    color: red;
}

h2{
    color: green;
}

p{
    color: gray;
}

Common Color Values

Color Type Example
Name red
HEX #ff0000
RGB rgb(255,0,0)
RGBA rgba(255,0,0,0.5)

Professional Tip

  • Use dark text on light background
  • Avoid very bright colors for long paragraphs
  • Maintain readability

Good:

color: #333;

Bad:

color: yellow;
background: white;

2. Text Alignment

What is Text Alignment?

It controls the horizontal position of text.

CSS property:

text-align:

Types of Alignment

Value Meaning
left Text starts from left
center Text stays center
right Text goes right
justify Equal spacing like newspapers

Example 1 – Center Alignment

h1{
    text-align: center;
}

Output: Heading appears in center.

Example 2 – Justify Alignment

p{
    text-align: justify;
}

Real Life Logic

Left Align

Used in blogs and articles because reading becomes natural.

Center Align

Used for:

  • titles
  • banners
  • quotes

Justify

Used in:

  • newspapers
  • books
  • magazines

It gives a clean professional look.

3. Text Decoration

What is Text Decoration?

It adds or removes decorative lines from text.

CSS property:

text-decoration:

Common Values

Value Meaning
underline Adds line below
overline Adds line above
line-through Cuts text
none Removes decoration

Example 1 – Underline

h1{
    text-decoration: underline;
}

Example 2 – Remove Link Underline

By default links have underline.

a{
    text-decoration: none;
}

Real Life Logic

Underline

Shows importance.

Line-through

Used in shopping websites:

  • old price crossed
  • new discount price shown

Example: ₹999 ₹1499

Example 3 – Line Through

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

4. Text Transformation

What is Text Transformation?

It changes letter case.

CSS property:

text-transform:

Values

Value Meaning
uppercase ALL CAPITAL
lowercase all small
capitalize First Letter Capital

Example 1 – Uppercase

h1{
    text-transform: uppercase;
}

Input:

hello world

Output:

HELLO WORLD

Example 2 – Capitalize

p{
    text-transform: capitalize;
}

Input:

welcome to css class

Output:

Welcome To Css Class

Real Life Logic

Uppercase

Used for:

  • headings
  • alerts
  • buttons

Capitalize

Used for:

  • titles
  • names

Lowercase

Used in:

  • minimalist modern designs

5. Letter Spacing

What is Letter Spacing?

It controls space between letters.

CSS property:

letter-spacing:

Example

h1{
    letter-spacing: 5px;
}

Real Life Logic

Imagine writing:

NORMAL

vs

N O R M A L

More spacing creates:

  • elegant look
  • luxury feeling
  • modern branding

Use Cases

  • Logos
  • Headings
  • Posters
  • Premium websites

Example 2 – Negative Spacing

h1{
    letter-spacing: -1px;
}

This brings letters closer.

6. Word Spacing

What is Word Spacing?

It controls space between words.

CSS property:

word-spacing:

Example

p{
    word-spacing: 10px;
}

Real Life Logic

Proper spacing improves readability.

Too close:

CSSisveryimportantforwebdesign

Proper spacing:

CSS is very important for web design

Use Cases

  • Quotes
  • Stylish headings
  • Decorative text

7. Line Height

What is Line Height?

It controls vertical spacing between lines.

CSS property:

line-height:

Example

p{
    line-height: 30px;
}

Real Life Logic

Imagine reading a notebook where lines touch each other.

It becomes difficult.

Proper line height:

  • makes reading easy
  • improves eye comfort
  • gives professional appearance

Example Comparison

Bad

line-height: 10px;

Text looks crowded.

Good

line-height: 1.6;

Text becomes comfortable.

Best Practice

Most websites use:

line-height: 1.5;

or

line-height: 1.6;

Full Practical Example

HTML

<h1>Welcome to CSS</h1>

<p>
CSS helps us style webpages beautifully and professionally.
</p>

<a href="#">Click Here</a>

CSS

h1{
    color: darkblue;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-decoration: underline;
}

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

a{
    text-decoration: none;
    color: green;
}

Output Result

  • Blue centered heading
  • Uppercase letters
  • Underlined title
  • Comfortable paragraph spacing
  • Stylish green link without underline

Professional and readable.

Common Mistakes Beginners Make

Mistake Problem
Too many bright colors Hard to read
Very small line height Text crowded
Excessive spacing Ugly design
Center align long paragraphs Difficult reading
Too much uppercase Looks aggressive

Professional Design Tips

1. Keep Paragraphs Left or Justified

Easy reading.

2. Use Soft Colors

Dark gray is better than pure black.

3. Maintain Proper Spacing

Spacing creates elegance.

4. Avoid Decoration Overuse

Too many underlines look outdated.

5. Use Hierarchy

  • Big heading
  • Medium subheading
  • Normal paragraph

This guides reader attention.

Mini Practice Task

Create:

  • One centered heading
  • Paragraph with line height
  • Underlined text
  • Uppercase button text
  • Increased letter spacing

Learning Outcome

After learning CSS Text Styling, students will:

  • Style text professionally
  • Improve readability
  • Create beautiful typography
  • Design clean webpages
  • Understand spacing and alignment logic
  • Build visually attractive websites

Typography is not just decoration.
It is communication.
Beautiful text speaks before the reader even starts reading.

List of Modules

Anas Khan
Written by