Modul Praktikum CSS – Cara Cerdas Belajar CSS

(1)

FONT

1. Menentukan Jenis Font

Jenis font diatur melalui properti font-family. Nilainya berupa sekelompok nama font dengan pemisah berupa koma

Contoh :

font-family : verdana, arial, helvetica, sans-serif ;

Pada contoh seperti itu, verdana merupakan font yang menjadi prioritas untuk dipakai. Namun, bila font tersebut tidak terdapat pada klient maka Arial yang akan digunakan, dan seterusnya.

2. Menentukan Ukuran Font

Ukuran font diatur melalui properti font-size

Contoh :

Font-size : 12px ;

Pada contoh diatas, ukuran font sebesar 12 piksel

Contoh : Ukuran.css

Ukuran.html

3. Satuan Ukuran Font

Satuan Keterangan

pt Dari kata “point” atau titik, 1 pt = 1/72 inci

pc Dari kata “pica”, 1 pc = 12 titik

px Dari kata “pixel”, 1 px sama sebuah titik pada layar komputer

em Berasal dari huruf M. Ukuran bersifat relatif terhadap ukuran font sekarang, 1

em identik dengan ukuran font sekarang, 2 em berarti 2 x ukuran font sekarang. Nilai pada em bisa berupa bilangan real.

ex Berasal dari huruf x kecil, 1 ex sama dengan tinggi huruf x pada font sekarang,

kira-kira tinggi x adalah setengah tinggi font

% Persentase, bersifat relatif terhadap ukuran font sekarang

.ukuran12

{ font-size : 12px ; } .ukuran18

{ font-size : 18px ; } .ukuran36

{ font-size : 36px ; }

<html>

<head> <title>Ukuran Font</title>

<body>

<div class = “ukuran12”>Teks Ukuran 12 </div> <div class = “ukuran18”>Teks Ukuran 18 </div> <div class = “ukuran36”>Teks Ukuran 36 </div> </body>

(2)

in Menyatakan satuan inci

mm Menyatakan satuan milimeter

cm Menyatakan sauan sentimeter

4. Alternatif lain Menentukan Ukuran Font

CSS menyediakan 7 konstanta yang bisa digunakan untuk menentukan ukuran font. Ketujuh konstanta tersebut adalah xx-small, x-small, small, medium, large, x-large, xx-large. Konstanta medium menyatakan ukuran normal

Contoh : konsfont.css

konsfont.html

Pada contoh diatas, ketujuh style yang berhubungan dengan konstanta untuk menentukan ukuran font dikenakan pada div yang ukuran font-nya berbeda. Namun, hasilnya bisa dilihat, ukuran tulisan berdasarkan ketujuh konstanta tersebut tidak terpengaruh oleh ukuran font pada elem div.

5. Memiringkan Teks

Untuk memiringkan teks, kita bisa menggunakan properti font-style. Nilai yang bisa diberikan berupa:

 normal, berarti tidak miring  italic, berarti miring

font-style : italic ;

.px12 { font-size : 12 px; } .px18 { font-size : 18 px; } .medium { font-size : medium ; } .small { font-size : small ; } .x-small { font-size : x-small ; } .xx-small { font-size : xx-small ; } .large { font-size : large ; } .x-large { font-size : x-large ; } .xx-large { font-size : xx-large ; }

<title>Ukuran Font</title>

<body>

<div class = “px12”> Ukuran 12px

<p class = “xx-large”>xx-large</p> <p class = “x-large”>x-large</p> <p class = “large”>large</p> <p class = “medium”>medium</p> <p class = “small”>small</p> <p class = “x-small”>x-small</p> <p class = “xx-small”>xx-small</p> </div>

<div class = “px18”> Ukuran 18px

<p class = “xx-large”>xx-large</p> <p class = “x-large”>x-large</p> <p class = “large”>large</p> <p class = “medium”>medium</p> <p class = “small”>small</p> <p class = “x-small”>x-small</p> <p class = “xx-small”>xx-small</p> </div>

(3)

6. Menebalkan Teks

Untuk menebalkan teks, bisa menggunakan properti font-weight. Nilai yang bisa diberikan berupa:  normal, berarti normal atau tidak tebal

 bold, berarti tebal font-weight : bold ;

7. Membuat small-caps

Small-caps adalah huruf kapital dengan ukuran yang lebih kecil, bisa menggunakan properti font-variant. Nilai yang bisa diberikan berupa :

 Normal

 Small-caps

font-variant : small-caps ;

contoh : smallcap.html

8. Menggunakan Properti Font

Untuk menyingkat semua pengaturan yang telah dibahas, bisa menngunakan properti bernama font Contoh :

Propfont.html

Tampak bahwa menggunakan properti font atau keluarga font yang lain memberikan hasil yang sama

<title>font-variant</title> <style type = “text/css”> .smallcap

{ font-variant : small-caps ; } </style>

</head> <body>

</html

<title>Properti Font</title> <style type = “text/css”> .kelas1

{

font-size : 24px ;

font-family : verdana, arial, sans-serif ; font-style : italic ;

font-weight : bold ; }

.kelas2 {

font : bold italic 24px verdana, arial, sans-serif ; }

</style> </head> <body>

<div class = “kelas1”>Jazz di Indonesia</div> <div class = “kelas2”>Jazz di Indonesia</div> </body>