1 Comment

Belajar CSS Font Style Tahap Dasar - Tutorial Blog
Belajar CSS Font Style Tahap Dasar - Tutorial Blog
Cascading Style Sheet atau Css merupakan salah satu dari bahasa pemrograman yang bertujuan untuk mengatur sebuah tampilan atau layout seperti website contoh-nya. Dalam dunia website (blogger) css telah mengambil banyak peranan penting yang bertujuan untuk memudahkan pengguna seperti pengelola website. Nah, kali ini saya akan menulis turial dasar tentang cara mengatur style font (huruf) pada situs blog dari dasar-dasar metode penggunaan css.

Sebelum-nya saya juga telah menulis tutorial cara menginstall google font kedalam template dan cara penggunaan nya. jika sobat ingin menginstall google font untuk situs blog kamu, silahkan baca disini. Baiklah kembali ke topik pembahasan yaitu Belajar CSS Font Style Tahap Dasar.

CSS telah menyediakan property text-transform yang berfungsi sebagai pengubah tampilan teks menjadi huruf besar semua (uppercase) atau menjadi huruf kecil semua (lowercase) dan membuat huruf besar atau kapital (capitalize) di awal kalimat.

Apa penting-nya css font syle (font-variant)

Fungsi yang paling menonjol font-variant adalah untuk menghindari kesalahan pada saat menulis/mengetik, terkadang kita lupa membuat huruf besar atau kelalaian lainnya dalam menulis, saya sendiri menggunakan property text-transform pada situs ini yang saya khusus-kan pada bagian topmenu, menu, dan widget tittle agar selalu menampilkan huruf besar. Jadi meskipun saya menulis menu dengan huruf acak (besar-kecil) property text-transform tetap menampilkan-nya dengan huruf besar (kapital).

Cara Membuat Huruf Menjadi Kapital Semua Dengan Css

Tambahkan properti {text-transform:uppercase;} pada id element situs, sebagai contoh penerapan properti {text-transform:uppercase;} adalah sebagai berikut.

h2{text-transform:uppercase;} maka setiap element yang di beri tag h2 akan menempilkan huruf kapital (huruf besar semua) atau kamu juga bisa menerapkan pada element individu yaitu seperti ini .id_element_kamu{text-transform:uppercase;}. Contoh penerapan pada situs saya adalah:

#top-menu{text-transform:uppercase;font-size:11px;}

Css text-transform:uppercase; memerintahkan untuk selalu menampilkan huruf kapital (besar) pada bagian menu atas dengan size (tinggi/besar) huruf adalah 11px.

Cara Membuat Huruf Kecil Dengan Css Font Style

Kebalikan dari contoh diatas, untuk menampilkan huruf kecil semua pada sebuah element maka kita cukup dengan menambahkan properti {text-transform:lowercase;}. tapi saya tidak tau penulisan dengan style huruf kecil semua tepat nya untuk di bagian apa, mungkin kamu punya ide.

Membuat huruf besar di awal kalimat dengan css

Yang satu ini cocok di terapkan pada laman artikel web, untuk menjadikan setiap paragraf di awali dengan huruf besar. Cara penerapan nya adalah seperti berikut ini.

p {text-transform:capitalize;} jika kamu ingin menambahkan property size (settingan besar huruf) tambahkan juga font-size:nilai_pixel; sehingga menjadi p{text-transform:capitalize;font-size:16px;}. jika property css font style tersebut bersebrangan dengan style css laman web kamu, maka kita bisa menambahkan property "!important;" untuk menggunggulkan-nya, contoh: p{text-transform:capitalize;font-size:16px!important;} huruf "p" adalah "id element" laman yang berarti "paragraf". jika kamu ingin menambahkan nya pada element selain paragraf maka setiap element selalu di awalai dengan tanda titik atau pagar, contoh:
.menu{text-transform:capitalize;font-size:16px;} or #menu{text-transform:capitalize;font-size:16px;}
Jika ingin menambahkan text-transform pada beberapa element maka cara penerapan nya adalah seperti contoh berikut ini:
.menu,.sub-menu,.post-tittle,widget-tittle{text-transform:capitalize;font-size:16px;}
Untuk mengetahui id element situs kita bisa melakukan inspect element pada setiap bagian bagian situs, saya haraf kamu sudah mengerti tentang inspect element.

Nah, yang terakhir untuk menghilangkan semua efek css diatas cukup dengan menambahkan property "none" atau {text-transform:none;} dengan demikian semua efek font style akan hilang dan akan menampilkan apa adanya (seperti yang kamu tulis) saja. Demikian saja penjelasan tentang css font style (font-variant) dan silahkan di coba dan beri komentari tentang post ini.

Post a Comment Subscribe

Note: Subscribe terlebih dahulu untuk memposting komentar, Kami akan segera kembali untuk meninjau dan menanggapi respon dari anda.

 
Top