Fungsi Text-decoration pada CSS

CSS adalah suatu bahasa dimana bertugas untuk mempercantik tampilan suatu website. Pada CSS ini banyak sekali fitur yang dapat kalian pergunakan untuk mempercantik tampilan website. Salah satunya yang akan kita bahas adalah text-decoration. Ya, kita akan membahas bagaimana cara kerja fungsi text-decoration pada CSS.

Text-decoration ini bertugas untuk mengatur efek garis pada suatu kata didalam HTML. Seperti contohnya apabila kalian ingin memberikan efek garis di bawah kalimat, maka perintah text-decoration ini yang akan kalian pergunakan.

Text-decoration ini mempunyai 3 nilai. Nilai pertama adalah underline, kedua ada line-through dan yang terakhir adalah overline. Seperti apa bentuknya ? dan bagaimana cara menggunakanya ?. Kalian bisa ikuti contoh berikut ini.

Pertama kalian tentu harus membuat tampilan websitenya terlebih dahulu. Untuk mempersingkat waktu kalian bisa langsung menyalin contoh code berikut ini.

text.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>

<h1> Paragraf pertama . </h1> <br>
<h2> Paragraf kedua . </h2> <br>
<h3> Paragraf ketiga </h3> <br>

</body>
</html>

style.css

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Setelah sudah kalian simpan file tersebut dengan masing-masing formatnya. Dan jangan lupa untuk menyimpan kedua file tersebut dalam satu folder yang sama agar fungsinya dapat berjalan dengan lancar.

Untuk melihat hasilnya kalian bisa buka file htmlnya pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

Pada paragraf ketiganya memiliki efek garis yang berbeda. Tentu efek garis tersebut didapat dari CSS yang telah kita berikan nilai berbeda tiap masing-masing paragraf. Sehingga hasilnya seperti pada gambar diatas.

Kalian dapat menggunakan perintah ini untuk memanipulasi kalimat tertentu yang membutuhkan efek seperti itu.Tentunya dengan sedikit modifikasi yang disesuaikan dengan kebutuhan website kalian. Mudah bukan ?

Sekian pembahasan mengenai bagaimana cara kerja dari fungsi text-decoration pada CSS. Semoga artikel kali ini dapat bermanfaat dan menginspirasi kalian semua. Sampai jumpa pada pembahasan yang tidak kalah seru dan menarik lainya hanya di Dumet School ! .