Merubah Ukuran Fonts di HTML & CSS

Perbesar / Perkecil Ukuran Tulisan

Membuat website bukan asal jadi doang, ya kan ? Pasti pengen ada variasi2nya dikit misalnya yang sering dipakai itu merubah ukuran tulisan alias font pada website. Disini saya kasih tips mudah merubah ukuran text itu dengan CSS. Property apa yang digunakan ? Kita menggunakan "font-size". Caranya gimana?

Misalnya ada tulisan paragraf / tag paragraf pada dokumen HTML kalian, anggap saja seperti ini:

<p>ini utorial merubah ukuran tulisan / text html dan css</p>

Defaultnya, tag <p> itu memiliki ukuran font sekitar 16px dan sekarang kita ingin merubahnya agar lebih besar atau lebih kecil. Cara merubah ukurannya yaitu kita panggil di CSS nya dan gunakan code seperti ini:

p     {
	font-size: 45px;
      }

Artinya semua tulisan didalam tag <p> kita atur ukuran nya menjadi 45px, hasilnya akan berukuran 45 px silahkan dicoba.

Lalu bagaimana kalo mau merubah sebagian saja ? Gampang! Caranya, kita harus beri pembatas dulu dengan tag (bisa ditambah class juga / id atau dibiarkan tag saja). Misalnya kita kasih tanda pada beberapa kata saja dengan <span> contohnya seperti ini:

<p>ini utorial merubah <span>ukuran tulisan / text html</span> dan css</p>

Gunanya untuk apa pembatas yang saya maksud? Untuk dipanggil di CSS nya, seperti ini misalnya:

span     {
		font-size: 45px;
	     }

Ketika kita panggil <span> berarti cuma tulisan yang “ukuran tulisan / text html” yang akan kena dampaknya. Jadi hasilnya akan besar kecil dan sedikit menarik seperti tag cloud. (lihat gambar)

Apa harus <span>? Tidak, kalian bisa juga pakai class atau id yang jelas jangan pakai <div> (misalnya <div class="">) karena kalo pakai <div> nanti text nya jadi turun atau berantakan. Jadi solusinya mendingan pakai span juga tinggal di kasih class atau id kalo emang maunya gitu. Misalnya seperti ini:

<p>ini utorial merubah <span class="besar">ukuran tulisan / text html</span> dan css</p>

Nah, nanti di CSS nya kita tinggal panggil class nya karena saya pakai class, kalo pakai id berarti kalian tinggal panggil id nya. Jadi seperti ini CSS nya:

.besar {
		font-size: 45px;
	}

Hasilnya akan tetap sama.

Masih bingung ? Lihat : Video Tutorial Cara Ganti Ukuran Tulisan HTML CSS.

Selamat mencoba !

tunggu sebentar...

POS Lainnya:

Tinggalkan Komentar

avatar

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