Dengan CSS, kita bisa mengatur bagaimana sebuah elemen ditampilkan pada halaman html. Ada dua properti yang bisa dipakai, yaitu display dan visibility. Sebagai contoh untuk menyembunyikan elemen kita gunakan properti visibility dengan nilai hidden, sementara untuk membuat elemen agar tidak ditampilkan (tidak memakan ruang) kita gunakan properti display dengan nilai none.
Berikut ini penjelasan tentang CSS display dan visibility:
1.visibility:hidden
Adalah cara untuk membuat sebuah elemen tersembunyi pada halaman html. Dengan cara ini elemen tetap berada pada suatu ruang pada halaman namun tidak ditampilkan.
Contoh penggunaan visibility:hidden :
h1.hidden {
visibility: hidden;
}
Kita bisa belajar CSS visibility:hidden disini >>
2. display:none
Artinya kita membuat sebuah elemen tidak ditampilkan dan tidak memakan ruang pada halaman. Dengan cara ini kita membuat sebuah object seolah tidak ada pada halaman.
Contoh penggunaan display:none :
h1.hidden {
display: none;
}
Kita bisa belajar CSS display:none disini >>
3. display:inline
Adalah cara untuk membuat sebuah elemen ditampilkan pada bagian tertentu dalam satu baris. Inline artinya sebuah elemen hanya mengambil sebagian kecil dari lebar area yang tersedia. Sebagai contoh sebuah ul atau ol jika dikenakan CSS display inline maka akan ditampilkan dalam satu baris saja.
Contoh penggunaan display:inline :
li {
display: inline;
}
Kita bisa belajar CSS display:inline disini >>
4. display:block
Adalah cara untuk membuat sebuah elemen ditampilkan dalam satu blok baris penuh dengan mengambil keseluruhan lebar yang tersedia.
Contoh penggunaan display:block :
a {
display: block;
}
Kita bisa belajar CSS display:block disini >>
Lihat indeks artikel Tutorial CSS Dasar >>
Referensi :
