Untuk mengubah ukuran text dengan css, kita hanya perlu menggunakan kode font-size yang akan ditempatkan pada kode <style>. Ukuran dapat digunakan atau disesuaikan dengan kebutuhan, kita bisa menggunakan nilai pixel atu percent.
Ini merupakan contoh penulisan font-size (pengubah ukuran text):
font-size : ……..Ukuran yang di inginkan, bisa pixel atau perchent……
jika kita masukan dalam kode <style> dengan ukuran 40px pada selector h1, maka akan tampak seperti kode berikut :
<style type=”text/css”>
h1 { font-size : 40px; }
</style>
Sekarang kita akan mengujinya pada suatu text, kita akan membesarkan text dengan pixel. Tuliskan markup html berikut ini.
<html>
<head>
<style type="text/css">
.iya h1 {font-size:40px;}
.text-1 {font-size:80px;}
.text-2 {font-size:7px;}
</style>
</head>
<body>
<h1>ini adalah tag h1 tanpa diubah ukurannya</h1><br/>
<div class="iya">
<h1>Mengubah Judul h1 menjadi ukuran 40 px</h1>
</div>
<div class="text-1">
ukuran 80 px
</div>
<div class="text-2">
pada div text-2 mari kita kecilkan dengan ukuran yang sangat kecil, bagaimana jika ukurannya 7 pixel saja, okeyh sepakat. biar lihat saya akan tambahkan sedikit text.bagaimana kalau saya bercerita sedikit, jadi pada tahun 2018, dulu saya masih bayi, yah lumayan berukuran lebih mini dengan berat badan kecil,,, itu sih kata bokap tapi entahlah... saya kurang tahu... hanya tuhan yang thau...
</div>
</body>
</html>
Silahkan simpan kode tersebut pake ekstensi .html (judul.html), lalu buka dengan aplikasi browser yang anda punya. Tampilannya kurang lebih seperti gambar berikut ini, tulisan yang paling kecil mungkin kurang terlihat.
Penjelasan kode dari yang telah kita pelajari :
- <html> merupakan tag awal untuk membuat markup html, dan ditutup dengan kode </html>
- <head> merupakan kode tambahan, yang diperuntukan menambah judul seperti <title>, tag meta, atau script kode lainnya.
- <style> merupakan tag pembuka untuk mendesign web, lalu ditutup dengan kode </style>.
- .iya h1 : merupakan cselector dari <div class=”iya”>yang didalamnya terdapat kode h1, begitupun dengan selector .text-1 dan .text-2
- font-size : merupakan properti untuk mensetting dan mengubah text dengan ukuran yang diinginkan.
- <body> merupakan tag pembuka untuk menampilkan isi dari data web, yang akan diakhiri dengan tag </body>
- <div> merupakan tag pembuka, digunakan untuk mengelompokan bagian-bagian tertentu dari element.
- <h1> merupakan tag heading, masih terdapat tag subheading dari h1, seperti h2, h3, h4, h5, h6
Seomga bermanfaat… ayo buka tulisan lainnya.