CSS Text

Common Text Properties

color: red;

font-size: 20px;

text-align: center;

text-decoration: underline;

🔹 Text Color

The color property defines the foreground color of text, playing a critical role in readability, branding, and visual hierarchy. Values can be keywords (red), hexadecimal codes (#0066cc), RGB/RGBA (rgb(0, 128, 0)), or HSL. High contrast between text and background is essential for accessibility (WCAG guidelines). Color choices convey meaning—red for errors, green for success. Consistent text color across a site reinforces brand identity. CSS also allows dynamic color changes via pseudo-classes like :hover. Well-chosen text colors enhance user experience, reduce eye strain, and improve content comprehension. This leads to longer dwell times and lower bounce rates, which are favorable user engagement signals considered in search engine ranking algorithms.

/* Different ways to set text color */
.red-text { color: red; }
.blue-text { color: #0066cc; }
.green-text { color: rgb(0, 128, 0); }

<p class="red-text">This text is red</p>
<p class="blue-text">This text is blue</p>
<p class="green-text">This text is green</p>

🔹 Text Alignment

The text-align property sets the horizontal alignment of inline content within a block element, fundamental to layout and readability. Values include left (default for most languages), right (for RTL languages), center (for titles or callouts), and justify (for newspaper-style columns). Proper alignment creates visual order, guides the reader's eye, and establishes content hierarchy. Center alignment is often used for headings and block quotes, while left alignment is standard for body text. Consistent text alignment improves the professional appearance of a site and enhances scannability. Better readability increases user engagement and time-on-page, contributing positively to SEO metrics by signaling high-quality, user-friendly content to search engines.

/* Text alignment options */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>

🔹 Text Decoration

The text-decoration property adds visual lines to text, primarily used for underlines, overlines, line-throughs, or their removal. Shorthand text-decoration-line, -style, and -color allow detailed control. Common uses include underlining links (but often removing it for non-link emphasis), strike-through for discounted prices, or overlines for decorative headings. Removing underlines from links can be part of a clean design system but must maintain accessibility through other cues. Modern CSS also supports text-decoration-thickness and text-underline-offset for finer design control. Judicious use of text decoration enhances visual hierarchy and interactivity without clutter. Clear, intentional decoration improves user experience and content clarity, supporting engagement metrics that influence SEO.

/* Text decoration options */
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.none { text-decoration: none; }

<p class="underline">Underlined text</p>
<p class="overline">Overlined text</p>
<p class="line-through">Strikethrough text</p>

🔹 Text Transform

The text-transform property changes text capitalization in CSS. It can render text as uppercase, lowercase, or capitalize each word, ideal for styling dynamic content like user inputs or database entries while preserving original HTML semantics. This ensures visual consistency across interfaces, improves typographic control, and maintains accessibility as screen readers interpret the source text. It’s widely used for buttons, headings, form labels, and data normalization.

/* Text transformation */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

<p class="uppercase">uppercase text</p>
<p class="lowercase">LOWERCASE TEXT</p>
<p class="capitalize">capitalize each word</p>