Belajar CSS #10 : Menentukan Ukuran Elemen CSS

Anak Males – Kali ini kita akan mencoba belajar untuk menentukan ukuran elemen di dalam css. Ini akan berguna ketika ingin membuat sebuah layout html.

Karena kemarin kita sudah belajar tentang border maka akan lebih lengkap jika kita belajar sekalian untuk menentukan ukuran dari elemen menggunakan css.

Untuk menentukan ukuran elemen menggunakan CSS, Anda dapat menggunakan beberapa properti yang tersedia, seperti:

1. width: digunakan untuk menentukan lebar elemen, misalnya width: 100px; akan menentukan lebar elemen sebesar 100px.
2. height: digunakan untuk menentukan tinggi elemen, misalnya height: 200px; akan menentukan tinggi elemen sebesar 200px.
3. min-width: digunakan untuk menentukan lebar minimum yang diperbolehkan untuk elemen, misalnya min-width: 300px; akan menentukan bahwa elemen tidak boleh lebih kecil dari 300px.
4. max-width: digunakan untuk menentukan lebar maksimum yang diperbolehkan untuk elemen, misalnya max-width: 500px; akan menentukan bahwa elemen tidak boleh lebih besar dari 500px.
5. min-height: digunakan untuk menentukan tinggi minimum yang diperbolehkan untuk elemen, misalnya min-height: 400px; akan menentukan bahwa elemen tidak boleh lebih rendah dari 400px.
6. max-height: digunakan untuk menentukan tinggi maksimum yang diperbolehkan untuk elemen, misalnya max-height: 600px; akan menentukan bahwa elemen tidak boleh lebih tinggi dari 600px.

Mari kita bahas.

Cara Menentukan Lebar Elemen di CSS

Properti ini dapat mengambil nilai absolut seperti px (pixel) atau pt (point), atau nilai relatif seperti % (persen).

Contoh penggunaan properti width adalah seperti berikut:

element {
  width: 200px;  /* lebar elemen sebesar 200px */
}

element {
  width: 50%;  /* lebar elemen sebesar 50% dari lebar elemen yang menampungnya */
}

Anda juga dapat menggunakan properti min-width untuk menentukan lebar minimum yang diperbolehkan untuk elemen, dan max-width untuk menentukan lebar maksimum yang diperbolehkan. Contoh penggunaan properti min-width dan max-width adalah seperti berikut:

element {
  min-width: 300px;  /* lebar elemen tidak boleh lebih kecil dari 300px */
  max-width: 500px;  /* lebar elemen tidak boleh lebih besar dari 500px */
}

Cara Menentukan Tinggi Elemen Di CSS

Untuk menentukan tinggi elemen di CSS, Anda dapat menggunakan properti height. Properti ini dapat mengambil nilai absolut seperti px (pixel) atau pt (point), atau nilai relatif seperti % (persen).

Contoh penggunaan properti height adalah seperti berikut:

element {
  height: 200px;  /* tinggi elemen sebesar 200px */
}

element {
  height: 50%;  /* tinggi elemen sebesar 50% dari tinggi elemen yang menampungnya */
}

Anda juga dapat menggunakan properti min-height untuk menentukan tinggi minimum yang diperbolehkan untuk elemen, dan max-height untuk menentukan tinggi maksimum yang diperbolehkan. Contoh penggunaan properti min-height dan max-height adalah seperti berikut:

element {
  min-height: 300px;  /* tinggi elemen tidak boleh lebih rendah dari 300px */
  max-height: 500px;  /* tinggi elemen tidak boleh lebih tinggi dari 500px */
}

Cara Membuat Persegi di CSS

Untuk membuat persegi menggunakan CSS, Anda dapat menggunakan properti width dan height untuk menentukan lebar dan tinggi elemen yang sama. Misalnya, jika Anda ingin membuat persegi dengan sisi 200px, Anda dapat menambahkan properti width dan height seperti ini:

element {
  width: 200px;
  height: 200px;
}

Contoh penggunaannya adalah seperti berikut:

<div class="square">
  <!-- isi elemen -->
</div>

.square {
  width: 200px;
  height: 200px;
  background-color: red;  /* memberikan warna latar belakang */
  border: 1px solid black;  /* memberikan garis tepi */
}

Dengan kode di atas, elemen div dengan kelas square akan dibuat menjadi persegi dengan sisi 200px dan latar belakang warna merah. Anda juga dapat menggunakan ukuran relatif seperti % atau em daripada ukuran absolut seperti px atau pt.

Cara Membuat Persegi Panjang Di CSS

Untuk membuat persegi panjang di CSS, Anda dapat menggunakan properti width dan height untuk menentukan lebar dan tinggi elemen yang berbeda. Misalnya, jika Anda ingin membuat persegi panjang dengan lebar 300px dan tinggi 200px, Anda dapat menambahkan properti width dan height seperti ini:

element {
  width: 300px;
  height: 200px;
}

Contoh penggunaannya adalah seperti berikut:

<div class="rectangle">
  <!-- isi elemen -->
</div>

.rectangle {
  width: 300px;
  height: 200px;
  background-color: red;  /* memberikan warna latar belakang */
  border: 1px solid black;  /* memberikan garis tepi */
}

Dengan kode di atas, elemen div dengan kelas rectangle akan dibuat menjadi persegi panjang dengan lebar 300px dan tinggi 200px, dan latar belakang warna merah. Anda juga dapat menggunakan ukuran relatif seperti % atau em daripada ukuran absolut seperti px atau pt.

Penutup

Nah, begitulah caranya mengatur ukuran elemen di css. Sekian tutorial css ini, sampai jumpa di tutorial berikutnya.