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

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


Cara Mengubah Huruf Kapital teks dengan CSS

Kadang kala kita ingin mengubah sebuah kalimat menjadi huruf besar semua atau huruf kecil semua. Untuk keperluan ini, CSS menyediakan properti text-transform. Sama seperti aplikasi word processing seperti Microsoft Word, kita bisa mengubah tampilan teks menjadi huruf besar semua (uppercase), menjadi huruf kecil semua (lowercase) atau membuat huruf pertama setiap kalimat menjadi huruf besar (capitalize).

Properti text-transform bisa diisi dengan 4 nilai: uppercase, lowercase, capitalize dan none. Khusus untuk nilai none, nilai ini akan menghapus semua efek dari text-transform.

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


Cara Mengubah Huruf Teks menjadi Small Caps

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

font-variant: small-caps akan membuat teks menjadi sedikit lebih kecil, namun dengan huruf besar semua. Fitur ini bisa digunakan untuk membuat kesan 'old-school' dalam teks, dan cocok digunakan untuk judul artikel. Nilai normal untuk font-variant digunakan untuk menghapus efek small-caps yang ada.


Tutorial Cara Mengubah Huruf Kapital (Case) HTML dengan CSS

Sebagai bahan tutorial, berikut adalah contoh kode HTML dan CSS dalam penggunaan properti text-transform dan font-variant:

<!DOCTYPE html>
<html>
<head>
<title>Belajar text-transform dan font-variant</title>
<style type="text/css">
   .upper { text-transform: uppercase; }
   .lower { text-transform: lowercase; }
   .cap   { text-transform: capitalize; }
   .small { font-variant:   small-caps; }
</style>
</head>

<body>
   <h2>Belajar CSS: text-transform dan font-variant</h2>
   <p class="upper">KALIMAT dengan text-transform: UPPERCASE</p>
   <p class="lower">KALIMAT dengan text-transform: lowercase</p>
   <p class="cap">KALIMAT dengan text-transform: Capitalize</p>
   <p class="small">Kalimat dengan font-variant: small-caps</p>
</body>
</html>

Tutorial Belajar CSS - Contoh Cara Mengubah Tampilan Huruf Kapital (Case) Teks HTMLMengubah tampilan huruf dengan text-transform dan font-variant lebih banyak digunakan untuk bagian-bagian penting dari web seperti judul artikel, navigasi, atau sidebar. Efek yang dihasilkan membuat tampilan akhir menjadi seragam, terlepas dari cara penulisan teks yang dipakai.


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

9 Comments

  1. Santri Drajat
    20 Mar 16
  2. :v
    10 Jun 16
  3. Hasan
    22 Feb 19
  4. Ardli Firdaus
    18 Jul 19
  5. tari
    08 Jan 20
    • Andre
      08 Jan 20
  6. Efran
    01 Mar 20
  7. Lubistop
    02 Aug 20

Add Comment