Cara Menampilkan dan Menyembunyikan Elemen dengan CSS

Pada tutorial ini kita akan mempelajari tentang cara untuk menampilkan dan menyembunyikan elemen HTML dengan menggunakan CSS. Atau intinya kita akan mengatur tampilan sebuah elemen. Dalam hal ini property CSS yang akan kita gunakan adalah property display.

Dengan property display, kita tidak cuman hanya dapat menampilkan dan menyembunyikan elemen saja, namun kita juga bisa mengatur tampilannya. Apakah akan ditampilkan sebaris dengan elemen disampingnya, atau akan ditampilkan pada baris baru ?.

Secara default setiap elemen HTML memiliki display bawa’annya masing – masing. Seperti elemen <p> secara otomatis akan membuat baris baru pada halaman website, sedangkan elemen <b> tidak akan membuat baris baru, namun hanya akan menebalkan tulisan. Tapi dengan property display kita dapat membuat hal sebalinya.

Mengatur Tampilan Elemen (Membuat Elemen menjadi 1 baris)

Seperti contoh gambar di bawah ini, dimana secara default elemen <li> akan tampil vertical ke bawah atau membuat baris baru.

Cara Menampilkan dan Menyembunyikan Elemen dengan CSS

Namun dengan property display : inline, kita dapat membuatnya tampil sebaris dengan elemen sebelum dan sesudahnya atau disebut juga sebagai “inline”.

Berikut outputnya :

Cara Menampilkan dan Menyembunyikan Elemen dengan CSS

Jadi property display ini dapat digunakan untuk mengatur tampilan elemen.

Membuat elemen memiliki baris baru.

Jika biasanya elemen berformat tag <b> hanya menebalkan teks dan dia akan tercetak sebaris dengan elemen sebelumnya. Maka kita dapat membuat elemen ini tercetak pada baris baru. Yakni dengan menerapkan fungsi display: block.

output :

fungsi property display pada css

Dapat kita lihat bahwa tulisan pulvinar membuat baris baru sehingga tidak sebaris dengan elemen sebelum dan sesudahnya.

Menghilangkan Elemen

Dalam property display ini pula terdapat nilai property none, yakni untuk menghilangkan elemen tersebut.

maksud display pada css

Penggunaan nilai property none biasa di kombinasikan dengan Javascript/JQuery. Yakni elemen akan ditampilkan jika telah memenuhi berbagai syarat tertentu seperti misalnya waktu pengisian Form.


Demikian tutorial dari Cara Menampilkan dan Menyembunyikan Elemen dengan CSS, silahkan kunjungi tutorial CSS lainnya seperti konsep box model pada css, pengaturan margin pada css, mengatur posisi elemen HTML, apa yang dimaksud dengan dimensi elemen atau pengenalan CSS 3.

Leave a comment

Your email address will not be published. Required fields are marked *

X