Tutorial Belajar CSS Part 22 – Mengatur Height dan Width pada CSS
Dalam tutorial ini kita akan membahas mengenai 2 property yaitu height dan width, teman – teman pasti mengetahui fungsi dari height dan width, ya benar height (digunakan untuk mengatur tinggi dari sebuah objek) dan width (digunakan untuk mengatur lebar dari sebuah objek).
Video Tutorial Belajar CSS – Mengatur Height dan Width pada CSS
Height dan Width pada CSS
Kedua property ini digunakan untuk mengatur ukuran sebuah objek, ada beberapa satuan yang bisa digunakan untuk mengatur dari property width dan height, antara lain :
- auto (jika anda menggunakan value auto maka browser akan menghitung berapa ukuran yang digunakan untuk bagian tinggi dan lebar sebuah obyek)
- satuan px
- satuan cm
- satuan percent (%)
untuk konsep satuan pada value css anda bisa pelajari “mengenal satuan nilai di css ”
Agar lebih memahami silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Belajar Height dan Width Obyek</title> <style type="text/css"> div{ width: 500px; height: 300px; border: solid 1px black; background-color: blue; } </style> </head> <body> <div> </div> </body> </html> |
lalu kita simpan dengan nama semisal height_width.html lalu kita buka di browser :
penjelasannya :
- terdapat obyek berwarna biru karena kita menggunakan property background-color dengan value blue
- ukuran obyek tersebut adalah lebarnya 500 pixel dan tingginya 300 pixel
- ada border berwarna hitam, karena kita menggunakan property border dengan value : solid 1px black, jika anda belum mengenal mengenai property border, silahkan baca tutorial warung belajar mengenai cara mengatur border pada css
Set Max-width dan Max-height
Jika pada bagian sebelumnya kita telah membahas mengenai property width dan height, nah pada bagian ini kita akan membahas property yang masih berhubungan dengan propery height dan width
Property Max-width dan Max-height digunakan untuk menset batas maximal dari ukuran sebuah obyek, perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Belajar Height dan Width Obyek</title> <style type="text/css"> div{ max-width: 300px; border: solid 1px black; background-color: blue; color:white; } </style> </head> <body> <div> ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf </div> </body> </html> |
semisal kita simpan dengan nama max-width-obyek.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
penjelasan :
- terlihat ada sebuah obyek dengan ukuran lebar maksimal 500 pixel, sehingga ketika terdapat banyak text obyek otomatis bertambah tingginya, jadi text tidak ditampilkan secara horizontal melainkan vertikal
agar anda lebih memahami perhatikan contoh berikutnya ketika kita tidak menggunakan max-width :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Belajar Height dan Width Obyek</title> <style type="text/css"> div{ border: solid 1px black; background-color: blue; color:white; } </style> </head> <body> <div> ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf ini adalah sebuah paragraf </div> </body> </html> |
semisal kita simpan dengan tanpa_max_width_obyek.html lalu kita buka di browser :
maka terlihat obyeknya akan memanjang secara horizontal, karena kita tidak menset bagian max-width sehingga tidak ada sebuah batasan pada bagian lebar dari obyek.
anda juga bisa mengatur bagian min-height pada obyek, dengan konsep yang sama.
selain max-width dan max-height anda juga bisa mengatur property lain :
- min-width : digunakan untuk mengatur minimal lebar dari sebuah obyek
- min-height : digunakan untuk mengatur minimal tinggi dari sebuah obyek
bagaimana teman teman cukup mudah bukan, jadi kesimpulannya adalah kita telah belajar beberapa property seperti width, height, max-width, max-height, min-width, min-height, jika anda yang ingin didiskusikan silahkan di kolom komentar, baik sekian dulu sampai jumpa di tutorial selanjutnya.
Informasi ini sangat menarik.