CSS Text

Introduction to CSS Text Properties

CSS provides a wide range of properties to control the appearance and formatting of text. These properties help you create readable and visually appealing text content.

1. Text Color

The color property sets the color of text content.

/* Named colors */
.text-color {
    color: red;
    color: blue;
    color: green;
}

/* Hexadecimal colors */
.hex-color {
    color: #ff0000;  /* Red */
    color: #00ff00;  /* Green */
    color: #0000ff;  /* Blue */
}

/* RGB colors */
.rgb-color {
    color: rgb(255, 0, 0);    /* Red */
    color: rgb(0, 255, 0);    /* Green */
    color: rgb(0, 0, 255);    /* Blue */
}

/* RGBA colors (with opacity) */
.rgba-color {
    color: rgba(255, 0, 0, 0.5);  /* Semi-transparent red */
    color: rgba(0, 0, 0, 0.7);    /* Semi-transparent black */
}

/* HSL colors */
.hsl-color {
    color: hsl(0, 100%, 50%);     /* Red */
    color: hsl(120, 100%, 50%);   /* Green */
    color: hsl(240, 100%, 50%);   /* Blue */
}

2. Text Alignment

The text-align property controls how text is aligned within its container.

/* Basic text alignment */
.text-align {
    text-align: left;      /* Default alignment */
    text-align: right;     /* Right alignment */
    text-align: center;    /* Center alignment */
    text-align: justify;   /* Justified text */
}

/* Text alignment with direction */
.text-direction {
    direction: rtl;        /* Right-to-left text */
    text-align: start;     /* Aligns to start of text direction */
    text-align: end;       /* Aligns to end of text direction */
}

/* Text alignment with line breaks */
.text-break {
    text-align: center;
    word-break: break-all;     /* Break words at any character */
    overflow-wrap: break-word; /* Break words only when necessary */
}

3. Text Decoration

The text-decoration property adds decorative lines to text.

/* Basic text decorations */
.text-decoration {
    text-decoration: none;         /* No decoration */
    text-decoration: underline;    /* Underlined text */
    text-decoration: overline;     /* Line above text */
    text-decoration: line-through; /* Strikethrough text */
}

/* Text decoration styles */
.decoration-style {
    text-decoration-line: underline;
    text-decoration-style: solid;  /* Solid line */
    text-decoration-color: red;    /* Red line */
    text-decoration-thickness: 2px; /* 2px thick line */
}

/* Multiple decorations */
.multiple-decorations {
    text-decoration: underline overline;  /* Both under and over */
    text-decoration: underline dotted;    /* Dotted underline */
    text-decoration: wavy underline blue; /* Blue wavy underline */
}

4. Text Transform

The text-transform property changes the case of text.

/* Text case transformations */
.text-transform {
    text-transform: uppercase;    /* All caps */
    text-transform: lowercase;    /* All lowercase */
    text-transform: capitalize;   /* First letter caps */
    text-transform: none;        /* No transformation */
}

/* Text transform with spacing */
.transform-spacing {
    text-transform: uppercase;
    letter-spacing: 2px;        /* Add space between letters */
}

/* First letter only */
.first-letter {
    text-transform: none;
}
.first-letter::first-letter {
    text-transform: uppercase;
}

5. Line Height

The line-height property controls the space between lines of text.

/* Basic line heights */
.line-height {
    line-height: 1.5;        /* 1.5 times the font size */
    line-height: 20px;       /* Fixed 20px line height */
    line-height: 150%;       /* 150% of the font size */
    line-height: normal;     /* Browser default */
}

/* Line height with font size */
.line-height-font {
    font-size: 16px;
    line-height: 1.6;        /* 25.6px line height */
}

/* Line height for headings */
h1 {
    line-height: 1.2;        /* Tighter for headings */
}

/* Line height for paragraphs */
p {
    line-height: 1.6;        /* More space for readability */
}

6. Letter and Word Spacing

Control the spacing between letters and words.

/* Letter spacing */
.letter-spacing {
    letter-spacing: 2px;     /* Add space between letters */
    letter-spacing: -1px;    /* Reduce space between letters */
    letter-spacing: 0.2em;   /* Relative to font size */
}

/* Word spacing */
.word-spacing {
    word-spacing: 4px;       /* Add space between words */
    word-spacing: -2px;      /* Reduce space between words */
    word-spacing: 0.5em;     /* Relative to font size */
}

/* Combined spacing */
.text-spacing {
    letter-spacing: 1px;
    word-spacing: 3px;
    line-height: 1.6;
}

7. Text Indentation

The text-indent property controls the indentation of the first line.

/* Basic indentation */
.text-indent {
    text-indent: 20px;       /* Fixed indentation */
    text-indent: 2em;        /* Relative to font size */
    text-indent: 5%;         /* Relative to container width */
}

/* Negative indentation */
.hanging-indent {
    text-indent: -20px;      /* Hanging indent */
    padding-left: 20px;      /* Compensate for indent */
}

/* First paragraph indentation */
p:first-of-type {
    text-indent: 2em;        /* Indent first paragraph */
}

8. White Space Handling

The white-space property controls how white space and line breaks are handled.

/* White space handling */
.white-space {
    white-space: normal;     /* Default wrapping */
    white-space: nowrap;     /* No wrapping */
    white-space: pre;        /* Preserve whitespace */
    white-space: pre-wrap;   /* Preserve with wrapping */
    white-space: pre-line;   /* Preserve line breaks */
}

/* Text overflow */
.text-overflow {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Add ... for overflow */
}

/* Multi-line ellipsis */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* Show 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

9. Text Shadow

Add shadow effects to text using the text-shadow property.

/* Basic text shadow */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Multiple shadows */
.multiple-shadows {
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.3),
        -2px -2px 4px rgba(255, 255, 255, 0.3);
}

/* Colorful shadow */
.color-shadow {
    color: #fff;
    text-shadow: 
        0 0 5px #ff0000,
        0 0 10px #00ff00,
        0 0 15px #0000ff;
}

/* Outline effect */
.outline-text {
    color: white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
}

10. Writing Mode

Control the direction and orientation of text.

/* Writing modes */
.writing-mode {
    writing-mode: horizontal-tb;  /* Default horizontal */
    writing-mode: vertical-rl;    /* Vertical right-to-left */
    writing-mode: vertical-lr;    /* Vertical left-to-right */
}

/* Text orientation */
.text-orientation {
    writing-mode: vertical-rl;
    text-orientation: mixed;      /* Default mixed orientation */
    text-orientation: upright;    /* Upright characters */
    text-orientation: sideways;   /* Sideways orientation */
}

/* Direction */
.text-direction {
    direction: ltr;              /* Left to right */
    direction: rtl;              /* Right to left */
    unicode-bidi: bidi-override; /* Override direction */
}