Mengubah jenis text atau font dengan CSS (Cascading style sheet)
Selamat berjumpa di tutorial CSS (cascading style sheet) lainnya, sebelumnya kita telah bahas bagaimana mengubah warna text, sekarang kita akan mengubha jenis text atau font dengan CSS. Untuk mengubah suatu jenis text, bisa menggunakan kode “font-family“.
Seperti ini propertinya :
font-family : “……..arial (jenis text)………..”;
Seperti ini jika dalam tag <style=”type=text/css”> :
<style type="text/css">
......Target yang akan di Design.......................
{
Font-family : "........Jenis Text.......";
}
</style>
Sekarang, mari kita masukan kedalam markup html, kita akan merubah jenis text dari subheading (h2), link (a), dan pada suatu text. Ini dia kodenya :
<html>
<head>
<style type="text/css">
h2 {font-family:arial;}
.ubah_text {font-family:verdana;}
a {font-family:calibri;}
</style>
</head>
<body>
<h2>ini adalah tag h2, yang akan diubah menjadi arial</h2><br/><br/>
<div class="ubah_text">ini merupakan text yang akan kita ubah designnya, bagaimana jika kita ubah fontnya dengan verdana. yah verdana merupakan style yang sangat bagus. selain itu, jenis ini sangat modern</div>.<br/>
<br/>
bagian terakhir adalah merubah jenis font dari family link. jenis font apa ya, yang akan kita ganti?. bagaimana kalau dengan jenis calibri, ini dia linknya.
<a href="target_link">Link menuju surga</a>
</body>
</html>
Silahkan simpan dengan naman “font.html”.buka dengan google chrome, hasilnya akan tampak seperti gambar berikut.
Penjelasan kode html dan css diatas :
- <html> dan </html> merupakan tag pembuka dan penutup dari suatu markup html
- <head> dan </head> merupakan tag heading dan penutupnya digunakan untuk memberikan judul, tag meta dan penambahan script kode (Javascript dan lain lain).
- <style> dan </style> merupakan tag pembuka dari design web dan penutupnya.
- h2 / .ubah_text /a merupakan pendefinisian bagian man yang akan di design atau di ubah.
- Font-family : …jenis_text : merupakan kode untuk mengubah jenis suatu text.
- <body> dan </body> merupakan tag untuk menampilkan isi halaman ke pada user
- <h2> merupakan suatu sub heading (sub judul), masih terdapat sub judul lain seperti h3/h4/h5/h6
- <div> merupakan tag yang dapat digunakan untuk mengelompokan suatu element, selain div, anda juga bisa menggunakan kode <span>
- <br/> merupakan tag garis baru
- <a> merupakan tag untuk membuat suatu link dan di tutup dengan kode </a>
Tutorial Selesai … Mari membaca lagi
