A. PENDAHULUAN
- Pengertian
Properti di dalam CSS FONT kurang lebih ada 6 properti.CSS telah menyediakan properti khusus yang di fungsikan jenis font yang di gunakan pada teks HTML. kalian Juga bisa mengatur ketebalan font, jenis font yang dipakai, ukuran font, gaya font, dsb.
Inilah ke 6 properti tersebut :
1. font-style
2. font-size
3. font-weight
4. font-variant
5. font
- Latar belakang masalah
Di karenakan saya ingin menguasai CSS, maka dari itu Saya mempelajari langkah-langkahnya di w3schools.
B. MAKSUD DAN TUJUAN
Agar memiliki Skills CSS, dan tujuannya adalah ketika membuat template halaman website bisa menggunakan le 6 properti CSS Font ini untuk mempercantik teks pada halaman website.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
- font-style
- font-size
- font-weight
- font-variant
- font
D. TARGET DAN HASIL YANG DIHARAPKAN
Dapat mengerti dan memahami ke 6 properti pada CSS Font dan bisa mempraktikkannya.
E. METODE PELAKSANAAN
- Membaca referensi
- Coding/Mempraktikkannya
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
CSS menyediakan properti khusus yang di fungsikan untuk menentukan jenis font yang digunakan pada teks
HTML. Kalian juga bisa mengatur font tersebut seperti mengatur ketebalan font, jenis font yang dipakai, ukuran font, gaya font, dsb.
Daftar 6 properti yang di gunakan pada FONT CSS
1. font-style
2. font-size
3. font-weight
4. font-variant
5. Font
1. Font-Style
Properti font-style merupakan properti CSS yang digunakan untuk memberi gaya penulisan teks pada suatu
elemen atau selector. Properti ini paling sering digunakan untuk membuat teks menjadi miring(italic). Berikut ini 3
nilai properti font-style:
1. italic = membuat teks menjadi miring
2. normal = menampilkan teks dengan gaya normal
3. oblique = membuat teks menjadi lebih miring dari 'italic'
dari ketiga nilai diatas, 'italic' adalah nilai yang sering digunakan. Kalian juga bisa menggunakan 'oblique' untuk
membuat teks miring. Sedangkan nilai 'normal' jarang digunakan, karena secara default suatu teks akan normal
tanpa menggunakan properti font-style
Kapan saat yang tepat untuk menggunakan font-style dengan nilai 'normal' jika nilai tersebut jarang digunakan?
Jika dalam suatu paragraf yang berisi kalimat yang panjang diatur dengan style miring/italic, dan ditengah-tengah
kalimat Kalian ingin membuat beberapa teks terlihat normal, maka saat itulah yang tepat untuk menggunakan nilai 'normal'. Dibawah ini adalah contoh penggunaan properti font-style dengan ketika Nilainya yang bisa Kalian coba
sebagai referensi untuk membuat gaya tulisan menjadi miring atau tidak.
Untuk codenya :
<!DOCTYPE html><html><head><title>Belajar FONT PADA CSS</title><style>.italic {font-style: italic;}.oblique {font-style: oblique;}.normal {font-style: normal;}</style></head><body><p class="italic">Ini adalah kalimat yang diatur dengan nilai "italic"</p><p class="oblique">Ini adalah kelimat yang diatur dengan nilai "oblique"</p><p class="normal">Ini adalah kalimat yang diatur dengan nilai "normal"</p></body></html>
Hasil dari jode diatas jika ditampilkan pada halaman web browser :
2. Font-Size
Font Size merupakan properti CSS yang digunakan untuk menentukan ukuran font yang digunakan pada teks.
Artinya, Anda bisa merubah teks pada HTML yang nantinya akan ditampilkan pada Halaman Web.
Untuk merubah ukuran font yang digunakan pada teks. Anda bisa memilih salah satu dari Value yang tersedia untuk
properti font-size. Berikut ini nilai properti font-size:
- x-small
- small
- xx-small
- smaller
- medium
- ..px, ..em, dll
dari 12 nilai dalam tabel diatas, Kalian bisa menggunakannya untuk mengatur ukurang font. Saya sendiri lebih sering
menggunakan nilai dalam bentuk seperti px, em, cm, mm, dsb, karena penggunaannya bisa diatur sesuai keinginan
berikut contoh kodenya :
<!DOCTYPE html><html><head><title>Belajar FONT PADA CSS</title><style>.smaller {font-size: smaller;}.langer {font-size: langer;}.px {font-size: 25px;}</style></head><body><p class="smaller">Ukuran Font di atur dengan nilai "smaller"</p><p class="larger"> Ukuran Font ini diatur dengan nilai 'larger'</p><p class="px">Ukuran font ini diatur dengan nilai "25px"</p></body></html>
Hasil dari kode diatas akan seperti berikut :
3. Font-weight
Font weight merupakan property CSS yang digunakan untuk menentukan ketebalan dari font yang digunakan pada
teks. Anda bisa menggunakan properti ini membuat teks tebal atau dikenal dengan istilah Bold. Sedangkan value
1. bold = membuat font pada teks/karakter menjadi tebal
2. bolder = membuat font pada teks/karakter menjadi lebih tebal
3. lighter = membuat font pada teks/karakter menjadi lebih tipis
4. normal = membuat font pada teks/karakter menjadi normal
5. initial mengatur value dari properti menjadi default
6. 100,200,....,900 = mengatur ketebalan font pada teks/karakter berdasarkan ukuran nilai yang dipilih
Di Bawah ini adalah contoh penggunaan dari properti font-weight dengan nilai 900, bold, normal, lighter. Untuk mengatur ketebalan font pada teks :
<!DOCTYPE html><html><head><title>Belajar FONT PADA CSS</title><style>h1 {font-weight: 900;}h2 {font-weight: bold;}h3 {font-weight: normal;}h4 {font-weight: lighter;}</style></head><body><h1> Ketebalan diatur dengan nilai '900'</h1><h2> Ketebalan diatur dengan nilai 'bold'</h2><h3> Ketebalan diatur dengan nilai 'normal'</h3><h4> Ketebalan diatur dengan nilai 'lighter'</h4></body></html>
Hasilnya dari code diatas akan seperti ini :
4. Font-variant
font-variant menggunakan properti CSS yang digunakan untuk menentukan apakah suatu teks harus ditampilkan
dalam huruf kecil atau tidak. Nilai dari font-variant yaitu : normal, small-caps, initial. Efek dari nilai 'small-caps' akan
membuat teks yang tadinya hurufnya kecil menjadi besar/huruf kapital. Berikut contoh kodenya :
<!DOCTYPE html><html><head><title>Belajar FONT PADA CSS</title><style>.normal {font-variant: normal;font-family: 'arial', sans-serif;}.small-caps {font-variant: small-caps;font-family: 'arial', sans-serif;}</style></head><body><p class="normal"> kalimat ini menggunakan nilai 'normal' </p><p class="empat-nilai">Kalimat ini menggunakan nilai 'small-caps'</p></body></html>
Hasil dari kode di atas akan seperti ini :
5. Font
Property font merupakan properti CSS yang digunakan untuk mempersingkat penulisan properti font lainnya.
Artinya, proprti tersebut memiliki value yang berisi dari 5 properti font yaitu : font-style, font-variant, font-weight, font-size, dan font-family
Penulisan sintaks CSS untuk properti font tidak harus berisi 5 nilai properti tersebut, Kalian bisa mempersingkat lagi
lagi misalkan tanpa mengisi nilai 'font-variant'. Atau Kalian bisa menulis hanya 2 nilai saja misalnya nilai 'font-size' dan
'font-family'. berikut contoh kodenya :
<!DOCTYPE html>
<html>
<head>
<title>Belajar FONT PADA CSS</title>
<style>
.dua-nilai {
font: 10px/10px Courier New, sans-serif;
}
.empat-nilai {
font: italic bolder 15px/20px arial, sans-serif;
}
.lima-nilai {
font: italic small-caps bold 20px/30px arial, sans-serif;
}
</style>
</head>
<body>
<p class="dua-nilai"> Paragraf ini berisi dua nilai yaitu 'font-size/line-weight dan font-family' </p>
<p class="empat-nilai"> Berisi 4 nilai yaitu 'font-style, font-weight, font-size/line-height, dan font-family'</p>
<p class="lima-nilai"> Berisi 5 nilai yaitu 'font-style, font-variant, font-weight, font-size/line-height, font-family'</p>
</body>
</html>
Hasil dari kode di atas akan seperti ini :
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. REFERENSI
- W3schools
