Mengedit Text Decoration atau Garis Text dengan CSS (Cascadding style sheet)
Text decoration dapat dikatakan juga sebagai decorasi pada text, kita dapat mengedit text decoration ini dengan mudah melalui css. Untuk mengedit text-decoration pada text kita memerlukan properti “text-decoration”. Selain itu juga memerlukan value yang dapat terdiri dari none, underliner, overline, dan line-through.
Value none dimaksudkan untuk menghilangjan garis bawah pada link, lalu underliner digunakan untuk membuat garis bawah pada suatu text. Selain itu penggunaan overline dimaksudkan untuk membuat garis diatas text, dan yang terakhir adalah line-through yang digunakan untuk mencoret suatu text.
Berikut merupakan contoh properti. Properti text decoration pada selector :
Text-decoration :..value (none, daln lain-lain)…;
Jika dipasangkan pada tag <select>, dengan selector link (a) dan value (none) maka hasilnya adalah :
<style type=”text/css”>a {text-decoration:none;}</style>
Sekarang kita coba seluruh edit decoration diatas kedalam markup html. Silahkan buka editornya lalu ketikan markup html berikut (sebaiknya jangan di copy, hal ini untuk meningkatkan kemampuan anda dalam membuat web).
<html>
<head>
<style type="text/css">
a {text-decoration:none;}
h1 {text-decoration:underline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:overline;}
</style>
</head>
<body>
<a href="#">pertama pada Link yang dihilangkan garis bawahnya</a><br/>
<h1>kedua pada head yang ditambah garis bawah</h1><br/>
<h2>ketiga yaitu pada h2 dengan line-through (Rp.4.000.000)</h2>
<h3>ke empat pada h3 dengan overline</h3>
</body>
</html>
Simpan dengan nama text-decoration.html. Setelah itu kita buka, dan hasilnya akan tampak seperti pada gambar berikut ini.
Penjelasan kode yang telah kita tulis hari ini yaitu :
- <html> dengan </html> tag awal untuk mendefinisikan ini file html
- <head> dengan <head> tag yang sering digunakan untuk membuat judul halaman, menambahkan meta description, menambahhkan kode java script, dan mengedit file css.
- <style> dengan </style> yaitu tag yang digunakan untuk menyimpan design, atau editor design.
- a/h1/h2/h3 merupakan selector untuk menentukan bahwa bagian ini yang akan kita design
- text-decoration : ..value (none, line-through, underline, overline)… merupakan inti dari pembahasan kita hari ini, yaitu untuk mendekorasi text.
- <body> dengan </body> merupakan tag untuk menampilkan isi kepada user
- <a> tag untuk membuat link, yang diakhiri dengan tag </a>
- <h1>/<h2>/<h3> merupakan bagian dari heading, penjudulan dan subjudul, selain itu masih terdapat tag <h4> / <h5> dan <h6>.
Materi selsai…. mari buka materi lainnya.
