Tutorial CSS terusan- 11 box model ~ infoku.net

Cara Mengatur Tinggi Element HTML dengan CSS

Cara penggunaan property height sangat mirip dengan property width, dimana kita tinggal memberikan nilai satuan panjang seperti pixel, persen, dll.
Sebagai contoh, untuk mengatur tinggi sebuah tag <div> sebesar 50 pixel, saya bisa menulis sebagai berikut:

<div style="height: 50px"></div>

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 50px;
     border: 2px solid black;
     margin: 20px;
 
     background-color: yellow;
   }
   .kotak1 { height: 10px;}
   .kotak2 { height: 30px;}
   .kotak3 { height: 100px;}
   .kotak4 { height: 150px;}
</style>
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
<div class="kotak3"></div>
<div class="kotak4"></div>
</body>
</html>

Dalam contoh diatas, saya membuat 4 tag <div> dengan berbagai nilai height. Seperti yang terlihat, masing-masing ‘kotak’ akan memiliki tinggi yang berbeda-beda.

Jika dikombinasikan dengan property width, kita bisa mengatur tinggi dan lebar dari setiap element HTML, seperti contoh berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     border: 2px solid black;
     margin: 20px;
     background-color: yellow;
   }
   .kotak1 { width: 10px; height: 10px;}
   .kotak2 { width: 100px; height: 30px;}
   .kotak3 { width: 50px; height: 100px;}
   .kotak4 { width: 500px; height: 150px;}
</style>
</head>
<body>
<div class="kotak1"></div>
<div class="kotak2"></div>
<div class="kotak3"></div>
<div class="kotak4"></div>
</body>
</html>

Sekarang setiap kotak memiliki tinggi dan lebar yang berbeda-beda.
Lebih jauh lagi, property width dan height juga bisa digunakan untuk mengatur lebar dan tinggi setiap element di HTML, seperti gambar. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     border: 2px solid black;
     margin: 20px;
     background-color: yellow;
   }
   .gambar1 { width: 100px; height: 100px;}
   .gambar2 { width: 200px;}
   .gambar3 { height: 300px;}
</style>
</head>
<body>
  <img src="sungai.jpg" />
  <img class="gambar1" src="sungai.jpg" />
  <img class="gambar2" src="sungai.jpg" />
  <img class="gambar3" src="sungai.jpg" />
</body>
</html>

Dalam contoh kode HTML dan CSS diatas, saya menampilkan 4 gambar yang sama. Hanya saja ukuran dari tiap gambar diatur menggunakan property width dan height dari CSS.

Property width dan height digunakan untuk menentukan berapa ukuran ‘konten’ dari sebuah element. Lebar total dari setiap element HTML tidak hanya dari kedua property ini, tapi juga property lainnya yang termasuk kedalam CSS Box Model, yakni padding, border dan margin.

Cara Penulisan Property border CSS

Untuk membuat garis tepi dengan CSS, kita menggunakan property border. Property ini membutuhkan 3 nilai: tebal border, style border, dan warna border. Penulisan ketiga nilai ini dipisahkan dengan spasi.
Sebagai contoh, jika saya ingin membuat sebuah bingkai setebal 2 pixel, berbentuk garis normal dan berwarna merah, saya bisa menggunakan kode berikut:

div {
  border: 2px solid red;
}

Jika saya ingin membuat bingkai dengan tebal 10 pixel, berbentuk garis putus-putus dan berwarna biru, kodenya adalah:

div {
  border: 10px dotted blue;
}

Berikut kode HTML dan CSS lengkap dari kedua contoh ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width:200px;
     height: 50px;
   }
   .garis_tepi1 {
     border: 2px solid red;
   }
   .garis_tepi2 {
     border: 10px dotted blue;
   }
</style>
</head>
<body>
<div class="garis_tepi1"></div>
<br>
<div class="garis_tepi2"></div>
</body>
</html>

Dalam 2 contoh pembuatan border diatas, saya hanya menggunakan 2 jenis style border, yakni solid dan dotted. Sebenarnya terdapat 8 jenis style border, yakni: solid, dotted, dashed, double, groove, ridge, inset dan outset.
Berikut contoh tampilan ke 8 jenis border ini:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div{
     width: 80px;
     height: 80px;
     float: left;
     margin: 20px;
     text-align: center;
   }
   .satu { border: 10px solid green; }
   .dua { border: 10px dotted green; }
   .tiga { border: 10px dashed green; }
   .empat { border: 10px double green; }
   .lima { border: 10px groove green; }
   .enam { border: 10px ridge green; }
   .tujuh { border: 10px inset green; }
   .delapan { border: 10px outset green; }
</style>
</head>
<body>
<div class="satu">solid</div>
<div class="dua">dotted</div>
<div class="tiga">dashed</div>
<div class="empat">double</div>
<div class="lima">groove</div>
<div class="enam">ridge</div>
<div class="tujuh">inset</div>
<div class="delapan">outset</div>
</body>
</html>

Anda dapat abaikan sementara property CSS lain seperti float dan margin, karena akan kita pelajari nantinya.

Mengatur Border untuk Setiap Sisi

Cara penulisan border seperti yang kita pelajari diatas, akan menampilkan bingkai untuk semua sisi. Namun CSS juga membolehkan kita untuk mengatur sisi mana saja yang akan diberi bingkai, apakah atas (top), right (kanan), bawah (bottom) atau kiri (left).
Untuk keperluan ini ini kita menggunakan property border-top, border-right, border-bottom, dan border-left.
Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div{
     width: 200px;
     height: 200px;
     border-top: 10px solid red;
     border-bottom: 10px solid yellow;
     border-left: 10px solid green;
     border-right: 10px solid blue;
   }
</style>
</head>
<body>
  <div></div>
</body>
</html>

Sekarang setiap sisi border dibuat dengan warna yang berlainan.
Selain untuk tag <div>, kita juga bisa menggunakan border untuk element HTML lain seperti gambar, paragraf, tabel, form, dll. Berikut contoh penggunaan border pada tag <p>:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.garis_tepi1 {
     border: 4px solid red;
}
.garis_tepi2 {
     border: 4px solid #8AF76F;
}
</style>
</head>
<body>
<p class="garis_tepi1">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.
</p>
<p class="garis_tepi2">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mi
   tortor, imperdiet sed hendrerit non, consequat luctus magna. Nullam
   accumsan odioac lectus mollis finibus. Maecenas imperdiet feugiat
   felis, sit amet ullamcorper elit vulputate in.
</p>
</body>
</html>

Tampilannya sesuai dengan apa yang kita harapkan. Namun, perhatikan bahwa teks paragraf ini seolah-olah menempel ke sisi border.
sekian dulu penjelasannya kita lanjut lagi ke tutorial berikutnya.

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.