Tutorial Belajar CSS: Cara Mengubah Tampilan Huruf Kapital (Case) Teks HTML

Posted on

Pada panduan CSS kali ini kita akan mempelajari Cara Mengubah Tampilan Huruf Kapital (Case) HTML dengan CSS. Property yang akan kita pelajari ialah text-transform dan font-variant.


Cara Mengubah Huruf Kapital teks dengan CSS

Kadang kala kita ingin mengubah sebuah kalimat menjadi huruf besar seluruh atau huruf kecil seluruh. Bagi kebutuhan ini, CSS menyediakan properti text-transform. Sama seperti program word processing seperti Microsoft Word, kita dapat mengubah tampilan teks menjadi huruf besar seluruh (uppercase), menjadi huruf kecil seluruh (lowercase) atau membangun huruf pertama-tama setiap kalimat menjadi huruf besar (capitalize).

Properti text-transform dapat diisi dengan 4 nilai: uppercase, lowercase, capitalize dan none. Khusus bagi nilai none, nilai ini akan menghapus seluruh efek dari text-transform.

Biasanya, properti text-transform digunakan bagi bagian tertentu dari halaman web agar sama pada tampilan, seperti judul sebuah artikel.


Cara Mengubah Huruf Teks menjadi Small Caps

Seandainya text-transform belum mencukupi, CSS menyediakan sebuah properti lain bagi mengubah tampilan teks, yakni font-variant. Properti font-variant hanya dapat diisi dengan 2 nilai, yakni: small-caps dan normal.

font-variant: small-caps akan membangun teks menjadi sedikit lebih kecil, namun dengan huruf besar seluruh. Fitur ini dapat digunakan bagi membangun kesan ‘old-school’ pada teks, dan cocok digunakan bagi judul artikel. Nilai normal bagi font-variant digunakan bagi menghapus efek small-caps yang terdapat.


Panduan Cara Mengubah Huruf Kapital (Case) HTML dengan CSS

Selaku bahan panduan, berikut ialah contoh kode HTML dan CSS pada pemakaian properti text-transform dan font-variant:

 Mengubah tampilan huruf dengan text-transform dan font-variant lebih banyak digunakan bagi bagian-bagian urgen dari web seperti judul artikel, navigasi, atau sidebar. Efek yang diraih membangun tampilan ahir menjadi seragam, terlepas dari cara penulisan teks yang diaplikasikan.


eBook CSS Uncover Duniailkom

Seandainya sahabat ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih komplit, mulai dari mendasar hingga fitur terbaru CSS3 seperti animasi dan web memiliki tampilan yang dinamis. Penjelasan lebih lanjut dapat ke: eBook CSS Uncover Duniailkom.


Sumber https://www.duniailkom.com/