Mengatur Font
Dengan CSS kamu bisa mengatur model huruf yang kamu inginkan. namun, agar dapat menghasilkan desain web yang bagus, penting untuk mengetahui jenis-jenis font yang sering digunakan. Ada tiga karakteristik font yang sering digunakan untuk desain web, yaitu:| Font Dasar | Keluarga | Ciri dan Penjelasan |
| serif | Times New Roman Georgia | Font default bagi kebanyakan browser, terkesan resmi, seperti yang biasa digunakan untuk menulis surat resmi. Cirinya adalah font jenis ini memiliki garis di ujung-ujungnya. |
| Sans-serif | Arial Verdana | Font terkesan lebih tegas, dan jelas. Font jenis ini paling sering digunakan pada website. |
| Monospace | Courier New Lucida Console | Font ini biasa digunakan untuk menuliskan kode program. Memiliki lebar yang sama untuk semua huruf, artinya jarak huruf 'm' dan ' ' (spasi) sama. |
Contoh Penggunaan Font
Kamu bisa melihat bahwa pada CSS di atas menggunakan lebih dari satu nama font yang dipisahkan dengan koma (,). Ini bertujuan ketika font yang paling awal tidak tersedia pada komputer, maka browser akan menggunakan font selanjutnya. Perhatikan juga untuk penulisan nama font yang mengandung spasi, maka diapit tanda petik dua (").<!doctype html> <html> <head> <title>Contoh Penggunaan Font</title> <style type="text/css"> .gaya1{ font-family: "Times New Roman", Georgia; } .gaya2{ font-family: Arial,Verdana; } .gaya3{ font-family: "Courier New", "Lucida Console"; } </style> </head> <body> <p class="gaya1">Contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh.</p> <p class="gaya2">Contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh.</p> <p class="gaya3">Contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh paragraf contoh.</p> </body> </html> |
Membuat Menjadi Huruf Besar (Kapital)
Dengan CSS kita bisa merubah yang semula huruf kecil menjadi huruf besar, yaitu menggunakan font-transform:Membuat Teks Menjadi Huruf Kapital
Lihat kode HTMLnya, kemudian lihat tampilan hasilnya.<!DOCTYPE html> <html> <head> <title>Huruf Kapital dengan CSS</title> <body> <p style="text-transform: uppercase;">ini huruf kecil di ubah ke huruf kapital.</p> <p style="text-transform: capitalize;">huruf pertama pada setiap kata diubah jadi huruf kapital</p> <p style="text-transform: lowercase;">INI HURUF KAPITAL DIUBAH MENJADI HURUF KECIL.</p> </body> </html> |
Font Variant
Contoh Font Variant
<!DOCTYPE html> <html> <head> <title>Contoh Font Variant</title> </head> <body> <p class="normal">Contoh font variant normal.</p> <p style="font-variant:small-caps">Contoh font variant small-caps.</p> </body> </html> |
Text Decoration
Contoh Text Decoration CSS
<!DOCTYPE html> <html> <head> <title>Contoh Text Decoration</title> </head> <body> <p style="text-decoration:overline;">text-decoration overline</p> <p style="text-decoration:line-through;">text-decoration line-through</p> <p style="text-decoration:underline;">text-decoration underline</p> <p style="text-decoration:blink;">text-decoration blink</p> </body> </html> |
0 Response to "Mengubah Gaya Huruf dengan CSS"
Post a Comment