Belajar Mengubah Teks Menggunakan CSS
buayaberdiri.blogspot.com - Di CSS kita dapat mengubah teks / text pada elemen html , teks yang dapat kita ubah adalah huruf,kita dapat merubahnya menjadi huruf kapital ,huruf besar dan huruf kecil di CSS (Cascading Style Sheets).
text-transform adalah properti yang ada di css yang dapat mengubah font atau huruf pada element html menjadi huruf besar,kecil dan kapital.Setiap penulisan sintaks CSS, pada setiap properti pasti akan memiliki value,untuk value yang terdapat pada properti text-transform adalah uppercase,lowercase dan capitalize.
Mengubah huruf kecil menjadi Huruf Kapital di CSS
Pada contoh dibawah ini adalah cara mengubah huruf kecil menjadi huruf kapital di css (Cascading Style Sheets) dengan mudah,contoh penulisan kode cssnya dibawah ini :
.changeFont{
text-transform: capitalize;
}
Berikut ini adalah contoh kode css pada elemen html :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Mengubah Huruf Kapital di CSS</title>
<style>
.changeFont{
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="changeFont">
ini adalah contoh text huruf kapital
</p>
</body>
</html>
Mengubah huruf kecil menjadi Huruf Besar di CSS
Sekarang kita bisa mengubah huruf kecil menjadi huruf besar semua di css atau juga mengubah dari huruf kapital menjadi huruf besar semua,contoh penulisan kode cssnya lihat dibawah ini :
Berikut ini adalah contoh kode css pada elemen html :
Mengubah huruf Besar menjadi Huruf Kecil di CSS
.changeFont{
text-transform: uppercase;
}
Berikut ini adalah contoh kode css pada elemen html :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Mengubah Huruf Besar di CSS</title>
<style>
.changeFont{
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="changeFont">
ini adalah contoh text huruf besar
</p>
</body>
</html>
Mengubah huruf Besar menjadi Huruf Kecil di CSS
Di CSS sekarang kita dapat mengubah huruf besar menjadi huruf kecil ataupun dari huruf kapital menjadi huruf kecil semua di kode css,berikut ini adalah contoh penulisan kode cssnya :
.changeFont{
text-transform: lowercase;
}
Berikut ini adalah contoh kode css pada elemen html :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Mengubah Huruf Kecil di CSS</title>
<style>
.changeFont{
text-transform: lowercase;
}
</style>
</head>
<body>
<p class="changeFont">
ini adalah contoh text huruf kecil semua
</p>
</body>
</html>
Keterangan
| Sintaks | Keterangan |
| text-transform | Nama properti css untuk mengubah font atau huruf |
| uppercase | Value css untuk mengubah menjadi huruf besar |
| lowercase | Value css untuk mengubah menjadi huruf kecil |
| capitalize | Value css untuk mengubah menjadi huruf kapital |