Membuat Huruf Miring Pada HTML & CSS

Italic di HTML CSS ?

Setelah sebelumnya saya menulis Cara Membuat Huruf Tebal Pada HTMLCara Membuat Huruf Tebal Pada HTML, sekarang saya lanjutkan dengan Cara Memiringkan Huruf / Tulisan Pada HTML & CSS. Tutorial kali ini saya gabungkan langsung antara penggunaannya menggunakan tag HTML dan style 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

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.

Selamat mencoba !

tunggu sebentar...

POS Lainnya:

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi