Fungsi Property CSS Display
29/10/2014 Faizal Rafik 23270 Website
Fungsi property CSS Display adalah untuk menentukan bagaimana suatu elemen ditampilkan. Fungsi property CSS Display ini hampir mirip dengan property CSS Visibility, kedua-duanya memiliki fungsi untuk menyembunyikan suatu elemen. Selain untuk menyembunyikan suatu elemen fungsi property CSS Display ini mempunyai fungsi lainnya yaitu untuk membuat suatu Tag yang betipe block menjadi tidak bertipe block, atau sebaliknya membuat Tag yang tidak bertipe block menjadi Tag yang bertipe block. Berikut adalah contoh Tag yang bertipe block dan tidak bertipe block :
- <h1>
- <p>
- <li>
- <div>
Sedangkan contoh Tag yang tidak bertipe block adalah :
- <span>
- <a>
Baiklah langsung saja kita akan coba mempraktekkannya.
Pertama kalian bisa buat file HTML nya. Kemudian coba kalian buat Tag <p> dan Tag <span> didalam Tag <body> seperti gambar dibawah ini.
Untuk CSS nya, kalian bisa panggil selector p dan span, dan coba kalian berikan property CSS background-color di kedua selector tersebut seperti gambar dibawah ini.
Coba jalankan terlebih dahulu di browser kalian masing-masing.
Bisa kalian lihat pada gambar diatas, Tag <p> adalah jenis Tag bertipe block, maksudnya bertipe block adalah Tag <p> akan memblock 1 baris full sebesar lebar monitornya, sedangkan Tag <span> dia hanya memblock sebesar tulisannya saja.
Kemudian coba kalian tambahkan property display pada CSS nya, dengan value pada selector p adalah inline dan value selector span adalah block seperti gambar dibawah ini.
Refresh Browsernya, Maka hasilnya akan seperti gambar dibawah ini.
Nah itulah penjelasan tentang fungsi property CSS Display. Sekian dulu tutorial dari saya sampai ketemu di tutorial berikutnya, Terima Kasih.
No data.
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
