CSS 7 💻 line height and text decoration

line-height → specifies the space between the text lines
it can take a number, a length, a percentage and the keyword normal
it sets the line-height to 1.5em
text-decoration → adds decoration to the text
it can take underline, overline then dotted, wavy, solid, double and then color
it sets h2 to overline dotted and green color
it sets h3 to overline underline and purple color

7 – line-height and text-decoration

<h1>This is a Header 1</h1>
<h2>This is a Header 2</h2>
<h3>This is a Header 3</h3>
<p>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.5em. You can change this value to adjust the spacing as needed.</p>

body {
        font-family: Arial, sans-serif; 
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

p {
    line-height: 1.5em; /* Adjust the value as needed for desired spacing */
    font-weight: normal;
    color: #333;
    }
h1 {
        text-decoration: underline; /* Underlines Headers 1-3 */
        font-weight: bold;
    }
h2{
    text-decoration: overline dotted green;
}

h3{
    text-decoration: overline underline purple;
}

---

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!