HTML and CSS Text Style Properties

Text styling includes first-line indentation, horizontal alignment, text decoration, case handling, line height, and letter spacing.
::: normal-demo First-line Indentation

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p {
            font-size: 14px;
            text-indent: 28px;
        }
    </style>
</head>
<body>
    <h3>Ode to the Lotus</h3>
    <p>Flowers of land and water, grasses and trees, are numerous in their loveliness. Among them, only Tao Yuanming of the Jin Dynasty loved chrysanthemums alone. Since the Tang dynasty, common people have greatly admired peonies. I alone love the lotus for emerging from mud without being stained, washed by clear waves without appearing妖 (sophisticated), straight inside and out, not branching or trailing, its fragrance spreading far to make it even more pure, standing upright and clean, beautiful to view from afar but not suitable for close handling.</p>
    <p>In my opinion, chrysanthemums are the flowers of seclusion; peonies are the flowers of wealth; lotus is the flower of gentlemen. Alas! Love for chrysanthemums, few have heard of it since Tao's time; love for lotuses, who else shares this sentiment with me? Love for peonies, surely many exist.</p>
</body>
</html>

:::

text-align (Horizontal Alignment)

::: normal-demo Horizontal Alignment

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 { text-align: left; }
        #p2 { text-align: center; }
        #p3 { text-align: right; }
    </style>
</head>
<body>
    <p id="p1"><strong>Left Alignment</strong>: Study hard every day.</p>
    <p id="p2"><strong>Center Alignment</strong>: Study hard every day.</p>
    <p id="p3"><strong>Right Alignment</strong>: Study hard every day.</p>
</body>
</html>

:::

text-decoration (Text Decoration)

::: normal-demo Text Decoration

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 { text-decoration: underline; }
        #p2 { text-decoration: line-through; }
        #p3 { text-decoration: overline; }
    </style>
</head>
<body>
    <p id="p1">This is an "underline" effect.</p>
    <p id="p2">This is a "strikethrough" effect.</p>
    <p id="p3">This is an "overline" effect.</p>
</body>
</html>

:::

text-transform (Case Handling)

::: normal-demo Case Handling

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 { text-transform: uppercase; }
        #p2 { text-transform: lowercase; }
        #p3 { text-transform: capitalize; }
    </style>
</head>
<body>
    <p id="p1">ROME WAS'T BUILT IN A DAY.</p>
    <p id="p2">rome was't built in a day.</p>
    <p id="p3">Rome was't Built In A Day.</p>
</body>
</html>

:::

line-height (Line Height)

::: normal-demo Line Height

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 { line-height: 15px; }
        #p2 { line-height: 20px; }
        #p3 { line-height: 25px; }
    </style>
</head>
<body>
    <p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>

:::

letter-spacing (Letter Spacing)

::: normal-demo Letter Spacing

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 { letter-spacing: 0px; }
        #p2 { letter-spacing: 3px; }
        #p3 { letter-spacing: 5px; }
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day. 罗马不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day. 罗马不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day. 罗马不是一天建成的。</p>
</body>
</html>

:::

word-spacing (Word Spacing)

::: normal-demo Word Spacing

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 { word-spacing: 0px; }
        #p2 { word-spacing: 3px; }
        #p3 { word-spacing: 5px; }
    </style>
</head>
<body>
<p id="p1">Rome was't built in a day. 罗马不是一天建成的。</p><hr/>
<p id="p2">Rome was't built in a day. 罗马不是一天建成的。</p><hr/>
<p id="p3">Rome was't built in a day. 罗马不是一天建成的。</p>
</body>
</html>

:::