CSS Text Properties

Overview

Text properties control the appearance and formatting of text content.

Font Properties

Font Family

.text-element {
    font-family: Arial, sans-serif;
    font-family: "Times New Roman", serif;
    font-family: "Courier New", monospace;
    font-family: Georgia, "Times New Roman", Times, serif;
}

Font Size

.text-element {
    font-size: 16px;
    font-size: 1em; /* Relative to parent */
    font-size: 1.2rem; /* Relative to root */
    font-size: 120%; /* Percentage of parent */
    font-size: clamp(14px, 2vw, 18px); /* Responsive */
}

Font Weight

.text-element {
    font-weight: normal;
    font-weight: bold;
    font-weight: 700; /* Numeric value */
    font-weight: lighter;
    font-weight: bolder;
}

Font Style

.text-element {
    font-style: normal;
    font-style: italic;
    font-style: oblique;
}

Text Alignment

Horizontal Alignment

.text-element {
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;
}

Vertical Alignment

.text-element {
    vertical-align: baseline;
    vertical-align: top;
    vertical-align: middle;
    vertical-align: bottom;
}

Text Decoration

.text-element {
    text-decoration: none;
    text-decoration: underline;
    text-decoration: overline;
    text-decoration: line-through;
    text-decoration: underline overline; /* Multiple decorations */
}

Text Transform

.text-element {
    text-transform: none;
    text-transform: uppercase;
    text-transform: lowercase;
    text-transform: capitalize;
}

Text Spacing

Letter Spacing

.text-element {
    letter-spacing: normal;
    letter-spacing: 2px;
    letter-spacing: 0.1em;
}

Word Spacing

.text-element {
    word-spacing: normal;
    word-spacing: 4px;
    word-spacing: 0.2em;
}

Line Height

.text-element {
    line-height: 1.2; /* Unitless relative to font size */
    line-height: 1.5em; /* Relative to font size */
    line-height: 24px; /* Fixed value */
    line-height: 150%; /* Percentage */
}

Text Color

.text-element {
    color: #333;
    color: rgb(51, 51, 51);
    color: rgba(51, 51, 51, 0.8);
    color: hsl(0, 0%, 20%);
    color: hsla(0, 0%, 20%, 0.8);
}

Text Shadow

.text-element {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 1px 1px 2px #000, 2px 2px 4px #666; /* Multiple shadows */
}

Common Patterns

Heading Styles

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.6em;
}

Paragraph Styles

p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1em;
    color: #555;
}

Link Styles

a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

a:visited {
    color: #6c757d;
}

Text Utilities

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-weight-normal { font-weight: normal; }
.font-weight-bold { font-weight: bold; }

.text-muted { color: #6c757d; }
.text-primary { color: #007bff; }