CSS Text Properties
CSS text properties control the appearance, behavior, and formatting of text. Understanding these properties allows you to create typography that is engaging and functional.
1. text-align
The text-align property sets the horizontal alignment of text.
/* Default: left */
.left { text-align: left; }
/* Center */
.center { text-align: center; }
/* Right */
.right { text-align: right; }
/* Justify (aligned on both sides) */
.justify { text-align: justify; }
/* Practical usage */
.article {
text-align: justify;
max-width: 700px;
margin: 0 auto;
}
.article h1, .article h2 {
text-align: left; /* Headings do not need justify */
}
.footer {
text-align: center;
}
.price {
text-align: right;
font-family: monospace;
}
<div style="text-align: left;">Left-aligned text (default)</div>
<div style="text-align: center;">Center-aligned text</div>
<div style="text-align: right;">Right-aligned text</div>
<div style="text-align: justify;">Justified text. This paragraph will be aligned on both sides for a neater, more professional look. This is suitable for articles and long content.</div>
2. text-decoration
The text-decoration property adds lines to text.
/* Default: no decoration */
.none { text-decoration: none; }
/* Underline */
.underline { text-decoration: underline; }
/* Strikethrough */
.line-through { text-decoration: line-through; }
/* Overline */
.overline { text-decoration: overline; }
/* Multiple decorations */
.multi { text-decoration: underline line-through; }
/* Decoration color */
.colored {
text-decoration: underline;
text-decoration-color: #3498db;
}
/* Decoration style */
.dashed {
text-decoration: underline;
text-decoration-style: dashed;
}
.dotted {
text-decoration: underline;
text-decoration-style: dotted;
}
.wavy {
text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #e74c3c;
}
/* Shorthand */
.complete { text-decoration: underline wavy #3498db; }
/* Thickness */
.thick {
text-decoration: underline;
text-decoration-thickness: 3px;
}
Link Styling
/* Default link */
a {
color: #3498db;
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: #2980b9;
text-decoration: underline;
text-underline-offset: 3px;
}
/* Link inside an article */
.article a {
color: #3498db;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 4px;
transition: all 0.3s ease;
}
.article a:hover {
color: #2980b9;
text-decoration-style: solid;
background-color: rgba(52, 152, 219, 0.1);
}
/* Nav link without decoration */
.nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
}
.nav a:hover {
text-decoration: underline;
text-underline-offset: 5px;
}
3. text-transform
The text-transform property changes uppercase/lowercase.
/* All uppercase */
.uppercase { text-transform: uppercase; }
/* All lowercase */
.lowercase { text-transform: lowercase; }
/* Capitalize the first letter */
.capitalize { text-transform: capitalize; */
/* No transform */
.none { text-transform: none; }
/* Practical usage */
.nav-link {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.section-title {
text-transform: capitalize;
}
.error-message {
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.1em;
}
.label {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.1em;
color: #666;
}
<p style="text-transform: uppercase;">this becomes all uppercase</p>
<p style="text-transform: lowercase;">THIS BECOMES ALL LOWERCASE</p>
<p style="text-transform: capitalize;">this becomes capitalized at the start</p>
4. text-indent
The text-indent property sets the indentation of the first line of text.
/* Simple indentation */
.indent { text-indent: 2em; }
/* Negative indentation (hanging indent) */
.hanging {
text-indent: -2em;
padding-left: 2em;
}
/* Practical usage */
.article p {
text-indent: 2em;
margin-bottom: 1.5em;
}
.article p:first-of-type {
text-indent: 0; /* No indentation for the first paragraph */
}
/* Hanging indent for citations */
.citation {
text-indent: -1.5em;
padding-left: 1.5em;
margin-bottom: 1em;
}
/* List with hanging indent */
.definition-list dt {
font-weight: 600;
margin-bottom: 0.5em;
}
.definition-list dd {
text-indent: 0;
padding-left: 2em;
margin-bottom: 1.5em;
}
<div class="article">
<p>The first paragraph has no indentation. This is an opening paragraph, which is usually not indented in certain writing styles.</p>
<p>The second paragraph has a two-em indentation. This is a writing style commonly used in articles and books to visually separate paragraphs without extra spacing.</p>
<p>The third paragraph also has the same indentation. Indentation helps readers identify the start of a new paragraph more easily.</p>
</div>
5. letter-spacing
The letter-spacing property sets the spacing between letters.
/* Normal (default) */
.normal { letter-spacing: normal; }
/* Positive: wider spacing between letters */
.spaced { letter-spacing: 0.1em; }
.wide { letter-spacing: 0.2em; }
/* Negative: tighter spacing between letters */
.tight { letter-spacing: -0.02em; }
/* Practical usage */
.label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
font-weight: 600;
}
.heading {
letter-spacing: -0.02em; /* Tighter for large headings */
}
.logo {
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 700;
}
/* Responsive letter spacing */
h1 {
font-size: clamp(2rem, 5vw, 4rem);
letter-spacing: -0.03em;
line-height: 1.1;
}
@media (max-width: 768px) {
h1 {
letter-spacing: -0.02em;
}
}
/* Code */
code {
letter-spacing: 0.02em;
}
6. word-spacing
The word-spacing property sets the spacing between words.
/* Normal (default) */
.normal { word-spacing: normal; }
/* Positive: wider spacing between words */
.spaced { word-spacing: 0.2em; }
/* Negative: tighter spacing between words */
.tight { word-spacing: -0.05em; }
/* Practical usage */
.title {
word-spacing: 0.1em;
}
/* For justified text */
.justified {
text-align: justify;
word-spacing: 0.05em;
}
/* Heading */
h1 {
word-spacing: 0.05em;
}
/* Mono text */
.mono {
font-family: monospace;
word-spacing: 0.5em;
}
7. text-shadow
The text-shadow property adds a shadow to text.
/* text-shadow: offset-x offset-y blur-radius color; */
/* Simple shadow */
.simple {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* Shadow without blur */
.no-blur {
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}
/* Heavier shadow */
.heavy {
text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}
/* Neon shadow */
.neon {
color: #fff;
text-shadow:
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
}
/* Retro shadow */
.retro {
color: #333;
text-shadow: 2px 2px 0px #ccc;
}
/* Shadow for a heading on top of an image */
.hero-text {
color: white;
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.5),
0 0 20px rgba(0, 0, 0, 0.3);
}
/* Shadow for text on top of a photo */
.overlay-text {
color: white;
text-shadow:
1px 1px 2px rgba(0, 0, 0, 0.8),
0 0 10px rgba(0, 0, 0, 0.5);
}
/* Multiple shadows */
.complex {
text-shadow:
1px 1px 0 #fff,
2px 2px 0 #ddd,
3px 3px 0 #bbb;
}
<h1 class="simple">Text with a Simple Shadow</h1>
<h1 class="neon">Neon Effect Text</h1>
<h1 class="retro">Retro Effect Text</h1>
<div class="hero" style="background: url('hero.jpg') center/cover; height: 300px; display: flex; align-items: center; justify-content: center;">
<h1 class="hero-text">Heading Over an Image</h1>
</div>
8. text-overflow
The text-overflow property controls how overflowing text is displayed.
/* Clip: text is cut off */
.clip {
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
width: 200px;
}
/* Ellipsis: text is cut off with ... */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 200px;
}
/* Practical usage */
.card-title {
font-size: 1.2rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Multi-line ellipsis (CSS) */
.multi-line-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* Maximum 3 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
max-height: calc(1.6em * 3); /* line-height × number of lines */
}
/* 2 line ellipsis */
.two-line {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
overflow: hidden;
}
.breadcrumb-item {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.breadcrumb-separator {
color: #999;
flex-shrink: 0;
}
<!-- Single line ellipsis -->
<div style="width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid #ddd; padding: 10px;">
This is very long text and will be cut off with an ellipsis
</div>
<!-- Multi line ellipsis -->
<div class="multi-line-ellipsis" style="max-width: 300px; border: 1px solid #ddd; padding: 15px;">
This is very long text that will be cut off after three lines. Text beyond the limit will be shown with an ellipsis (...) to indicate that there is more content.
</div>
9. white-space
The white-space property controls how spaces and line breaks are handled.
/* Normal: extra spaces are removed, line breaks become spaces */
.normal { white-space: normal; }
/* Pre: spaces are preserved, line breaks are preserved */
.pre { white-space: pre; }
/* Pre-wrap: spaces are preserved, line breaks are preserved, wraps automatically */
.pre-wrap { white-space: pre-wrap; }
/* Pre-line: line breaks are preserved, extra spaces are removed */
.pre-line { white-space: pre-line; }
/* Nowrap: text does not wrap to a new line */
.nowrap { white-space: nowrap; }
/* Practical usage */
.code-block {
white-space: pre;
font-family: monospace;
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
}
/* Address */
address {
white-space: pre-line;
}
/* Poetry */
.poem {
white-space: pre;
font-style: italic;
}
/* Prevent text wrapping */
.no-wrap {
white-space: nowrap;
}
/* Responsive nowrap */
.responsive-nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (min-width: 768px) {
.responsive-nowrap {
white-space: normal;
overflow: visible;
}
}
<!-- Preformatted text -->
<pre style="white-space: pre;">
function hello() {
console.log("Hello World");
}
</pre>
<!-- Normal wrapping -->
<p style="white-space: normal; max-width: 200px;">
This is text that will wrap to a new line automatically if it exceeds the container width.
</p>
<!-- No wrap -->
<p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;">
This text will not wrap to a new line and will be cut off
</p>
10. overflow-wrap
The overflow-wrap property (previously word-wrap) controls how long words are handled.
/* Normal: long words break the line */
.normal { overflow-wrap: normal; }
/* Break-word: long words are forced to wrap */
.break-word { overflow-wrap: break-word; }
/* Anywhere: wrap at any character */
.anywhere { overflow-wrap: anywhere; }
/* Practical usage */
.container {
overflow-wrap: break-word;
word-wrap: break-word; /* Fallback for older browsers */
max-width: 100%;
}
/* Long URL */
.url-text {
overflow-wrap: break-word;
word-break: break-all;
}
/* Code block */
.code {
overflow-wrap: break-word;
font-family: monospace;
background-color: #f5f5f5;
padding: 15px;
border-radius: 5px;
}
/* Email address */
.email {
overflow-wrap: break-word;
}
11. word-break
The word-break property controls how words are broken.
/* Normal: follows the language's default rules */
.normal { word-break: normal; }
/* Break-all: wrap at any character */
.break-all { word-break: break-all; }
/* Keep-all: no word breaking (CJK) */
.keep-all { word-break: keep-all; }
/* Practical usage */
.container {
word-break: break-word; /* To prevent overflow */
}
/* Table cell */
td {
word-break: break-word;
overflow-wrap: break-word;
}
/* Long URL or code */
.code-inline {
word-break: break-all;
font-family: monospace;
background-color: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
}
/* CJK text */
.cjk-text {
word-break: keep-all;
}
12. vertical-align
The vertical-align property sets the vertical alignment of inline elements.
/* Default: baseline */
.baseline { vertical-align: baseline; }
/* Middle */
.middle { vertical-align: middle; }
/* Top */
.top { vertical-align: top; }
/* Bottom */
.bottom { vertical-align: bottom; }
/* Text-top */
.text-top { vertical-align: text-top; }
/* Text-bottom */
.text-bottom { vertical-align: text-bottom; }
/* Superscript and subscript */
.super { vertical-align: super; } /* Superscript */
.sub { vertical-align: sub; } /* Subscript */
/* Pixel/percentage values */
.pixel { vertical-align: 10px; }
.percentage { vertical-align: 10%; }
/* Practical usage */
/* Icon before text */
.icon-text {
display: inline-flex;
align-items: center;
gap: 8px;
}
.icon {
vertical-align: middle;
}
/* Table cell */
td {
vertical-align: middle; /* Text centered in the cell */
}
/* Image alignment */
img {
vertical-align: middle; /* Image centered with the text */
}
/* Superscript */
sup {
vertical-align: super;
font-size: 0.7em;
}
/* Subscript */
sub {
vertical-align: sub;
font-size: 0.7em;
}
Practice: Link Styling
/* Modern link styling */
a {
color: #3498db;
text-decoration: none;
position: relative;
transition: color 0.3s ease;
}
a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #3498db;
transition: width 0.3s ease;
}
a:hover {
color: #2980b9;
}
a:hover::after {
width: 100%;
}
/* Link in text */
.article a {
color: #3498db;
text-decoration: underline;
text-decoration-style: dotted;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: all 0.3s ease;
}
.article a:hover {
color: #2980b9;
text-decoration-style: solid;
text-decoration-thickness: 2px;
}
/* Button-like link */
.cta-link {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
text-decoration: none;
border-radius: 5px;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
transition: all 0.3s ease;
}
.cta-link:hover {
background-color: #2980b9;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}
.cta-link::after {
display: none;
}
<div class="article">
<p>This is a <a href="#">paragraph with a link</a> that has an attractive hover decoration.</p>
<a href="#" class="cta-link">Call to Action</a>
</div>
Practice: Heading Styles
/* Modern heading styles */
.heading {
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.02em;
color: #1a1a1a;
text-transform: none;
}
/* Heading with gradient */
.heading-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 3rem;
font-weight: 800;
}
/* Heading with line */
.heading-line {
position: relative;
padding-bottom: 15px;
}
.heading-line::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #3498db, #9b59b6);
border-radius: 2px;
}
/* Centered heading line */
.heading-center::after {
left: 50%;
transform: translateX(-50%);
}
/* Heading with shadow */
.heading-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
color: #2c3e50;
}
/* Heading uppercase */
.heading-uppercase {
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 800;
}
/* Small heading */
.heading-small {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #3498db;
font-weight: 600;
margin-bottom: 10px;
}
/* Responsive heading */
.heading-responsive {
font-size: clamp(2rem, 5vw, 4rem);
line-height: 1.1;
letter-spacing: -0.03em;
}
<h1 class="heading heading-gradient">Heading with a Gradient</h1>
<h2 class="heading heading-line">Heading with an Underline</h2>
<h3 class="heading heading-center heading-line">Centered Heading with a Line</h3>
<h4 class="heading heading-shadow">Heading with a Shadow</h4>
<h5 class="heading heading-small">Small Subheading</h5>
<h1 class="heading heading-responsive">Responsive Heading</h1>
Practice: Responsive Text
/* Responsive text system */
:root {
--text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
--text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);
--text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
--text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.125rem);
--text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.75rem);
--text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.5rem);
--text-5xl: clamp(3rem, 2.25rem + 3.75vw, 4.5rem);
}
/* Base text */
body {
font-size: var(--text-base);
line-height: 1.6;
color: #333;
}
/* Responsive headings */
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }
/* Responsive container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 3rem);
}
/* Fluid typography */
.fluid-text {
font-size: clamp(1rem, 2.5vw, 1.5rem);
line-height: 1.6;
text-align: justify;
}
/* Responsive text with media queries */
@media (max-width: 768px) {
.heading-responsive {
font-size: var(--text-3xl);
letter-spacing: -0.02em;
}
.text-mobile-center {
text-align: center;
}
.text-mobile-small {
font-size: var(--text-sm);
}
}
/* Text that scales */
.scaling-text {
font-size: max(16px, min(2vw, 24px));
line-height: 1.5;
}
<div class="container">
<h1 class="heading-responsive">Responsive Main Heading</h1>
<p class="fluid-text">
Paragraph with a text size that follows the viewport width.
The font size changes smoothly from small to large
depending on the screen size, without needing media queries.
</p>
<h2>Subheading</h2>
<p>
Content with responsive typography makes a website pleasant
to read on all devices, from mobile to desktop.
</p>
</div>
Summary
CSS text properties include text-align for alignment, text-decoration for decorative lines, text-transform for uppercase/lowercase, text-indent for indentation, letter-spacing and word-spacing for spacing, text-shadow for shadows, text-overflow for overflowing text, white-space for whitespace, overflow-wrap and word-break for word breaking, and vertical-align for vertical alignment. Combining these properties enables professional and responsive typography design.