Trik Dan Tips Berguru 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 menyerupai website contoh-nya. Dalam dunia website (blogger) css telah mengambil banyak peranan penting yang bertujuan untuk memudahkan pengguna menyerupai pengelola website. Nah, kali ini aku akan menulis turial dasar ihwal cara mengatur style font (huruf) pada situs blog dari dasar-dasar metode penggunaan css.

Sebelum-nya aku juga telah menulis tutorial cara menginstall google font kedalam template dan cara penggunaan nya. jikalau teman 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 abjad besar semua (uppercase) atau menjadi abjad kecil semua (lowercase) dan menciptakan abjad besar atau kapital (capitalize) di awal kalimat.

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

Fungsi yang paling menonjol font-variant yaitu untuk menghindari kesalahan pada ketika menulis/mengetik, terkadang kita lupa menciptakan abjad besar atau kelalaian lainnya dalam menulis, aku sendiri memakai property text-transform pada situs ini yang aku khusus-kan pada bab topmenu, menu, dan widget tittle supaya selalu menampilkan abjad besar. Kaprikornus meskipun aku menulis hidangan dengan abjad acak (besar-kecil) property text-transform tetap menampilkan-nya dengan abjad besar (kapital).

Cara Membuat Huruf Menjadi Kapital Semua Dengan Css

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

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

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

Css text-transform:uppercase; memerintahkan untuk selalu menampilkan abjad kapital (besar) pada bab hidangan atas dengan size (tinggi/besar) abjad yaitu 11px.

Cara Membuat Huruf Kecil Dengan Css Font Style

Kebalikan dari pola diatas, untuk menampilkan abjad kecil semua pada sebuah element maka kita cukup dengan menambahkan properti {text-transform:lowercase;}. tapi aku tidak tau penulisan dengan style abjad kecil semua sempurna nya untuk di bab apa, mungkin kau punya ide.

Membuat abjad besar di awal kalimat dengan css

Yang satu ini cocok di terapkan pada laman artikel web, untuk menimbulkan setiap paragraf di awali dengan abjad besar. Cara penerapan nya yaitu menyerupai berikut ini.

p {text-transform:capitalize;} jikalau kau ingin menambahkan property size (settingan besar huruf) tambahkan juga font-size:nilai_pixel; sehingga menjadi p{text-transform:capitalize;font-size:16px;}. jikalau property css font style tersebut bersebrangan dengan style css laman web kamu, maka kita dapat menambahkan property "!important;" untuk menggunggulkan-nya, contoh: p{text-transform:capitalize;font-size:16px!important;} abjad "p" yaitu "id element" laman yang berarti "paragraf". jikalau kau 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 yaitu menyerupai pola berikut ini:

.menu,.sub-menu,.post-tittle,widget-tittle{text-transform:capitalize;font-size:16px;}

Untuk mengetahui id element situs kita dapat melaksanakan inspect element pada setiap bab penggalan situs, aku haraf kau sudah mengerti ihwal 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 kau tulis) saja. Demikian saja klarifikasi ihwal css font style (font-variant) dan silahkan di coba dan beri komentari ihwal post ini.