Belajar CSS Sesi 5:Cara mengubah huruf kapital dengan menggunakan CSS

February 26, 2017
No Comments
Cara mengubah huruf kapital dengan menggunakan CSS – Halo semuanya… Kali ini ShortCutID kembali lagi membuatkan artikel tutorial seputar CSS. Kali ini saya akan memngajarkan anda untuk mengubah huruf kapital dengan menggunakan CSS.

Bagi anda yang belum tahu, text yang berada pada kode CSS dapat dibuat huruf kecil semua maupun menjadi huruf besar semua, itu semua tergantung dari kebutuhan dan keinginan anda.

Oiya anda juga perlu mengetahui bahwa dalam sebuah properti text-transform dapat berisi 4 poin, nah poin-poin itu adalah Capitalize, Uppercase, Lowercase, dan none.

Jika anda belum tahu mengenai penjelasan dan fungsi dari 4 poin text transform diatas, maka disini saya akan menjelaskan mengenai itu semua, namun hanya penjelasan singkat saja.

– Capitalize: Poin capitalize ini berfungsi untuk merubah semua huruf pada awal kata atau pun awal kalimat menjadi huruf besar atau huruf kapital
– Uppercase: Poin kedua ini berfungsi untuk merubah semua text yang dimasukkan menjadi huruf besar atau huruf kapital
– Lowercase: Poin ketiga ini bernama Lowercase, dan ini adalah kebalikan dari Uppercase, yaitu merubah semua text yang dimasukkan menjadi huruf kecil
– None: Poin None ini berfungsi untuk menghapus semua efek yang sudah anda masukkan atau berada di text-transform

Nah, jika anda mengetahui fungsi dan penjelasan singkat dari capitalize, uppercase, lowercase, dan none pasti anda sudah kebayang kan bagaimana text yang akan anda buat dengan memasukkan efek-efek terebut.

<!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 mengenai CSS sederhana bersama ShortCutID</h2>
   <p class="upper">KALIMAT YANG AKAN ANDA BUAT dengan menggunakan text-transform: UPPERCASE</p>
   <p class="lower">KALIMAT YANG AKAN ANDA BUAT dengan menggunaan text-transform: lowercase</p>
   <p class="cap">KALIMAT YANG AKAN ANDA BUAT dengan menggunakantext-transform: Capitalize</p>
   <p class="small">KALIMAT YANG AKAN ANDA BUAT dengan menggunakan font-variant: small-caps</p>
</body>
</html>

Mungkin hanya itu saja tutorial dasar CSS, semoga anda dapat memahami, jangan lupa di share jika menurut anda bermanfaat, terima kasih.

Tags: , , , , , ,