Cara menggunakan properti css apa saja?

Properti display pada CSS merupakan properti paling penting untuk mengontrol layout. Untuk itu, dibawah ini akan dijelaskan secara rinci tentang properti display bagaimana cara penerapannya dan fungsinya.

Table of Contents Show

Poperti Display
Elemen Block-level
Elemen Inline
Display: none;
Mengganti Nilai Tampilan Default
Menyembunyikan Elemen Menggunakan display: none atau visibility: hidden?
Properti Display / Visibility pada CSS
Property CSS apa saja?
Properti apa yang digunakan untuk mengatur posisi perataan teks menggunakan CSS?
Apa properti CSS yang dapat mengubah warna teks pada elemen HTML?
Apa itu list

Section Artikel

1 Poperti Display
2 Elemen Block-level
3 Elemen Inline
4 Display: none;
5 Mengganti Nilai Tampilan Default
6 Menyembunyikan Elemen Menggunakan display: none atau visibility: hidden?
7 Properti Display / Visibility pada CSS

Poperti Display

Properti display biasanya digunakan untuk menentukan bagaimana sebuah elemen akan ditampilkan.

Setiap elemen HTML memiliki nilai tampilan default tergantung pada jenis elemennya. Nilai tampilan default untuk sebagian besar elemen adalah blok atau baris.

Elemen Block-level

Elemen block-level selalu dimulai dengan baris baru dan akan menempati lebar penuh yang tersedia (membentang ke kiri dan kanan sejauh mungkin).

Contoh elemen block-level pada HTML :

<div>
<h2> – <h6>
<p>
<form>
<header>
<footer>
<section>

Elemen Inline

Elemen inline tidak dimulai pada baris baru dan hanya membutuhkan lebar yang diperlukan berkebalikan dengan elemen block-level.

Contoh elemen inline pada HTML :

<span>
<a>
<img>

Display: none;

Display: none; biasanya digunakan bersamaan dengan JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan membuatnya kembali. Lihatlah contoh terakhir di halaman ini agar paham bagaimana cara penggunaannya.

Elemen <script> menggunakan display: none; sebagai default.

Mengganti Nilai Tampilan Default

Seperti yang telah dijelaskan sebelumnya, setiap elemen memiliki nilai tampilan default. Namun, nilai tersebut dapat diubah.

Mengubah elemen inline menjadi elemen block-level atau sebaliknya. Hal ini berguna untuk membuat halamann web terlihat sesuai keinginan kita, namun tetap mengikuti standar web.

Contoh yang paling umum adalah membuat elemen sebaris <in> untuk menu horizontal:

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Menampilkan daftar link sebagai menu horizontal:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Catatan: Mengatur properti display sebuah elemen hanya mengubah bagaimana elemen tersebut akan ditampilkan, BUKAN jenis elemennya. Jadi, elemen inline dengan display: block; tidak diperbolehkan memiliki elemen blok lain di dalamnya.

Contoh berikut menampilkan elemen <span> sebagai elemen block:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>Properti display yang  memiliki nilai "block" menghasilkan </span> <span> pergantian baris di antara dua elemen.</span>

</body>
</html>

Contoh berikut menampilkan elemen <a> sebagai elemen block:

<!DOCTYPE html>
<html>
<head>
<style>
a {
  display: block;
}
</style>
</head>
<body>

<p>Link ditampilkan sebagai elemen block:</p>

<a href="/html/default.asp" target="_blank">HTML</a>
<a href="/css/default.asp" target="_blank">CSS</a>
<a href="/js/default.asp" target="_blank">JavaScript</a>

</body>
</html>

Menyembunyikan Elemen Menggunakan display: none atau visibility: hidden?

Menyembunyikan elemen dapat dilakukan dengan mengatur properti display: none. Elemen akan disembunyikan, dan halaman akan ditampilkan seolah-olah elemen tersebut tidak ada.

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
h2.hidden {
  display: none;
}
</style>
</head>
<body>

<h2>Ini adalah heading yang ditampilkan</h2>
<h2 class="hidden">Ini adalah heading yang disembunyikan</h2>
<p>Perhatikan bahwa elemen h2 dengan display: none; tidak mengambil tempat.</p>

</body>
</html>

visibility: hidden; juga dapat digunakan untuk menyembunyikan elemen.

Namun, elemen tersebut akan tetap menempati ruang yang sama seperti sebelumnya. Elemen tersebut akan disembunyikan, tetapi masih memengaruhi tata letak.

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
h2.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h2>Ini heading yang ditampilkan</h2>
<h2 class="hidden">Ini heading yang disembunyikan</h2>
<p>Perhatikan bahwa heading tersembunyi masih membutuhkan tempat.</p>

</body>
</html>

Properti Display / Visibility pada CSS

Properti	Deskripsi
display	Menentukan bagaimana sebuah elemen harus ditampilkan
visibility	Menentukan apakah sebuah elemen harus ditampilkan atau tidak

Property CSS apa saja?

Terdapat 4 properti css antara lain: list-style-type, list-style-position, list-style-image, dan list-style.

Properti apa yang digunakan untuk mengatur posisi perataan teks menggunakan CSS?

Pengaturan perataan teks pada CSS dapat menggunakan properti text-align. Nilai pada properti ini akan membuat teks disusun sesuai dengan nilai perataannya. text-align: left | right | center | justify | inherit; Properti dengan nilai left artinya teks akan diatur dengan rata kiri.

Apa properti CSS yang dapat mengubah warna teks pada elemen HTML?

Warna (color) teks pada CSS dapat diubah dengan menggunakan properti color. Properti ini menerima nilai dalam berbagai bentuk seperti nama warna standar HTML dan CSS (color name) yang berjumlah 140 buah, nilai warna dalam bentuk kode hexadesimal, kode warna RGB(A) dan kode warna HSL(A).

Apa itu list

list-style digunakan untuk menentukan semua properti list(all list properties) dalam satu deklarasi. Value untuk properti list-style yaitu nilai dari list-style-type, list-style-position, dan list-style-image.