• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Text

← Previous Next →

What exactly is CSS text styling and why is it important? CSS text properties allow developers to control the appearance, spacing, alignment, and decoration of text on a webpage. Proper text styling is essential for readability, accessibility, and overall visual design. With CSS, you can manipulate font size, weight, color, line spacing, alignment, decoration, and many other aspects of text, ensuring that your content is both visually appealing and easy to read. Understanding how to style text effectively is crucial for creating professional and user-friendly websites.

Why Text Styling Matters

Text is the primary way users consume content on the web. Proper text styling:

  • Enhances readability and comprehension

  • Guides the user’s attention through hierarchy and emphasis

  • Contributes to the overall aesthetic of the website

  • Ensures accessibility for users with visual impairments

  • Supports responsive design by maintaining legibility across devices

Without effective text styling, even well-written content can appear cluttered, confusing, or difficult to read.

Font Properties

Fonts are a critical part of text styling. CSS allows you to define which fonts are used, their size, style, weight, and fallback options.

Font Family

The font-family property specifies the typeface for text. It can include multiple fonts as a fallback mechanism.

p {
    font-family: "Arial", "Helvetica", sans-serif;
}

Font Size

The font-size property controls the size of the text. Values can be in pixels, em, rem, percentages, or keywords like small or large.

h1 {
    font-size: 36px;
}
p {
    font-size: 16px;
}

Font Weight

The font-weight property defines the thickness of the text. Common values include normal, bold, or numeric values from 100 to 900.

strong {
    font-weight: bold;
}
.light-text {
    font-weight: 300;
}

Font Style

The font-style property is used to apply italic or oblique styles to text.

em {
    font-style: italic;
}

Line Height

The line-height property controls vertical spacing between lines of text, improving readability.

p {
    line-height: 1.6;
}

Text Alignment

Text alignment determines how inline content is positioned within a block-level container.

h2 {
    text-align: center;
}
p {
    text-align: justify;
}

Values include:

  • left – aligns text to the left

  • right – aligns text to the right

  • center – centers the text horizontally

  • justify – aligns text to both left and right edges

Proper alignment helps maintain a clean, structured layout, especially for paragraphs, headings, and lists.

Text Decoration

Text decoration allows you to add visual effects such as underlines, overlines, line-throughs, and none.

a {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Text Transform

The text-transform property controls capitalization and letter case.

h1 {
    text-transform: uppercase;
}
h2 {
    text-transform: capitalize;
}
p {
    text-transform: lowercase;
}

This is useful for headings, buttons, or labels to maintain consistent case styling.

Letter Spacing and Word Spacing

Spacing between letters and words improves readability and visual design.

p {
    letter-spacing: 1px; /* space between letters */
    word-spacing: 2px;   /* space between words */
}

These properties are particularly effective for headings, logos, and call-to-action text.

Text Overflow

When text exceeds the width of its container, the text-overflow property controls how it is displayed.

div {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* adds ... for overflowed text */
}

This property prevents text from spilling out of containers and keeps layouts clean.

White Space

The white-space property controls how spaces, tabs, and line breaks inside an element are handled.

pre {
    white-space: pre; /* preserves all spacing and line breaks */
}
p {
    white-space: normal; /* collapses multiple spaces */
}

This is useful for formatting code snippets, poetry, or preformatted content.

Text Shadow

Text shadow adds depth or emphasis to text, improving visual appeal.

h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

You can control the horizontal offset, vertical offset, blur radius, and color.

Responsive Text

Responsive text ensures readability across devices. Using relative units like em or rem allows text to scale according to parent or root font size.

body {
    font-size: 16px;
}
h1 {
    font-size: 2.5rem; /* scales with root font size */
}
p {
    font-size: 1rem;
}

Responsive typography is essential for mobile-friendly design.

Best Practices

  • Choose readable fonts and avoid using too many different typefaces

  • Maintain proper line height and spacing for readability

  • Use text alignment to enhance layout structure

  • Apply text-transform and letter spacing sparingly for emphasis

  • Use responsive units for scalable, accessible text

  • Test readability on multiple devices and screen sizes

Summary of CSS Text

CSS text properties allow full control over typography, including font selection, size, weight, style, alignment, spacing, decoration, overflow, and responsive scaling. Properly styled text improves readability, visual hierarchy, and user experience. Whether it is a heading, paragraph, button, or label, understanding how to manipulate text using CSS is essential for professional and accessible web design. Using these properties effectively ensures that your content is both attractive and easy to consume across all devices and screen sizes.

Practice Questions

Q1. Center-align a paragraph.

Q2. Underline all <h3> headings.

Q3. Make all text in a .title class uppercase.

Q4. Add 5px space between letters in a paragraph.

Q5. Create double line spacing using line-height.

Q6. Remove underline from all <a> links.

Q7. Indent the first line of a paragraph by 40px.

Q8. Add 10px space between words.

Q9. Align a heading to the right.

Q10. Capitalize the first letter of each word in a heading.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top