Dalam tutorial kali ini kita akan membahas mengenai pengaturan property display dengan menggunakan CSS, property ini digunakan untuk mengatur bagaimana sebuah element didalam web itu ditampilkan.
Setiap elemen HTML memiliki default settingan bagaimana mereka ditampilkan, secara garis besar default tampilan tersebut dibagi menjadi 2 yaitu :
- Block Level Element (Element ditampilkan di baris baru)
- Inline Level Element (Element ditampilkan di baris yang sama)
Ini adalah konsep yang dimiliki oleh HTML untuk mengatur bagaimana sebuah elemen ditampilkan.
Element yang termasuk dalam Block Level Element
Beberapa Element yang merupakan Block Level Element adalah :
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
dan masih banyak lagi untuk element yang lain, anda bisa melihat dokumentasi dari mozilla di link berikut ini :
Element yang termasuk dalam Inline Level Element
Beberapa Element yang merupakan Inline Level Element adalah :
- <span>
- <a>
- <img>
dan masih banyak lagi element lain yang masuk ke dalam inline level element, anda bisa melihat dokumentasi dari mozilla di link berikut ini :
Perhatikan contoh perbedaan dari Block Level Element dan Inline Element dibawah ini :
Keterangan :
- Pada contoh Block Level Element kita menggunakan element paragraf, nah perhatikan pada gambar diatas ketika kita menampilkan paragraf baru, paragraf ditampilkan di baris baru, hal tersebut karena kita menggunakan element yang bertipekan block level element.
- Pada Contoh Inline Element kita menggunakan element <a>, nah perhatikan element link ditampilkan dibaris yang sama, hal tersebut karena element <a> bertipekan inline element.
Merubah Nilai Default Display
Konsep ini digunakan untuk merubah nilai default display pada sebuah element, semisal nih di contoh atas paragraf baru ditampilkan di baris baru, dan link baru ditampilkan pada baris yang sama.
Semisal nilai default untuk display itu kita rubah menjadi, paragraf baru ditampilkan dibaris yang sama, dan link baru ditampilkan di baris baru.
Nah perhatikan Skrip dibawah ini…
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
p{
display: inline;
}
a{
display: block;
}
</style>
</head>
<body>
<h1>Contoh Display:inline </h1>
<p>Ini adalah paragraf 1</p>
<p>Ini adalah paragraf 2</p>
<p>Ini adalah paragraf 3</p>
<br/>
<h1>Contoh Display:block </h1>
<a href="google.com">Google</a><a href="youtube.com">Youtube</a>
</body>
</html>Semisal kita simpan dengan nama display_block_inline.html, lalu kita buka di browser maka hasilnya adalah seperti berikut :
Penjelasan :
- Paragraf baru ditampilkan di baris yang sama, padahal seharusnya elemen paragraf yang bertipekan block level element ditampilkan di baris baru, hal tersebut dikarenakan kita menambahkan property display:inline dengan selector p, yang menyebabkan paragraf baru ditampilkan di baris yang sama.
- link baru ditampilkan di baris baru, padahal seharusnya elemen <a>/link yang bertipekan inline element ditampilkan di baris yang sama, hal tersebut dikarenakan kita menambahkan property display:block dengan selector p, yang menyebabkan link baru ditampilkan di baris baru.
Menyembunyikan Element dengan CSS
selain fitur untuk merubah nilai default display pada sebuah element, anda juga bisa menyembunyikan sebuah element HTML dengan menggunakan property CSS terdapat 2 property yang bisa anda gunakan :
- display:none;
- visibility:hidden;
Untuk memahami konsep ini silahkan perhatikan skrip dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.a{
display: none;
}
.b{
visibility: hidden;
}
</style>
</head>
<body>
<h1>Contoh Display:none</h1>
<p>Ini adalah Paragraf 1</p>
<p class="a">Ini adalah Paragraf 2</p>
<p>Ini adalah Paragraf 3</p>
<p>Ini adalah Paragraf 4</p>
<br/>
<h1>Contoh visibility:hidden</h1>
<p>Ini adalah Paragraf 1</p>
<p class="b">Ini adalah Paragraf 2</p>
<p>Ini adalah Paragraf 3</p>
<p>Ini adalah Paragraf 4</p>
</body>
</html>Semisal kita simpan dengan nama display_none_hidden.html, lalu kita buka dibrowser maka hasilnya adalah :
Penjelasan :
- pada contoh display:none, paragraf 2 yang menggunakan class=’a’ mendapatkan property display:none; sehingga dianggap tidak ada sehingga setelah paragraf 1 langsung ditampilkan paragraf 3
- pada contoh visibility:hidden, paragraf 2 yang menggunakan class=’b’ mendapatkan property visibility:hidden; sehingga disembunyikan, sehingga setelah paragraf 1 ada sebuah jarak yang sebenarnya adalah paragraf 2, baru ditampilkan paragraf 3
itu adalah perbedaan dari penggunaan display:none dan visibility:hidden.
Kurang lebih seperti itu teman – teman untuk pembahasan mengenai property display dan visibility yang digunakan untuk mengatur bagaimana sebuah elemen HTML ditampilkan, jika ada yang ingin didiskusikan bisa di kolom komentar, sekian dulu sampai jumpa di tutorial CSS Selanjutnya.