|

CSS 7 💻 line height and text decoration

Bykronos 





Line height and text decoration are essential CSS properties for controlling the spacing and visual styling of text. They enhance readability and allow you to add decorative elements to your text.










line-height





The line-height property specifies the space between lines of text. It’s one of the most important properties for readability.





p {
    line-height: 1.5em; /* Adjust for desired spacing */
}





Values





Value TypeExampleDescription
Number1.5Multiplied by the current font size (recommended)
Length24pxFixed pixel value
Percentage150%Percentage of the current font size
KeywordnormalBrowser default (usually 1.2)





/* Different line-height values */
.lh-number {
    line-height: 1.5; /* 1.5 × font size — recommended */
}

.lh-pixel {
    line-height: 30px; /* Fixed pixel value */
}

.lh-percent {
    line-height: 150%; /* 150% of font size */
}

.lh-normal {
    line-height: normal; /* Browser default ~1.2 */
}

.lh-tight {
    line-height: 1.2; /* Tighter spacing */
}

.lh-loose {
    line-height: 2.0; /* Looser spacing */
}










text-decoration





The text-decoration property adds decorative lines to text. It’s commonly used for links, headings, and emphasizing content.





h1 {
    text-decoration: underline; /* Underlines Headers 1-3 */
}

h2 {
    text-decoration: overline dotted green;
}

h3 {
    text-decoration: overline underline purple;
}





Values





ValueDescriptionExample
noneNo decoration (default)text-decoration: none;
underlineLine below the texttext-decoration: underline;
overlineLine above the texttext-decoration: overline;
line-throughLine through the texttext-decoration: line-through;
underline overlineMultiple decorationstext-decoration: underline overline;





Style and Color





You can also specify the style and color of the decoration.





/* Style: solid (default), dotted, dashed, wavy, double */
.text-decoration-style {
    text-decoration: underline dotted red;
    text-decoration: overline wavy blue;
    text-decoration: line-through double green;
}

/* Separate properties */
.text-decoration-separate {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: #ff6b6b;
}





StyleDescriptionExample
solidSingle solid line (default)text-decoration: underline solid red;
dottedDotted linetext-decoration: underline dotted blue;
dashedDashed linetext-decoration: underline dashed green;
wavyWavy linetext-decoration: underline wavy purple;
doubleDouble linetext-decoration: underline double orange;










Complete Example





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height and text-decoration</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            line-height: 1.6;
        }

        h1 {
            color: #007bff;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }

        h2 {
            color: #28a745;
            border-left: 4px solid #28a745;
            padding-left: 15px;
            margin-top: 30px;
        }

        section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin: 20px 0;
        }

        .demo-box {
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            background: #e9ecef;
        }

        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .grid-2 .demo-box {
            border-left: 4px solid #28a745;
        }

        .code-block {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 8px;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.8;
            margin: 10px 0;
        }

        .reference-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .reference-table th,
        .reference-table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }

        .reference-table th {
            background: #007bff;
            color: white;
        }

        .reference-table tr:nth-child(even) {
            background: #f8f9fa;
        }

        /* ====== LINE HEIGHT DEMOS ====== */
        .lh-tight {
            line-height: 1.2;
        }

        .lh-normal {
            line-height: 1.6;
        }

        .lh-loose {
            line-height: 2.5;
        }

        .lh-pixel {
            line-height: 30px;
        }

        .lh-percent {
            line-height: 200%;
        }

        /* ====== TEXT DECORATION DEMOS ====== */
        .td-none {
            text-decoration: none;
        }

        .td-underline {
            text-decoration: underline;
        }

        .td-overline {
            text-decoration: overline;
        }

        .td-line-through {
            text-decoration: line-through;
        }

        .td-combined {
            text-decoration: underline overline;
        }

        .td-solid {
            text-decoration: underline solid #007bff;
        }

        .td-dotted {
            text-decoration: underline dotted #28a745;
        }

        .td-dashed {
            text-decoration: underline dashed #dc3545;
        }

        .td-wavy {
            text-decoration: underline wavy #ffc107;
        }

        .td-double {
            text-decoration: underline double #6c5ce7;
        }

        .td-underline-color {
            text-decoration: underline #dc3545;
        }

        .td-overline-dotted {
            text-decoration: overline dotted #28a745;
        }

        .td-overline-underline {
            text-decoration: overline underline #6c5ce7;
        }

        .td-wavy-underline {
            text-decoration: underline wavy #dc3545;
        }

        .td-no-link {
            text-decoration: none;
        }

        /* ====== COMBINED DEMOS ====== */
        .combined-demo {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin: 10px 0;
        }

        .combined-demo h3 {
            margin-top: 0;
        }
    </style>
