Dekorasi Teks

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

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

Nilai umum untuk text-decoration meliputi:

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

underline: Menambahkan garis bawah pada teks.

overline: Menambahkan garis di atas teks.

line-through: Menambahkan garis di tengah teks (coret).

Contoh:

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>), serta sebuah division (<div>). Tugasmu adalah menggunakan property text-decoration untuk menata 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>