Belajar Kode CSS & Desain Blog: CSS Box Model

CSS Box Model adalah salah satu unsur dasar yang sangat penting dalam desain blog yang harus dipahami dengan baik. Hampir semua bagian blog/web dikenali sebagai "box atau kotak" yang didalamnya terdiri atas margin, border, padding dan content. Box atau kotak ini menjadi sangat akrab di telinga blogger bukan saja karena setiap saat selalu terdengar atau terbaca dan bahkan bersentuhan, namun memang istilah ini menjadi istilah pokok dalam dunia per-blogger-an. Anda pasti amat sering mendengar istilah kotak komentar atau comment box, kotak widget, kotak/boks posting, box edit html, kotak pencarian, serta beberapa istilah lain yang selalu diawali dengan kata boks/kotak. Box atau dalam bahasa Indonesia dikenal sebagai "kotak" atau "boks" terdiri atas 4 unsur:

Margin :
Margin adalah jarak yang membatasi sebuah box/elemen blog dengan elemen/unsur yang lain. Elemen atau unsur lain dapat berupa image, teks, box atau unsur lain yang terdapat dalam blog/web.
Border :
Border adalah bagian terluar box yang berbentuk garis dengan ketebalan tertentu dan bisa diatur ketebalannya.
Padding :
Padding berfungsi sebagai pemisah antara content box (bagian terdalam/tengah2 box yang berisi teks, image, kode html dll) dengan border. Seperti halnya margin dan border, padding juga bisa diatur besaran-nya dengan merubah nilai padding yang mempunyai satuan px, em, % (persen).
Content :
Content menjadi bagian inti dari sebuah box. untuk inilah sebuah box dibuat atau diciptakan.

Di bawah ini telah disertakan demo sebuah box yang berisi teks (box sederhana) dan 2 buah boks lain yang didalamnya berisi boks lain dengan content sebuah image. Kotak/boks yang berisi image akan memperjelas fungsi setiap unsur dalam sebuah boks (margin, border, padding dan kontenya. Lakukan beberapa perubahan nilai untuk lebih memahami fungsi dan peran box dalam desain web/blog. Sebagai tambahan informasi, di dalam boks yang berisi image terdapat sebuah kode "float:left;" dan "float:right;" (CSS floating) yang berfungsi untuk pengaturan posisi image agar berada disebelah kiri dan kanan box.

Please click the button to display. Continue with editing code and click to see the results!

<!DOCTYPE html>
<html>
<title>CSS Box Model</title>
<head>  
<style type="text/css">
html{background:lightblue;}
body{
      margin:0 auto;
      padding:0;
      margin:0;
      font-family:Arial;
      font-size:16px;
      color:#000;
}
div{
      width:70%;
      border:10px solid brown;
      margin:20px auto;
      padding:40px;
      background:#aaa;
      line-height:22px;
      text-align:justify;
}
div img{
      float:left;
      margin:0 15px 5px 0;
      padding:15px;
      background:orange;
      border:4px solid #555;
}
div img.satu{
      float:right;
      width:250px;
      height:150px;
      margin:0 0 5px 15px;
      border:1px solid #eee;
      padding:10px;
      background:#888;
      box-shadow:0 0 6px #000;
      border-radius:6px;
}
</style>
</head>
<body>

<div>Belajar kode css sangat penting bagi blogger karena kode inilah yang memegang peran utama desain blog selain kode html yang lain. <br/><br/>Perkembangan yang terjadi pada kode css sangat luar biasa hingga banyak fungsi-fungsi yang sebelumnya hanya dapat dibuat menggunakan javascript kini cukup dibuat dengan kode css.<br/><br/>Belajar kode css sangat penting bagi blogger karena kode inilah yang memegang peran utama desain blog selain kode html yang lain. <br/><br/>Perkembangan yang terjadi pada kode css sangat luar biasa hingga banyak fungsi-fungsi yang sebelumnya hanya dapat dibuat menggunakan javascript kini cukup dibuat dengan kode css.  
</div>

<div><img src="https://lh3.googleusercontent.com/-ljr8OZCohR4/UClf1j7U2XE/AAAAAAAAAIE/knL3acVy6N4/s144-c/MediumIcon.jpg" width="144" height="144" />Belajar kode css sangat penting bagi blogger karena kode inilah yang memegang peran utama desain blog selain kode html yang lain. <br/><br/>Perkembangan yang terjadi pada kode css sangat luar biasa hingga banyak fungsi-fungsi yang sebelumnya hanya dapat dibuat menggunakan javascript kini cukup dibuat dengan kode css.<br/><br/>Belajar kode css sangat penting bagi blogger karena kode inilah yang memegang peran utama desain blog selain kode html yang lain. <br/><br/>Perkembangan yang terjadi pada kode css sangat luar biasa hingga banyak fungsi-fungsi yang sebelumnya hanya dapat dibuat menggunakan javascript kini cukup dibuat dengan kode css.  
</div>

<div><img class="satu" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cFX_-l9e-ksZHJFLqFMkfNhbbGr26qQ4ZIY00ctk3K57eMcUtHICeDJAPFylfgCIJZ__6HTF8dfsJXj9gDudgR0eA3cnwQuj176X3n6cq-3QscNNPDsu7geDeEMJA7XEbznTztJWsbU/h150/romantic_moon.jpg" />Belajar kode css sangat penting bagi blogger karena kode inilah yang memegang peran utama desain blog selain kode html yang lain. <br/><br/>Perkembangan yang terjadi pada kode css sangat luar biasa hingga banyak fungsi-fungsi yang sebelumnya hanya dapat dibuat menggunakan javascript kini cukup dibuat dengan kode css.<br/><br/>Belajar kode css sangat penting bagi blogger karena kode inilah yang memegang peran utama desain blog selain kode html yang lain. <br/><br/>Perkembangan yang terjadi pada kode css sangat luar biasa hingga banyak fungsi-fungsi yang sebelumnya hanya dapat dibuat menggunakan javascript kini cukup dibuat dengan kode css.  
</div>
</body> 
</html>

Belajar Kode CSS & Desain Blog

Halaman

CSS Box Model

1 komentar:

Archive Blog C l o s e

Arsip Blog

My Profile C l o s e

Mengenai Saya

Follower C l o s e

Follower

RSS C l o s e

Label C l o s e

Label

Halaman

date_replace('8.15.2012');

CSS Box Model

1 komentar:

Archive BlogC l o s e

Arsip Blog

My ProfileC l o s e