</head>
<body>

    <h1>line-height and text-decoration</h1>

    <!-- ====== 1. LINE HEIGHT ====== -->
    <section>
        <h2>1. line-height</h2>

        <div class="grid-2">
            <div class="demo-box lh-tight">
                <strong>line-height: 1.2 (Tight)</strong><br>
                This is the first line of text.<br>
                This is the second line of text.<br>
                This is the third line of text.
            </div>

            <div class="demo-box lh-normal">
                <strong>line-height: 1.6 (Normal)</strong><br>
                This is the first line of text.<br>
                This is the second line of text.<br>
                This is the third line of text.
            </div>

            <div class="demo-box lh-loose">
                <strong>line-height: 2.5 (Loose)</strong><br>
                This is the first line of text.<br>
                This is the second line of text.<br>
                This is the third line of text.
            </div>

            <div class="demo-box lh-pixel">
                <strong>line-height: 30px (Fixed)</strong><br>
                This is the first line of text.<br>
                This is the second line of text.<br>
                This is the third line of text.
            </div>

            <div class="demo-box lh-percent">
                <strong>line-height: 200% (Percentage)</strong><br>
                This is the first line of text.<br>
                This is the second line of text.<br>
                This is the third line of text.
            </div>
        </div>

        <div class="code-block">
            /* Number (recommended) */
            line-height: 1.5;  /* 1.5 × font size */

            /* Pixel */
            line-height: 30px;

            /* Percentage */
            line-height: 150%;

            /* Keyword */
            line-height: normal;  /* Browser default ~1.2 */
        </div>
    </section>

    <!-- ====== 2. TEXT DECORATION ====== -->
    <section>
        <h2>2. text-decoration</h2>

        <h3>Decoration Lines</h3>
        <div class="grid-2">
            <div class="demo-box td-none"><strong>text-decoration:</strong> none (no decoration)</div>
            <div class="demo-box td-underline"><strong>text-decoration:</strong> underline</div>
            <div class="demo-box td-overline"><strong>text-decoration:</strong> overline</div>
            <div class="demo-box td-line-through"><strong>text-decoration:</strong> line-through</div>
            <div class="demo-box td-combined"><strong>text-decoration:</strong> underline overline</div>
        </div>

        <h3>Decoration Styles & Colors</h3>
        <div class="grid-2">
            <div class="demo-box td-solid"><strong>text-decoration:</strong> underline solid blue</div>
            <div class="demo-box td-dotted"><strong>text-decoration:</strong> underline dotted green</div>
            <div class="demo-box td-dashed"><strong>text-decoration:</strong> underline dashed red</div>
            <div class="demo-box td-wavy"><strong>text-decoration:</strong> underline wavy yellow</div>
            <div class="demo-box td-double"><strong>text-decoration:</strong> underline double purple</div>
        </div>

        <h3>Multiple Decorations</h3>
        <div class="grid-2">
            <div class="demo-box td-overline-dotted">
                <strong>text-decoration:</strong> overline dotted green
            </div>
            <div class="demo-box td-overline-underline">
                <strong>text-decoration:</strong> overline underline purple
            </div>
            <div class="demo-box td-wavy-underline">
                <strong>text-decoration:</strong> underline wavy red
            </div>
        </div>

        <div class="code-block">
            /* Basic decorations */
            text-decoration: none;
            text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through;
            text-decoration: underline overline;

            /* With style and color */
            text-decoration: underline solid blue;
            text-decoration: underline dotted green;
            text-decoration: underline dashed red;
            text-decoration: underline wavy yellow;
            text-decoration: underline double purple;

            /* Multiple decorations */
            text-decoration: overline dotted green;
            text-decoration: overline underline purple;
        </div>
    </section>

    <!-- ====== 3. HEADER EXAMPLES ====== -->
    <section>
        <h2>3. Header Examples (from the lesson)</h2>

        <div class="demo-box">
            <h1 style="text-decoration: underline; color: #007bff;">
                This is a Header 1 (underline)
            </h1>
            <h2 style="text-decoration: overline dotted green; color: #28a745;">
                This is a Header 2 (overline dotted green)
            </h2>
            <h3 style="text-decoration: overline underline purple; color: #6c5ce7;">
                This is a Header 3 (overline underline purple)
            </h3>
        </div>

        <div class="code-block">
            h1 {
                text-decoration: underline;  /* Underline only */
            }

            h2 {
                text-decoration: overline dotted green;  /* Overline dotted green */
            }

            h3 {
                text-decoration: overline underline purple;  /* Overline and underline purple */
            }
        </div>
    </section>

    <!-- ====== 4. PARAGRAPH EXAMPLES ====== -->
    <section>
        <h2>4. Paragraph Example (line-height)</h2>

        <div class="demo-box">
            <p style="line-height: 1.6; color: #333;">
                <strong>line-height: 1.6</strong><br>
                This is a paragraph with some example text. Notice how the lines are spaced out according to the `line-height` property value set to 1.6. You can change this value to adjust the spacing as needed. Proper line height improves readability and makes your content more accessible.
            </p>
            <p style="line-height: 2.0; color: #333;">
                <strong>line-height: 2.0</strong><br>
                This is a paragraph with a looser line height. The lines are more spaced out, which can be useful for certain design styles or when you want more breathing room between lines of text.
            </p>
            <p style="line-height: 1.2; color: #333;">
                <strong>line-height: 1.2</strong><br>
                This is a paragraph with a tighter line height. The lines are closer together, which can be useful for headings or when you want to save vertical space.
            </p>
        </div>
    </section>

    <!-- ====== 5. COMBINED EXAMPLES ====== -->
    <section>
        <h2>5. Combined Examples</h2>

        <div class="combined-demo">
            <h3 style="text-decoration: underline wavy #007bff; line-height: 1.8;">
                Wavy Underline Heading
            </h3>
            <p style="line-height: 1.6; font-size: 1rem;">
                This paragraph has a <span style="text-decoration: line-through dashed #dc3545;">strikethrough</span> and
                <span style="text-decoration: underline wavy #28a745;">wavy underline</span> for emphasis.
                You can combine different <span style="text-decoration: underline overline dotted #6c5ce7;">decorations</span>
                on different parts of your text.
            </p>
        </div>

        <div class="combined-demo" style="background: #1e1e1e; color: #d4d4d4;">
            <h3 style="text-decoration: underline wavy #ffc107; color: #ffc107; line-height: 1.8;">
                Dark Theme Example
            </h3>
            <p style="line-height: 1.8; font-size: 1rem;">
                <span style="text-decoration: underline solid #4ecdc4;">Underlined</span> text with
                <span style="text-decoration: overline dotted #ff6b6b;">overlined</span> text and
                <span style="text-decoration: line-through wavy #ffc107;">strikethrough</span>.
            </p>
        </div>
    </section>

    <!-- ====== 6. LINK EXAMPLE ====== -->
    <section>
        <h2>6. Links (text-decoration)</h2>

        <div class="demo-box">
            <p>
                <a href="#" style="text-decoration: none; color: #007bff;">
                    Link with no underline (text-decoration: none)
                </a>
                <br><br>
                <a href="#" style="text-decoration: underline; color: #28a745;">
                    Link with underline (text-decoration: underline)
                </a>
                <br><br>
                <a href="#" style="text-decoration: underline wavy #dc3545; color: #dc3545;">
                    Link with wavy underline (text-decoration: underline wavy red)
                </a>
            </p>
        </div>

        <div class="code-block">
            /* Remove underline from links */
            a {
                text-decoration: none;
            }

            /* Custom link underline */
            a:hover {
                text-decoration: underline wavy #007bff;
            }
        </div>
    </section>

    <!-- ====== REFERENCE TABLES ====== -->
    <section>
        <h2>7. Reference Tables</h2>

        <h3>line-height Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value Type</th>
                <th>Example</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><strong>Number</strong></td>
                <td><code>1.5</code></td>
                <td>Multiplied by font size — <strong>recommended</strong></td>
            </tr>
            <tr>
                <td><strong>Length</strong></td>
                <td><code>24px</code></td>
                <td>Fixed pixel value</td>
            </tr>
            <tr>
                <td><strong>Percentage</strong></td>
                <td><code>150%</code></td>
                <td>Percentage of font size</td>
            </tr>
            <tr>
                <td><strong>Keyword</strong></td>
                <td><code>normal</code></td>
                <td>Browser default (~1.2)</td>
            </tr>
        </table>

        <h3>text-decoration Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>none</code></td>
                <td>No decoration (default)</td>
                <td><code>text-decoration: none;</code></td>
            </tr>
            <tr>
                <td><code>underline</code></td>
                <td>Line below the text</td>
                <td><code>text-decoration: underline;</code></td>
            </tr>
            <tr>
                <td><code>overline</code></td>
                <td>Line above the text</td>
                <td><code>text-decoration: overline;</code></td>
            </tr>
            <tr>
                <td><code>line-through</code></td>
                <td>Line through the text</td>
                <td><code>text-decoration: line-through;</code></td>
            </tr>
            <tr>
                <td><code>underline overline</code></td>
                <td>Multiple decorations</td>
                <td><code>text-decoration: underline overline;</code></td>
            </tr>
        </table>

        <h3>text-decoration Styles</h3>
        <table class="reference-table">
            <tr>
                <th>Style</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
            <tr>
                <td><code>solid</code></td>
                <td>Single solid line (default)</td>
                <td><code>text-decoration: underline solid red;</code></td>
            </tr>
            <tr>
                <td><code>dotted</code></td>
                <td>Dotted line</td>
                <td><code>text-decoration: underline dotted blue;</code></td>
            </tr>
            <tr>
                <td><code>dashed</code></td>
                <td>Dashed line</td>
                <td><code>text-decoration: underline dashed green;</code></td>
            </tr>
            <tr>
                <td><code>wavy</code></td>
                <td>Wavy line</td>
                <td><code>text-decoration: underline wavy purple;</code></td>
            </tr>
            <tr>
                <td><code>double</code></td>
                <td>Double line</td>
                <td><code>text-decoration: underline double orange;</code></td>
            </tr>
        </table>
    </section>

