Frontend : CSS Bagian 8 – Styling Teks

Teks hal yang paling mendasar dalam sebuah website. Teks yang agak ribet stylenya akan membuat pembaca akan lelah. Pada kali ini kita akan mempelajari tentang manipulasi teks, seperti mengubah jenis font teks, ukuran teks, menebalkan teks, membuat teks menjadi miring, merubah warna teks, dan lain-lain. Yuk langsung aja kita coding…

<!DOCTYPE html>
<html>
<head>
	<title>Frontend : CSS Bagian 8 - Styling Teks</title>
	<style type="text/css">
		.font {
			font-family: cursive;
		}
		.tebal {
			font-weight: bold;
		}
		.size {
			font-size: 25px;
		}
		.miring {
			font-style: italic;
		}
		.warna {
			color: blue;
		}
		.garis_bawah {
			text-decoration: underline;
		}
		.huruf_kecil {
			text-transform: lowercase;
		}
		.huruf_besar {
			text-transform: uppercase;
		}
	</style>
</head>
<body>
	<p class="font">Styling Teks</p>
	<p class="tebal">Styling Teks</p>
	<p class="size">Styling Teks</p>
	<p class="miring">Styling Teks</p>
	<p class="warna">Styling Teks</p>
	<p class="garis_bawah">Styling Teks</p>
	<p class="huruf_kecil">Styling Teks</p>
	<p class="huruf_besar">Styling Teks</p>
</body>
</html>


Penjelasan :

1. Baris 6 – 8, merubah jenis font dari teks

2. Baris 9 – 11, membuat teks menjadi bold (tebal)

3. Baris 12 – 14, merubah ukuran dari teks

4. Baris 15 – 17, merubah teks menjadi italic (miring)

5. Baris 18 – 20, merubah warna teks

6. Baris 21 – 23, memberikan garis bawah (underline) teks

7. Baris 24 – 26, merubah teks menjadi lowercase (huruf kecil)

8. Baris 27 – 29, merubah teks menjadi uppercase (huruf besar)


Hasil :

Leave a Reply

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