Dekorasi Teks

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 22 dari 76.

Dalam CSS, properti text-decoration digunakan untuk menambahkan atau menghapus dekorasi pada teks di dalam elemen HTML. Properti ini memungkinkan kamu menambahkan garis bawah, garis atas, atau coretan pada teks untuk memberikan penekanan visual atau menunjukkan status tertentu.

Nilai umum untuk text-decoration meliputi:

none: Menghapus semua dekorasi teks. Ini adalah nilai bawaan.

underline: Menambahkan garis bawah pada teks.

overline: Menambahkan garis di atas teks.

line-through: Menambahkan garis di tengah teks (coret). Biasanya digunakan untuk menunjukkan teks yang telah dihapus, disingkirkan, atau tidak lagi berlaku.

Contohnya:

a {
    text-decoration: none;
}

.underline {
    text-decoration: underline;
}

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

Tantangan

Mudah

Kamu diberi dokumen HTML dengan paragraf (<p>) yang berisi elemen anchor (<a>), dan elemen div (<div>). Tugasmu adalah menggunakan properti text-decoration untuk mengatur gaya elemen-elemen ini. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan semua elemen <a>. Atur text-decoration menjadi none untuk menghapus garis bawah bawaan.
Tambahkan atribut class dengan nilai "underline" ke elemen <p>.
Tulis aturan CSS yang menargetkan semua elemen dengan class underline. Atur text-decoration menjadi underline.
Tambahkan atribut class dengan nilai "strike" ke elemen <div>.
Tulis aturan CSS yang menargetkan semua elemen dengan class strike. Atur text-decoration menjadi line-through.

Coba sendiri

<html>
<head>
    <title>Text Decoration</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <div>This is a division.</div>
</body>
</html>