Rumahweb Journal
Banner - belajar css bagian 13

Belajar CSS Bagian 13: Mengenal Properti CSS Display

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:

Pindah Hosting ke Rumahweb Gratis

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:

Properti CSS Display - belajar css 13

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.

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 0 / 5. Vote count: 0

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

VPS Alibaba

Dito Priwanto

banner pop up - Pindah Hosting ke Rumahweb