Dalam belajar CSS bagian 12, kita telah belajar tentang apa itu CSS Flexbox Layout beserta contohnya. Pada series lanjutan belajar CSS bagian 13 ini, kita akan belajar tentang property CSS Display.
Apa itu Properti CSS Display?
CSS Display adalah salah satu properti CSS yang sering digunakan dan berfungsi mengatur bagaimana elemen HTML ditampilkan melalui browser. Karena fungsinya untuk mengatur tata letak elemen HTML, properti ini dapat memungkinkan desainer website untuk menentukan apakah elemen HTML ditampilkan sesuai dengan kebutuhan web tersebut.
Dasar Penggunaan Properti CSS Display
Untuk menggunakan property CSS Display, anda harus membuat sebuah elemen HTML dengan property display. Berikut contohnya:
.container {
display: block;
}
Properti ini menentukan apakah sebuah elemen akan tampil sebagai block, di mana ia memenuhi seluruh lebar baris, sebagai elemen sebaris (inline), yang hanya menggunakan ruang sesuai dengan kontennya, atau sebagai kombinasi lainnya seperti flex dan grid yang memungkinkan pengaturan tata letak lebih kompleks.
Beberapa nilai-nilai kategori yang dapat Anda gunakan dalam membangun tampilan website dengan properti css display sebagai berikut.
Nilai Dasar Properi CSS Display
Nilai dasar yang sering digunakan untuk property display yaitu:
block
Elemen HTML akan ditampilkan sebagai elemen blok, yang akan memulai baris baru dan akan mengambil lebar penuh pada elemen html-nya. Contoh elemen html yang sering digunakan : < div >, < section >, < p > secara default. Berikut contohnya :
.display-block {
display: block;
}
inline
Elemen HTML akan ditampilkan sebagai elemen sebaris, yang tidak memulai baris baru dan hanya mengambil lebar yang dibutuhkan. Contoh elemen html yang sering digunakan : < span >, < a >, < strong > secara default. Berikut contohnya :
.display-inline {
display: inline;
}
inline-block
Kombinasi atau gabungan dari nilai inline dan nilai block. Elemen HTML akan tetap berada dalam baris namun dapat memiliki properti tinggi dan lebar yang dapat disesuaikan. Berikut contohnya:
.display-inline-block {
display: inline-block;
}
Nilai untuk Tata Letak Modern Properi CSS Display
flex
Mengubah elemen HTML menjadi sebuah kontainer yang fleksibel (flex container) yang secara responsif baik dalam arah horizontal maupun vertikal. Anda dapat mempelajari artikel berikut : Fungsi dan Contoh CSS Flexbox Layout
grid
Mengubah elemen HTML menjadi sebuah kontainer grid yang dapat disusun dalam bentuk baris dan kolom secara mudah, sehingga menghasilkan tata letak yang lebih teratur dan simetris. Anda dapat mempelajari artikel berikut : Fungsi dan Contoh Grid Layout
Nilai Khusus Properi CSS Display
none
Semua jenis elemen HTML tidak akan ditampilkan dan tidak mengambil ruang dalam tata letak atau tampilan website di browser. Berikut contohnya :
.display-none {
display: none;
}
contents
Elemen HTML dihapus dari tata letak web browser tetapi turunan elemen tersebut akan tetap di render seolah-olah menggantikan elemen itu. Berikut contohnya :
.display-contents {
display: contents;
}
table
Membuat elemen berperilaku seperti elemen tabel. Contoh elemen html yang digunakan : < table > secara default. Berikut contohnya :
.display-table {
display: table;
}
table-row, table-cell, table-column, dll.
Digunakan untuk meniru perilaku bagian-bagian dari element table. Berikut contohnya:
.display-table-row {
display: table-row;
}
Nilai Eksperimental (atau Khusus) Properi CSS Display
list-item
Elemen HTML akan berperilaku dan menampilkan seperti item daftar (contoh: < li >). Berikut contohnya :
.display-list-item {
display: list-item;
}
Nilai Global Properi CSS Display
inherit
Mengambil nilai dari elemen html induk. Berikut contohnya:
.display-inherit {
display: inherit;
}
initial
Mengatur ke nilai default properti. Berikut contohnya:
.display-initial {
display: initial;
}
unset
Menghapus nilai elemen; bertindak seperti inherit jika properti diwariskan atau initial jika tidak diwariskan. Berikut contohnya:
.display-unset {
display: unset;
}
Contoh Implementasi CSS Display
Berikut adalah contoh script CSS variables yang telah diterapkan ke kode html.
<!DOCTYPE html>
<html>
<head>
<title>Contoh CSS Display</title>
<style>
.display-block {
display: block;
background: lightcyan;
}
.display-inline {
display: inline;
background: chartreuse;
}
.display-inline-block {
display: inline-block;
background: antiquewhite;
}
.display-grid {
display: grid;
background: gainsboro;
}
.display-flex {
display: flex;
background: aquamarine;
}
.display-contents {
display: contents;
background: aquamarine;
}
.display-none {
display: none;
}
.display-table {
display: table;
background: gold;
}
.display-table-row {
display: table-row;
background: lightblue;
}
.display-list-item {
display: list-item;
background: lightgoldenrodyellow;
}
.display-inherit {
display: inherit;
background: sandybrown;
}
.display-initial {
display: initial;
background: moccasin;
}
.display-unset {
display: unset;
background: aqua;
}
</style>
</head>
<body>
<div class="display-block">
Elemen HTML menggunakan display:block
</div>
<div class="display-inline">
Elemen HTML menggunakan display:inline
</div>
<div class="display-inline-block">
Elemen HTML menggunakan display:inline-block
</div>
<div class="display-flex">
Elemen HTML menggunakan display:flex
</div>
<div class="display-grid">
Elemen HTML menggunakan display:grid
</div>
<div class="display-none">
Elemen HTML menggunakan display:none
</div>
<div class="display-contents">
Elemen HTML menggunakan display:contents
</div>
<div class="display-table">
Elemen HTML menggunakan display:table
</div>
<div class="display-table-row">
Elemen HTML menggunakan display:table-row
</div>
<div class="display-list-item">
Elemen HTML menggunakan display:list-item
</div>
<div class="display-inherit">
Elemen HTML menggunakan display:inherit
</div>
<div class="display-initial">
Elemen HTML menggunakan display:initial
</div>
<div class="display-unset">
Elemen HTML menggunakan display:unset
</div>
</body>
</html>
Kemudian jika di testing di browser untuk akan menampilkan screenshoot seperti berikut:

Kesimpulan
Memahami properti CSS display sangat penting untuk menciptakan tata letak yang responsif dan dinamis pada berbagai macam perangkat. Dengan kombinasi nilai-nilai seperti flex dan grid, pengembangan pada website Anda akan jauh lebih mudah dan efisien untuk dikelola dalam jangka panjang.
Demikian artikel belajar CSS bagian ke 13 tentang CSS Display. Ikuti terus series belajar CSS selanjutnya, untuk meningkatkan kemampuan CSS Anda. Semoga bermanfaat.