{"id":52887,"date":"2025-01-28T14:46:29","date_gmt":"2025-01-28T07:46:29","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=52887"},"modified":"2025-02-06T14:29:55","modified_gmt":"2025-02-06T07:29:55","slug":"belajar-css-bagian-13","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-13\/","title":{"rendered":"Belajar CSS Bagian 13: Mengenal Properti CSS Display"},"content":{"rendered":"\n

Dalam belajar CSS bagian 12, kita telah belajar tentang apa itu CSS Flexbox Layout<\/a> beserta contohnya. Pada series lanjutan belajar CSS bagian 13 ini, kita akan belajar tentang property CSS Display.<\/p>\n\n\n\n\n\n

Apa itu Properti CSS Display?<\/h2>\n\n\n\n

CSS Display adalah salah satu properti CSS yang sering digunakan dan berfungsi mengatur bagaimana elemen HTML ditampilkan melalui browser<\/em>. Karena fungsinya untuk mengatur tata letak elemen HTML<\/a>, properti ini dapat memungkinkan desainer website untuk menentukan apakah elemen HTML ditampilkan sesuai dengan kebutuhan web tersebut.<\/p>\n\n\n\n

Dasar Penggunaan Properti CSS Display<\/h2>\n\n\n\n

Untuk menggunakan property CSS Display, anda harus membuat sebuah elemen HTML dengan property <\/em>display. Berikut contohnya:<\/p>\n\n\n\n

.container {\n  display: block; \n}<\/code><\/pre>\n\n\n\n
Properti ini menentukan apakah sebuah elemen akan tampil sebagai block<\/em>, di mana ia memenuhi seluruh lebar baris, sebagai elemen sebaris (inline<\/em>), yang hanya menggunakan ruang sesuai dengan kontennya, atau sebagai kombinasi lainnya seperti flex <\/em>dan grid <\/em>yang memungkinkan pengaturan tata letak lebih kompleks.<\/p>\n\n\n\n
Beberapa nilai-nilai kategori yang dapat Anda gunakan dalam membangun tampilan website dengan properti css display <\/em>sebagai berikut.<\/p>\n\n\n\n
Nilai Dasar Properi CSS Display<\/h2>\n\n\n\n
Nilai dasar yang sering digunakan untuk property <\/em>display yaitu:<\/p>\n\n\n\n
block<\/h3>\n\n\n\n
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 : <\/p>\n\n\n\n
.display-block {\n        display: block;\n    }<\/code><\/pre>\n\n\n\n
inline<\/h3>\n\n\n\n
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 : <\/p>\n\n\n\n
.display-inline {\n        display: inline;\n    }<\/code><\/pre>\n\n\n\n
inline-block<\/h3>\n\n\n\n
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:<\/p>\n\n\n\n
.display-inline-block {\n    display: inline-block;\n}<\/code><\/pre>\n\n\n\n
Nilai untuk Tata Letak Modern Properi CSS Display<\/h2>\n\n\n\n
flex<\/h3>\n\n\n\n
Mengubah elemen HTML menjadi sebuah kontainer yang fleksibel (flex container<\/em>) yang secara responsif baik dalam arah horizontal maupun vertikal. Anda dapat mempelajari artikel berikut : Fungsi dan Contoh CSS Flexbox Layout<\/strong><\/a><\/p>\n\n\n\n
grid<\/h3>\n\n\n\n
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<\/a><\/strong><\/p>\n\n\n\n
Nilai Khusus Properi CSS Display<\/h2>\n\n\n\n
none<\/h3>\n\n\n\n
Semua jenis elemen HTML tidak akan ditampilkan dan tidak mengambil ruang dalam tata letak atau tampilan website di browser. Berikut contohnya : <\/p>\n\n\n\n
.display-none {\n    display: none;\n}<\/code><\/pre>\n\n\n\n
contents<\/h3>\n\n\n\n
Elemen HTML dihapus dari tata letak web browser <\/em>tetapi turunan elemen tersebut akan tetap di render <\/em>seolah-olah menggantikan elemen itu. Berikut contohnya :<\/p>\n\n\n\n
.display-contents {\n    display: contents;\n}<\/code><\/pre>\n\n\n\n
table<\/h3>\n\n\n\n
Membuat elemen berperilaku seperti elemen tabel. Contoh elemen html yang digunakan : < table > secara default. Berikut contohnya : <\/p>\n\n\n\n
.display-table {\n    display: table;\n}<\/code><\/pre>\n\n\n\n
table-row, table-cell, table-column, dll.<\/h3>\n\n\n\n
Digunakan untuk meniru perilaku bagian-bagian dari element table. Berikut contohnya:<\/p>\n\n\n\n
.display-table-row {\n    display: table-row;\n}<\/code><\/pre>\n\n\n\n
Nilai Eksperimental (atau Khusus) Properi CSS Display<\/h2>\n\n\n\n
list-item<\/h3>\n\n\n\n
Elemen HTML akan berperilaku dan menampilkan seperti item daftar (contoh: < li >). Berikut contohnya : <\/p>\n\n\n\n
.display-list-item {\n    display: list-item;\n}<\/code><\/pre>\n\n\n\n
Nilai Global Properi CSS Display<\/h2>\n\n\n\n
inherit<\/h3>\n\n\n\n
Mengambil nilai dari elemen html induk. Berikut contohnya:<\/p>\n\n\n\n
.display-inherit {\n    display: inherit;\n}<\/code><\/pre>\n\n\n\n
initial<\/h3>\n\n\n\n
Mengatur ke nilai default properti<\/em>. Berikut contohnya:<\/p>\n\n\n\n
.display-initial {\n    display: initial;\n}<\/code><\/pre>\n\n\n\n
unset<\/h3>\n\n\n\n
Menghapus nilai elemen; bertindak seperti inherit <\/em>jika properti diwariskan atau initial jika tidak diwariskan. Berikut contohnya:<\/p>\n\n\n\n
.display-unset {\n    display: unset;\n}<\/code><\/pre>\n\n\n\n
Contoh Implementasi CSS Display<\/h2>\n\n\n\n
Berikut adalah contoh script <\/em>CSS variables <\/em>yang telah diterapkan ke kode html.<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n    <title>Contoh CSS Display<\/title>\n    <style>\n.display-block {\n        display: block;\n        background: lightcyan;\n    }\n    \n.display-inline {\n        display: inline;\n        background: chartreuse;\n    }\n    \n.display-inline-block {\n    display: inline-block;\n    background: antiquewhite;\n}\n\n.display-grid {\n    display: grid;\n    background: gainsboro;\n}\n\n.display-flex {\n    display: flex;\n    background: aquamarine;\n}\n\n.display-contents {\n    display: contents;\n    background: aquamarine;\n}\n\n.display-none {\n    display: none;\n}\n\n.display-table {\n    display: table;\n    background: gold;\n}\n\n.display-table-row {\n    display: table-row;\n    background: lightblue;\n}\n\n.display-list-item {\n    display: list-item;\n    background: lightgoldenrodyellow;\n}\n\n.display-inherit {\n    display: inherit;\n    background: sandybrown;\n}\n\n.display-initial {\n    display: initial;\n    background: moccasin;\n}\n\n.display-unset {\n    display: unset;\n    background: aqua;\n}\n\n    <\/style>\n<\/head>\n\n<body>\n    <div class=\"display-block\">\n        Elemen HTML menggunakan display:block\n    <\/div>\n    <div class=\"display-inline\">\n        Elemen HTML menggunakan display:inline\n    <\/div>\n    <div class=\"display-inline-block\">\n        Elemen HTML menggunakan display:inline-block\n    <\/div>\n    <div class=\"display-flex\">\n        Elemen HTML menggunakan display:flex\n    <\/div>\n    <div class=\"display-grid\">\n        Elemen HTML menggunakan display:grid\n    <\/div>    \n    <div class=\"display-none\">\n        Elemen HTML menggunakan display:none\n    <\/div>\n    <div class=\"display-contents\">\n        Elemen HTML menggunakan display:contents\n    <\/div>\n    <div class=\"display-table\">\n        Elemen HTML menggunakan display:table\n    <\/div>\n    <div class=\"display-table-row\">\n        Elemen HTML menggunakan display:table-row\n    <\/div>\n    <div class=\"display-list-item\">\n        Elemen HTML menggunakan display:list-item\n    <\/div>\n    <div class=\"display-inherit\">\n        Elemen HTML menggunakan display:inherit\n    <\/div>    \n    <div class=\"display-initial\">\n        Elemen HTML menggunakan display:initial\n    <\/div>    \n    <div class=\"display-unset\">\n        Elemen HTML menggunakan display:unset\n    <\/div>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Kemudian jika di testing <\/em>di browser <\/em>untuk akan menampilkan screenshoot <\/em>seperti berikut:<\/p>\n\n\n\n
\"Properti<\/a><\/figure>\n\n\n\n
Kesimpulan<\/h2>\n\n\n\n
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.<\/p>\n\n\n\n
\n
Belajar css bagian 14<\/a><\/div>\n<\/div>\n\n\n\n
<\/p>\n\n\n\n
Demikian artikel belajar CSS bagian ke 13 tentang CSS Display. Ikuti terus series belajar CSS selanjutnya, untuk meningkatkan kemampuan CSS Anda. Semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
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. […]<\/p>\n","protected":false},"author":353,"featured_media":52896,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-52887","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=52887"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/52887\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/52896"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=52887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=52887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=52887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}