Jumat, 07 April 2017

Belajar CSS Dasar Bagian 4 – Font Styling

     Assalamualaikum Wr. Wb. Selamat datang kembali sahabat lupacode semua di blog Lupa code. Masih bersama saya selaku admin dari blog lupacode. Pada hari kemarin kita telah membahas mengenai Belajar CSS Dasar Bagian 3 – Penempatan CSS. Bagi sahabat lupacode yang baru saja gabung disini atau baru masuk ke artikel ini, saya sarankan untuk mempelajari pembahasan materi dari yang pertama agar sahabat paham maksud dari kelanjutan pembahasan yang selanjutnya. Atau sahabat bisa langsung mengunjungi halaman Daftar isi pada blog ini.

Belajar CSS Dasar Bagian 4 – Font Styling

      Yang akan kita pelajari pada pembahasan kali ini adalah bagaimana memberikan styling pada font dan saya akan memisahkan antara font dengan text nanti juga css mempunyai properti untuk text. Bedanya kedua itu adalah kalau font terkait dengan tulisannya kalau text terkait dengan property pendukung. Langsung kita lihat saja property apa saja yang diberikan oleh css terkait dengan font.

Font


Font-family => Mengatur jenis font yang akan digunakan
Font-size => mengatur ukuran font
Font-weight => mengatur ketebalan font
Font-variant => Mengubah font menjadi small caps
Font-style => Mengubah font menjadi cetak miring
Line-height => Mengubah spasi antar baris

Sekarang kita akan pelajari bagaimana cara menggunakannya Font-family => Nama font => generic family " Contoh penulisan nya adalaha seperti ini

h1 {color: blue;}
body {
            font-family: arial; verdana, sans-serif;
}
p {
            font-family: "Times New Roman", serif;
}

      Kita bisa memberikan lebih dari satu value terhadap font-family seperti yang saya tuliskan di atas, terdapat 3 buah value yang saya tuliskan.
  • Arial, verdana => Nama font
  • Sans-serif => Generic family
  • Serif => Generic family
Perbedaan generic family antara sans-serif dengan serif adalah kalau sans-serif itu memiliki kaki pada fontnya sedangkan serif itu tidak memiliki kaki pada fontnya, seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 1

     Lalau kemudian yang kedua ada font-size untuk mengatur ukuran dari font dan kita bisa kasih value nya ada px, %, dan em, sekarang kita coba yang pixel (px) saja dulu supaya tidak bingung, contoh syntax nya adalah seperti ini. Saya akan tambahkan font-size kedalam syntax penulisan contoh diatas sehingga menjadi seperti ini

h1 {
            font-family: arial; verdana, sans-serif;
            font-size: 100px;
}

p {
            font-family: "Times New Roman", serif;
}

Kita lihat hasilnya menjadi seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 2
     Lalu kemudian yang ke-tiga ada font-weight untuk membuat font nya menjadi bold atau menjadi tebal. Contoh syntax nya adalah seperti ini

p {
            font-family: "Times New Roman", serif;
            font-weight: bold;
}

Sehingga hasilnya akan menjadi seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 3

     Oke selanjutnya ada font variant nah ini agak unik, karna untuk mebuat sebuah menjadi small caps. Apa itu smal caps, kita langsung saja mencoba nya. Saya akn menambahkan syntax nya pada h1 sehingga menjadi seperti ini

h1 {
            font-family: arial; verdana, sans-serif;
            font-size: 100px;
            font-variant: small-caps;
}

Sekarang kita lihat hasilnya adalah seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 4

     Selanjutnya ada font-style untuk membuat tulisan menjadi normal, italic, dan oblique. Saya akan coba yang italic terlebih dahulu

h1 {
            font-family: arial; verdana, sans-serif;
            font-size: 100px;
            font-variant: small-caps;
            font-style: italic;
}

Kalau kita lihat hasilnya akan menjadi seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 5

Sedangkan perbedaan antara font sytle italic dengan oblique adalah seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 6      Lalu ada yang terakhir ada line-height untuk mengatur jarak antar baris atau paragraf. Saya tulis misalkan seperti ini pada paragraf

p {
            font-family: "Times New Roman", serif;
            font-weight: bold;
            line-height: 50px;
}

Sekarang kita lihat hasilnya adalah seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 7

      Oke itu tadi property – property yang bisa kita gunakan di dalam font. Lalu ada juga Shorthand / singkatan nya, mungkin setelah lama kalian membuat web lalu kalian menuliskan property konten yang banyak mungkin nantinya kalian tidak perlu menuliskan satu persatu baris. Contoh yang tadinya kita menuliskan seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 8

Kita cukup menggantikan dengan satu property font saja. contohnya seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 9
        Di dalamnya kita urutkan property – property nya. Kalau kita lihat contoh di atas urutanya sudah sesuai. Coba kalian lihat urutan adalah seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 10

      Lalu ada property yang opsional dan ada juga property yang wajib, kita bisa lihat contoh di atas adalah seperti ini

Belajar CSS Dasar Bagian 4 – Font Styling 11

     Oke itulah untuk pembelajaran mengenai font style. Kalian coba-coba aja ganti property dari masing – masing fontnya dan kalian bisa lihat perbedaan nya. Baik mungkin sampai sini dulu untuk pembahasan materi yang ke 4 ini. Lalu kita akan melanjtkan kedalam materi pembahasan yang selanjutnya yaitu Belajar CSS Dasar Bagian 5 – Background 

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon