Belajar Fungsi Text-transform pada CSS

Membuat tampilan website menggunakan HTML saja tanpa CSS rasanya ada yang kurang. Bisa jadi tampilan website yang kita inginkan, berubah menjadi tampilan website kaku tidak menarik perhatian. Karena era sekarang banyak orang-orang berlomba untuk membuat website sedemikian rupa agar dapat menarik pengunjung dan betah berlama pada website kita. Karena hal itu akan menentukan kualitas website kita seperti apa. Apalagi jika website kita adalah website toko online, tentu berdampak pada penghasilan bukan ?.

Mengenai CSS, ada beberapa fungsi yang dapat kalian gunakan dalam menunjang untuk tampilan website. Ada satu fungsi CSS yang dapat memanipulasi teks pada HTML, yaitu text-transform. Ya, kita akan belajar fungsi text-transform pada CSS. Apa fungsi text-transform itu ?, fungsinya adalah untuk memanipulasi teks pada HTML. Contoh sederhananya adalah apabila kalian mempunyai paragraf dengan menggunakan huruf kecil semua, lalu tiba-tiba ingin dirubah menjadi huruf besar semua. Tentu tidak mungkin untuk merubahnya satu persatu. Maka dengan text-transform ini kalian cukup menambahkan sebaris scripts css maka teks tersebut akan berubah semua.

Text-transform memiliki 3 buah nilai, yaitu uppercase, lowercase, dan capitalize. Uppercase untuk huruf besar semua, lowercase kebalikan dari uppercase, menjadikan huruf kecil semua. Lalu yang terakhir capitalize untuk huruf besar pada awal kata saja. Lalu bagaimana cara penulisanya?. Caranya cukup mudah, untuk lebih jelasnya kalian bisa ikuti contoh code dibawah ini.

index.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>

Pada script diatas terdapat 3 buah paragraf dengan class uppercase, lowercase dan capitalize. Jadi tiap-tiap paragraf tersebut akan mewakilkan 3 nilai yang ada pada text-transform. Lalu sekarang buat cssnya seperti ini.

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

script diatas kalian sisipkan diantara tag <head></head> pada html. Dan jangan lupa untuk diapit oleh tag <style></style> sehingga seperti ini strukturnya.

<!DOCTYPE html>
<html>
<head>
   <style> code css </style>
</head>

Setelah sudah kalian simpan filenya dengan format html. Dan lihat hasilnya pada browser kalian. Hasilnya akan seperti ini.

Seperti itu, mudah bukan ?

Sekian pembahasan mengenai belajar fungsi text-transform pada CSS. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *