Mengubah Huruf Menjadi Besar, Kecil dan Kapital Dengan CSS

Mengubah Huruf Menjadi Besar, Kecil dan Kapital Dengan CSS

Text Transformation

Properti text-transform digunakan untuk menentukan huruf besar dan huruf kecil tulisan.

Hal ini dapat digunakan untuk mengubah semua tulisan menjadi huruf besar atau kecil, atau menggunakan huruf kapital pada huruf pertama setiap kata:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<h1>Menggunakan properti text-transform</h1>

<p class="uppercase">Teks ini diubah menjadi huruf besar.</p>
<p class="lowercase">Teks ini diubah menjadi huruf kecil.</p>
<p class="capitalize">Teks ini menggunakan huruf kapital.</p>

</body></html>

Jalankan Contoh

Contoh

Ubah tulisan pada beberapa elemen <div> :

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-transform: uppercase;
}

div.b {
  text-transform: lowercase;
}

div.c {
  text-transform: capitalize;
}
</style>
</head>
<body>
<h1>Properti text-transform</h1>

<h2>text-transform: uppercase:</h2>
<div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elite.</div>

<h2>text-transform: lowercase:</h2>
<div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elite.</div>

<h2>text-transform: capitalize:</h2>
<div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elite.</div>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Dekorasi Tulisan Dengan CSS
Tutorial setelahnya : Mengatur Spasi Tulisan Dengan CSS
Semua Tutorial CSS : Tutorial CSS

Tinggalkan Balasan