CSS Text Styling - CSS Tutorial

CSS provides a range of properties of style text, including color, alignment, decoration, transformation, and more.

Text Color

The color property sets the text color.

p {
    color: red;
}

CSS
​x
 
p {    color: red;}

Text Alignment

The text-align property aligns text horizontally.

p {
    text-align: center;
}

CSS
 
p {    text-align: center;}

Text Decoration

The text-decoration property adds decorations like underline, overline, or line-through.

a {
    text-decoration: none;
}

CSS
 
a {    text-decoration: none;}

Text Transform

The text-transform property controls the capitalization of text.

p {
    text-transform: uppercase;
}

CSS
 
p {    text-transform: uppercase;}

Text Indent

The text-indent property indents the first line of text.

p {
    text-indent: 20px;
}

CSS
 
p {    text-indent: 20px;}

Letter Spacing

The letter-spacing property adjusts the spacing between letters.

p {
    letter-spacing: 2px;
}

CSS
 
p {    letter-spacing: 2px;}

Word Spacing

The word-spacing property adjusts the spacing between words.

p {
    word-spacing: 5px;
}

CSS
 
p {    word-spacing: 5px;}

Text Shadow

The text-shadow property adds shadow to text.

p {
    text-shadow: 2px 2px 5px gray;
}

CSS
 
p {    text-shadow: 2px 2px 5px gray;}

White Space

The white-space property controls how white space inside an element is handled.

p {
    white-space: nowrap;
}

CSS
 
p {    white-space: nowrap;}

CSS Text Styling Example Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Styling Example</title>
    <style>
        p {
            color: red;
            text-align: center;
            text-decoration: underline;
            text-transform: uppercase;
            text-indent: 20px;
            letter-spacing: 2px;
            word-spacing: 5px;
            text-shadow: 2px 2px 5px gray;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <p>This is styled text.</p>
</body>
</html>

HTML/CSS
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>CSS Text Styling Example</title>    <style>        p {            color: red;            text-align: center;            text-decoration: underline;            text-transform: uppercase;            text-indent: 20px;            letter-spacing: 2px;            word-spacing: 5px;            text-shadow: 2px 2px 5px gray;            white-space: nowrap;        }    </style></head><body>    <p>This is styled text.</p></body></html>