Properti dalam Display pada CSS

Seperti yang telah kita ketahui, CSS dalam bahasa pemrograman web berfungsi untuk mengatur tampilan website. Mulai dari ukuran, warna, hingga tata letak semua bisa kita atur menggunakan CSS. Dalam CSS terdapat banya sekali perintah yang dapat kalian gunakan untuk menunjang itu semua. Salah satu yang akan kita bahas pada artikel kali ini adalah perintah display. Lebih tepatnya kita akan membahas properti dalam display pada CSS.

Display pada CSS ini berfungsi untuk mengatur jenis tampilan pada elemen tertentu yang telah kita atur. Properti dalam display ini yang sering digunakan ada 2 yaitu block dan inline. Keduanya memiliki fungsi yang berbeda. Untuk lebih jelasnya mari kita coba praktekkan agar pemahamanya lebih mendetail.

display.html

<html>
<head>
	<meta charset="UTF-8">
	<title> Properti Display pada CSS </title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
		<div class="ijo">
			<span class="block">Test paragraf 1</span> ini lanjutan dari paragraf 1.	
		</div>
		
		<div class="merah">
			<span class="inline">Test paragraf 2</span> ini lanjutan dari paragraf 1.
		</div>
	</div>
</body>
</html>

style.css

.container{
	width: 500px;
	margin:auto;
}
.ijo{
	background: green;
}
.merah{
	background: red;
}
.block{
	display: block;	
}
.inline{
	display: inline;	
}

Setelah sudah kalian simpan kedua file tersebut sesuai dengan nama pada judulnya. Karena file ini saling berhubungan, maka kalian harus menyimpan kedua file tersebut dalam satu folder yang sama. Untuk melihat hasilnya kalian cukup membuka file html pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

Hasilnya bisa kalian lihat. Pada paragraf pertama dalam background warna hijau terlihat barisnya menjadi 2. Padahal dalam perintah HTMLnya, baris tersebut dalam satu baris yang sama. Ini dikarenakan pada baris pertama, kalimat yang kita apit dengan class block kita berikan perintah display:block pada CSSnya. Sehingga ruang kalimat tersebut akan memanjang sampai ujung, dan yang terjadi adalah kalimat selanjutnya harus ditulis dibaris kedua. Sedangkan pada paragraf kedua bentuk kalimatnya masih sebaris, karena pada CSSnya kita berikan display:inline, yang membuat kalimat ini akan menjadi sebaris selagi ruang baris paragraf tersebut masih muat.

Mudah bukan ?

Sekian pembahasan mengenai properti dalam display pada CSS. Semoga bermanfaat.