Membuat Huruf Miring Pada HTML & CSS

Italic di HTML CSS ?

0

Setelah kita mengetahui Cara Membuat Huruf Tebal Pada HTMLCara Membuat Huruf Tebal Pada HTML, sekarang kita lanjutkan ke topik berikutnya yaitu Cara Memiringkan Huruf/Tulisan pada HTML & CSS.

Berbeda dengan tutorial sebelumnya yang saya pisahkan antara penggunaannya dengan HTML dan CSS. Untuk memiringkan huruf juga tidak berbeda jauh dalam penggunaannya, mudah juga. Kita bisa gunakan tag pada HTML atau property CSS, saya yakin kalian sudah pasti sering lihat tag tersebut.

Menggunakan Tag HTML

ads by posciety

Memiringkan huruf langsung di tag HTML nya cukup menggunakan tag <i> atau tag <em> supaya tulisan jadi miring, maka tulisan akan enjadi miring. Misalnya terdapat tulisan didalam tag <p> dan ingin dimiringkan semua maka cukup taambahkan tag <i> atau tag <em> didalam tag <p> tersebut dan penutupnya disebelum penutup tag </p> juga.

Jika ingin memiringkan beberapa kata saja pada tulisan yang ada didalam tag <p> tadi maka cukup tambahkan tag <i> atau tag <em> diantara kata tersebut. Tulisan lain didalam tag <p> akan normal tapi beberapa kata yang diapit antara tag <i> atau <em> ini akan berubah menjadi miring.

Menggunakan Style CSS

Ketika menggunakan CSS artinya kita membuat style di file atau didalam tag <style> CSS, cukup tambahkan code ini: p {font-style: italic}artinya semua tulisan yang ada didalam tag <p> tadi akan berubah menjadi miring. Tidak hanya italic saja tapi bisa juga menggunakan oblique.

Jika ingin memiringkan sebagian tulisan saja yang didalam tag <p> tadi maka perlu menambahkan tag baru terlebih dahulu diantara kata yang ingin dimiringkan misalnya menggunakan span dan class seperti ini:

<p> ini contoh <span class="miring">beberapa kata yang dimiringkan</span> menggunakan CSS</p>

Kalimat “beberapa kata yang dimiringkan” ini berada didalam span class miring, artinya sekarang kita bisa mengeksekusinya di CSS dengan memanggil nama class nya seperti ini: .miring {font-style: italic}maka tulisan yang ada diantara span class miring akan menjadi miring sedangkan yang lainnya tetap tegak normal.

Masih bingung? Lihat : Video Tutorial Cara Membuat Tulisan Miring HTML CSS.

Tidak hanya tag <p> saja, ini hanya contoh. Bisa diterapkan dimana saja asal cara pakainya benar seperti yang dijelaskan diatas.

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya