Mengatur Kapitalisasi Karakter Menggunakan Text Transform

Hai­­ teman-teman, kembali lagi di kursuswebdesign.com. Kali ini saya akan memperkenalkan tentang salah satu property yang ada di css. Dimana property ini akan membantu kita ketika ingin membuat sebuah tulisan yang rapih dalam segi besar kecilnya huruf dengan Mengatur Kapitalisasi Karakter Menggunakan Text Transform.

Oke langsung saja ya kita buat contoh struktur htmlnya. Disini saya akan ambil studi case membuat portal berita, karena property ini akan sangat bermanfaat sekali untuk menuliskan setiap judul yang kita posting di website portal berita.

<!Doctype html>
<html>
	<head>
		<title>Mengatur Kapitalisasi Karakter Menggunakan Text Transform</title>
	</head>
	<body>
		<div class="container">
		<header>
			<h1>ini website portal berita</h1>
		</header>
		<article>
			<h1>ini content berita</h1>
			<hr>
			<ul>
				<li>
					<h3>what is lorem ipsum?</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
					Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
					when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
					into electronic typesetting, remaining essentially unchanged. It was 
					popularised in the 1960s with the release of Letraset sheets containing Lorem
					Ipsum passages, and more recently with desktop publishing software like Aldus
					PageMaker including versions of Lorem Ipsum.</p>
				</li>
				<li>
					<h3>why do we use it?</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
					Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
					when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
					into electronic typesetting, remaining essentially unchanged. It was 
					popularised in the 1960s with the release of Letraset sheets containing Lorem
					Ipsum passages, and more recently with desktop publishing software like Aldus
					PageMaker including versions of Lorem Ipsum.</p>
				</li>
				<li>
					<h3>where can I get some?</h3>
					<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
					Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
					when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap 
					into electronic typesetting, remaining essentially unchanged. It was 
					popularised in the 1960s with the release of Letraset sheets containing Lorem
					Ipsum passages, and more recently with desktop publishing software like Aldus
					PageMaker including versions of Lorem Ipsum.</p>
				</li>
			</ul>
		</article>
		</div>
	</body>
</html>

Nah setelah selesai kita  buat style cssnya untuk membuat judul tulisan pada website portal berita ini rapi dengan cara Mengatur Kapitalisasi Karakter Menggunakan Text Transform. Berikut script cssnya ya teman-teman.

<style>
	.container{margin:auto; width: 900px;}
	header{background: salmon; text-align: center;}
	h1{text-transform: uppercase;}
	h3{text-transform: capitalize;}
</style>

Nah, maka setiap judul yang kita berikan value uppercase dan capitalize di property text transform pada cssnya akan akan tampil seperti pada gambar di bawah ini.

Untuk value dari property text transform tidak hanya uppercase dan capitalize saja, tetapi ada 6 value, yaitu:

• None  = Tidak ada kapitalisasi, teks tertulis seperti apa adanya atau default·
• Capitalize = Mengubah karakter atau huruf pertama setiap kata menjadi huruf besar·
• Uppercase = Mengubah semua karakter atau huruf ke huruf besar·
• Lowercase = Mengubah semua karakter atau huruf ke huruf kecil·
• Initial = Mensetting semua karakter ini ke nilai defaultnya·         Inherit = Mewarisi properti ini dari elemen induknya

Demikian artikel tentang cara Mengatur Kapitalisasi Karakter Menggunakan Text Transform. Semoga bermanfaat dan selamat mencoba ya teman-teman.