Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 14 : Display pada CSS

By Web Design Purbalingga Post a Comment
Display pada CSS – Display merupakan salah satu property CSS yang sangat penting untuk mengatur posisi atau tata letak elemen. Contohnya adalah untuk mengatur sebuah elemen list (daftar) pada html, kita akan mengaturnya posisinya menjadi inline atau block.

Display pada CSS

Pada materi kali ini, kita akan bahas dua nilai dari property display ini dan berikut ini uraiannya;

Display: none;

Display: none; biasanya digunakan pada JavaScript yang bertujuan untuk menyembunyikan atau menampilkan elemen tanpa menghapus dan menuliskan baris kodenya kembali. Nilai none juga merupakan nilai default dari property display. Oleh karenanya kalian bisa mengatur nilai display ini sesuai kebutuhan kalian. Seperti mengubahnya menjadi display: inline atau display: block; dan berikut ini contoh penggunaan dari dua nilai tersebut.

Display: inline;

Display: inline; memungkinkan kalian mengubah posisi elemen menjadi horizontal. Perhatikan contohnya berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
<style>
/*property display: inline*/
li {
    display: inline;
}
</style>
</head>
<body>
<ul>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
</ul>
</body>
</html>
Hasilnya


Jika kalian mencoba menghilangkan property display: inline; nya, maka elemen list tersebut akan kembali menjadi default.

Display: block;

Sedangkan display: block; adalah kebalikan dari display: none; yaitu membuat elemen menjadi vertikal dengan syarat elemen tersebut memiliki nilai default horizontal. Untuk lebih jelasnya perhatikan contohnya berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
<style>
/*property display: block*/
a {
    display: block;
}
</style>
</head>
<body>
  <a href="#">HTML</a>
  <a href="#">CSS</a>
  <a href="#">JavaScript</a>
</body>
</html>
Hasilnya


Penting ! Jika kalian membuat list dengan bantuan tag <br> , maka display: inline tidak akan bekerja.
Sekarang kalian telah menyelesaikan materi tentang Display pada CSS. Semoga materi ini mudah di pahami dan sampai jumpa di materi berikutnya.

Post a Comment for "Materi 14 : Display pada CSS"