Skip to main content

Belajar Css Font Style Tahap Dasar - Tutorial Blog

atau Css merupakan salah satu dari bahasa pemrograman yang bertujuan untuk mengatur sebua 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 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 perihal 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 sahabat 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 semoga selalu menampilkan abjad besar. Makara meskipun aku menulis sajian 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 sajian 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 potongan situs, aku haraf kau sudah mengerti perihal inspect element.

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

Comments

Post a Comment

Popular posts from this blog

Widget Contact Form Responsive

Widget Contact Form Responsive - Contact Form atau Contact Us merupakan satu dari beberapa widget penting yang harus ada di setiap laman website termasuk situs blogger, widget contact form merupakan mediator yang menghubungkan antara visitor dengan pengelola situs, Contact form (formulir kontak) biasanya dipakai untuk mengirim pesan berupa kritik, saran, pemesanan pemasangan iklan dan lain-lain. selain itu contact form juga berfungsi sebagai penyaring spam atau malware yang kemungkinan dikirim oleh visitor badung ke e-mail pengelola situs. Platform blogger bekerjsama sudah menyediakan widget contact form untuk situs-situs blog, namun tampilan contact form yang disediakan masih sangat sederhana "default" pengelola situs harus menyesuikan style contact form nya sendiri dengan sedikit penambahan css untuk menciptakan tampilan contact form menjadi lebih elegant. Widget Contact Form Responsive Cara Membuat Laman Contact Form Blogger Login ke Blogger dan buat satu laman ...
Post a Comment
Read more

Cara Buat Tombol Share Sticky Bottom (Melayang Dibawah)

Cara Membuat Share Button Sticky Bottom Blogger - Akhir-akhir ini berbagai variasi tombol share muncul ke pasaran dunia cyber " website & blog " tentunya, dan yang paling terkenal ialah tombol share sticky bottom dan sidebar . Gaya yang lainnya tombol share drop-down. Pada artikel ini aku akan membahas Cara menciptakan tombol share sticky bottom (melayang di bawah) pada perangkat mobile (Handphone) dan tombol share sticky sidebar "melayang di samping jikalau di lihat melalui PC. Adapun tombol share yang akan kita buat merupakan tombol share (share button) yang ringan "sticky bottom" dengan sedikit script namun sangat responsive pada perangkat seluler. Sehingga tidak memberi efek jelek pada loading situs anda. Langsung saja simak langkah-langkah cara menciptakan tombol share sticky bottom berikut ini. Kunjungi laman penyedia tombol share yaitu www.addthis.com Silahkan login dengan dengan e-mail atau facebook anda untuk masuk ke dashboard add...
Post a Comment
Read more

Cara Paralel Exhaust Dengan Lampu

Paralel Hexos Dengan Lampu Paralel Exhaust Dengan Lampu maksudnya yaitu menggabungkan antara exhaust atau fan dengan lampu ke satu switch. Umumnya pada benda electronic menyerupai exhaust memakai jenis kabel NYY isi 3 yaitu Phase, Netral dan Ground sebagai penghubung. Sedangkan Pada instalasi listrik fitting lampu hanya memnggunakan kabel Jenis NYA sebanyak 2 kabel saja yaitu kabel Phase dan Netral saja. Lalu bagaimana " cara memparalel exhaust dengan lampu? " Bahasa singkat dalam teori instalasi listrik " Gabungkan antara netaral exhaust ke netral lampu dan phase ke phase sedangkan kabel ground hubungkan dengan kabel ground pada sumber ground ". Bagaimana mengetahui kabel phase, netral dan ground pada benda electronic menyerupai exhaust? simak panduan instalasi listrik di bawah ini. Warna Kabel NYY Pada barang electronic menyerupai exhaust umumnya ada tiga warna yaitu Biru, Coklat, Dan Kuning atau Coklat, Hitam dan putih.  Biru sebagai kabel Phase ...
Post a Comment
Read more