Mengenal Lebih Dalam Cara Mengatur Elemen Menggunakan CSS
Dalam mengatur element HTML dengan CSS kita dapat menggunakan Property CSS yaitu width (lebar), kita dapat mengatur value (nilai) dari property width dengan menggunakan satuan px, persen, em dan lain sebagainya, jika teman-teman bertanya saya sering menggunakan satuan apa? Saya bisa katakan jika saya sering menggunakan dua satuan untuk property witdth ini yaitu, px dan persen. Sebagai contoh pertama kita akan menggunakan property width dengan satuan value nya px. Silahkan teman-teman tulis code berikut ini dan simpan dengan nama file index.html atau dengan nama lain yang teman-teman inginkan, yang penting extensinya harus html.
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
<style type="text/css">
.kotak {
width: 800px;
height: 100px;
background-color: #5a5a5a;
margin: auto;
}
.satu {
width: 400px;
height: 80px;
float: left;
background-color: #bd1818;
margin-top: 10px;
}
.dua {
width: 400px;
height: 80px;
float:left;
background-color: #094061;
margin-top: 10px;
}
.satu h2, .dua h2 {
text-align: center;
color: white;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="kotak">
<div class="satu">
<h2>Point</h2>
</div>
<div class="dua">
<h2>Website</h2>
</div>
</div>
</body>
</html>
Pada contoh diatas saya sengaja memberikan contoh yang lumayan panjang code CSS nya, bukan hanya property width tapi banyak property lain yang saya gunakan, sehingga dengan satu tutorial ini saya berharap teman-teman dapat referensi penggunaan property lain dari CSS. sebab saya yakin jika teman-teman sudah mengerti tentang Mengenal Selector, Property dan Value pada CSS Jika sudah mari kita jalankan file index.html diatas pada web browser, maka hasilnya akan seperti berikut ini.
Silahkan teman-teman kecilkan layar web browser pada ukuran lebar nya di bawah 800px maka akan ada efex zoom atau dapat dikatakan tidak responsive, itu disebabkan karna kita menggunakan lebar pada kotak 800px dan setiap div didalam kotak tersebut yaitu <div class="satu"> dan <div class="dua"> kita menggunakan 400px. Untuk contoh yang lebih mendalam dari pengaturan lebar ini bisa dilihat pada judul Point-point penting dalam mengatur letak element HTML dengan CSS. Selanjutnya mari kita buatkan contoh kedua kita dengan menggunakan property width dengan satuan valuenya persen, silahkan teman-teman tulis code berikut ini, masih sama aturannya nama file nya bebas uang penting.
<!DOCTYPE html>
<html>
<head>
<title>Point Website</title>
<style type="text/css">
* {
font-family: sans-serif;
color: black;
}
.kotak {
width: 64%;
height: 100px;
background-color: #5a5a5a;
margin: auto;
}
.satu {
width: 50%;
height: 80px;
float: left;
background-color: #bd1818;
margin-top: 10px;
}
.dua {
width: 50%;
height: 80px;
float:left;
background-color: #094061;
margin-top: 10px;
}
.satu h2, .dua h2 {
text-align: center;
color: white;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="kotak">
<div class="satu">
<h2>Point</h2>
</div>
<div class="dua">
<h2>Website</h2>
</div>
</div>
</body>
</html>
Jika teman-teman jalankan file tersebut hasil nya sama seperti contoh pertama kita, namun ada sedikit perbedaan, silahkan teman-teman kecilkan lebar web browser sekecil apapun maka lebar dari tag <div> akan menyesuaikan dengan lebar web browser inilah yang membedakan px dengan persen. mungkin teman-teman berfikir menggunakan satuan persen maka website akan responsive, saya rasa tidak sebab responsive itu menggunakan media query, untuk mengenal lebih dalam tentang responsive silahkan teman-teman lihat pada tutorial Mengenal Konsep Media Query Dalam Desain Responsive Website. Sekian tutorial dari Point Website tentang Mengenal lebih dalam cara mengatur element menggunakan CSS, semoga dapat membantu teman-teman dalam mempelajari dan membuat website.
thanks gan panduannya , lengkap sekali
ReplyDeleteElement ini yg nantinya bisa di klik kan yaa
ReplyDeleteCSS lebih ribet ketimbang Html ya..
ReplyDeleteMantep nih gan. Nambah info baru...
ReplyDeleteCss dulu, baru js :D
ReplyDeleteane masih bingung nih di ccs duh :( nuhun gan infonya..
ReplyDeletethanks gan..
ReplyDeletesaya sangat senang jika artikel ini dapat berguna buat teman-teman.