Tutorial Cara Penulisan Property Font CSS
Dalam contoh di bawah ini saya akan membuat beberapa paragraf dengan menggunakan penulisan singkat property font. Berikut adalah contoh kode HTML dan CSSnya:
 
<!DOCTYPE html>
<html>
<head>
<title>Belajar Penulisan Singkat Font CSS</title>
<style type="text/css">
.contoh1 { font: italic bold small-caps 16px/80% serif;}
.contoh2 { font: italic 16px/120% Arial, Helvetica, sans-serif;}
.contoh3 { font: 16px/1.2em Georgia, Times, serif;}
.contoh4 { font: small-caps 18px/24px "Comic Sans MS", serif;}
</style>
</head>
<body>
   <h2>Belajar Penulisan Singkat Font CSS</h2>
   
   <h3>font: italic bold small-caps 16px/80% serif;</h3>
   <p class="contoh1">Di suatu tempat yang jauh, sebuah keluarga dikenal memiliki monyet yang pandai. Monyet itu mampu berkomunikasi dengan manusia. Monyet itu bisa membalas pertanyaan yang diajukan padanya melalui bahasa tubuhnya. Keluarga itu tidak ragu membangga-banggakan monyet kepunyaan mereka.
<p>
   
   <h3>font: italic 16px/120% Arial, Helvetica, sans-serif;</h3>
   <p class="contoh2">Namun suatu hari, ketika keluarga itu sedang berkendara, mereka mengalami kecelakaan lalu lintas. Tak disangka sang ayah, ibu, dan kedua anaknya tewas di lokasi kejadian. Ketika para polisi sampai di TKP mereka hanya menemukan monyet yang selamat. Mengetahui kemampuan si monyet petugas pun segera menghampiri si monyet untuk meminta keterangan.
<p>
   
   <h3>font: 16px/1.2em Georgia, Times, serif</h3>
   <p class="contoh3">Di suatu tempat yang jauh, sebuah keluarga dikenal memiliki monyet yang pandai. Monyet itu mampu berkomunikasi dengan manusia. Monyet itu bisa membalas pertanyaan yang diajukan padanya melalui bahasa tubuhnya. Keluarga itu tidak ragu membangga-banggakan monyet kepunyaan mereka.
<p>
   
   <h3>font: small-caps 18px/24px "Comic Sans MS", serif;</h3>
   <p class="contoh4">Namun suatu hari, ketika keluarga itu sedang berkendara, mereka mengalami kecelakaan lalu lintas. Tak disangka sang ayah, ibu, dan kedua anaknya tewas di lokasi kejadian. Ketika para polisi sampai di TKP mereka hanya menemukan monyet yang selamat. Mengetahui kemampuan si monyet petugas pun segera menghampiri si monyet untuk meminta keterangan.
<p>
</body>
</html>
 
Demikian tutorial ini saya buat untuk keperluan anda, semoga bermanfaat