</body>
</html>










Quick Reference





PropertyDescriptionCommon Values
line-heightSpace between lines1.5, 1.6, 24px, 150%, normal
text-decorationAdds decoration to textnone, underline, overline, line-through
text-decoration-styleStyle of the decorationsolid, dotted, dashed, wavy, double
text-decoration-colorColor of the decorationred, #ff0000, rgb(255,0,0)










Best Practices





✅ Do This:





/* Use unitless values for line-height */
body {
    line-height: 1.6;  /* Recommended for body text */
}

/* Use line-height for headings */
h1 { line-height: 1.2; }
h2 { line-height: 1.3; }
p  { line-height: 1.6; }

/* Remove underline from links when not needed */
a { text-decoration: none; }

/* Add custom underline on hover */
a:hover { text-decoration: underline; }





❌ Don’t Do This:





/* Don't use fixed pixel line-height for body text */
body { line-height: 24px; }  /* Use unitless instead */

/* Don't use line-height: normal for body text (too tight) */
body { line-height: normal; }  /* ~1.2 is too tight for readability */

/* Don't overuse text-decoration */
text-decoration: underline;  /* Use sparingly for emphasis */










Pro Tip: Use unitless numbers for line-height (e.g., 1.6) because they scale with the font size and work well with inheritance. For body text, 1.6 is often considered optimal for readability. For headings, tighter values like 1.2–1.3 work better. Use text-decoration sparingly — underline for links, overline for headings, and line-through for deleted content!








Stop using slow, ad-bloated tool sites! 🤮





🔎 Search “KandZ Tools” on Google to use many professional utilities for free.





KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)





⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free





🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!