Membuat Tulisan Bergaris Bawah Pada HTML & CSS

Pada website HTML dan CSS, tentu kita ingin memberikan variasi pada tulisan atau text yang ada. Misalnya huruf tebal, miring, besar kecil, atau juga bergaris bawah. Kali ini saya bagikan bagaimana membuat huruf atau tulisan bergaris bawah menggunakan tag HTML dan property CSS.

Kalian bisa pilih mau menggunakan cara yang mana, karena hasilnya sama saja antara tag HTML dan property CSS.

Untuk menggunakan tag html tentu kita gunakannya di file HTML, misalnya saya mau merubah tulisan menjadi bergaris bawah dengan tag HTML. Tag apa yang digunakan? Tag <u> dan tag <ins>, kalian pilih salah satu. Maka tag nya akan seperti ini:

ads by posciety

<p>ini contoh <u>tulisan bergaris</u> bawah</p>
<p>ini <ins>contoh tulisan</ins> bergaris bawah</p>

Kedua tag itu fungsinya sama saja untuk memberi garis bawah. <u> artinya “underline” sedangkan <ins> artinya “inserted“. Hasilnya tetap sama akan membuat garis bawah pada tulisan, silahkan dicoba.

Sekarang kita coba menggunakan property CSS, hasil tetap sama juga ko. Maka code CSS nya akan seperti gambar dibawah ini:

<p style="text-decoration: underline">ini contoh tulisan bergaris bawah</p>
<p style="text-decoration: underline">ini contoh tulisan bergaris bawah</p>

Diatas adalah contoh CSS inline, kita cukup memberikan "style" didalam tag tulisan yang akan digaris bawahi. Bagaimana kalo menggunakan CSS internal dan eksternal ? Maka kita bisa memberikan class / id terlebih dahulu tapi kalian juga bisa saja langsung panggil tag yang bersangkutan di CSS. Tiga langkah ini saya tulis semua nya:

<style type="text/css">
     .garisbawah {
     text-decoration: underline;
}

     #garisbawah {
     text-decoration: underline;
}
</style>

<p class="garisbawah">ini contoh tulisan bergaris bawah</p>
<p id="garisbawah">ini contoh tulisan bergaris bawah</p>

Ini adalah contoh CSS internal, untuk eksternal nya silahkan tuliskan seperti itu juga di file CSS kalian misalnya di file (“style.css“) kemudian panggil class “garisbawah” dan id “garisbawah” Pastikan hanya property nya saja, jangan dimasukkan "<style>" nya di CSS eksternal. Hasil dari kedua code diatas sama saja akan membuat tulisan bergaris bawah silahkan coba!

Bagaimana kalo mau menggaris bawahi beberapa kata saja ? Gampang, silahkan buat class atau id yang diterapkan diantara kalimat yang ingin digaris bawahi kemudian class tersebut di panggil di CSS dan silahkan isi CSSnya dengan code CSS yang tadi diatas.

Masih bingung ? Tonton : Video Tutorial Membuat Garis Bawah Pada Tulisan, ada beberapa penjelasan yang lainnya juga didalam video itu.

Selamat mencoba !