Belajar CSS -1- tentang Border, Margin, Padding
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam*. Disini saya tidak akan panjang lebar membahas pengertiannya -karena saya pun kurang mengerti-, tapi akan saya bahas tentang aplikasinya yang biasa kita gunakan dalam aktifitas blogging, seperti membuat border (tulisan dalam bingkai atau kotak), margin, dan padding pada sidebar gadget, postingan, atau template blog dalam bahasa HTML.Kode perintah dasar <div></div> dimana <div> merupakan perintah memulai kode dan </div> merupakan perintah untuk mengakhiri kode. Berikut ini beberapa kode perintah dan hasil yang ditampilkannya.
Kode BORDER
<div style="border: 1px solid;">tulis disini</div>
<div style="border: 2px solid red;">tulis disini</div>
Kode BORDER kanan, kiri, atas, bawah
<div style="border-right: 1px solid red;">tulis disini</div>
<div style="border-left: 1px solid red;">tulis disini</div>
<div style="border-top: 1px solid red;">tulis disini</div>
<div style="border-bottom: 1px solid red;">tulis disini</div>
Kode BORDER berbagai jenis
<div style="border: 1px dotted red;">tulis disini</div>
<div style="border: 1px dashed red;">tulis disini</div>
<div style="border: 1px inset red;">tulis disini</div>
<div style="border: 1px outset red;">tulis disini</div>
Kode BORDER dengan MARGIN
<div style="border: 1px solid red; margin: 10px;">tulis disini</div>
<div style="border: 1px solid red; margin: 10px 20px;">tulis disini</div>
<div style="border: 1px solid red; margin: 10px 20px 30px 40px;">tulis disini</div>
Kode BORDER dengan PADDING
<div style="border: 1px solid red; padding: 10px;">tulis disini</div>
<div style="border: 1px solid red; padding: 10px 20px;">tulis disini</div>
<div style="border: 1px solid red; padding: 10px 20px 30px 40px;">tulis disini</div>
Kode BORDER dengan MARGIN dan PADDING
<div style="border: 1px solid red; margin: 10px; padding: 10px;">tulis disini</div>
<div style="border: 1px solid red; margin: 10px; padding: 10px 20px;">tulis disini</div>
<div style="border: 1px solid red; margin: 10px; padding: 10px 20px 30px 40px;">tulis disini</div>
Penjelasan
- border: 1px Membuat garis setebal 1 pixel
- solid red Garis solid dengan warna red atau merah
- margin: 10px Jarak kotak ke area luar 10 pixels untuk semua sisi (atas, kanan, bawah, kiri)
- margin: 10px 20px Jarak kotak ke area luar 10 pixels sisi atas bawah dan 20 pixels sisi kanan kiri
- margin: 10px 20px 30px 40px Jarak kotak ke area luar 10 pixels sisi atas, 20 pixels sisi kanan, 30 pixels sisi bawah, dan 40 pixels sisi kiri
- padding: 10px Tulisan dalam kotak berjarak 10 pixels dari semua sisi
- padding: 10px 20px Tulisan dalam kotak berjarak 10 pixels dari sisi atas bawah dan 20 pixels dari sisi kanan kiri
- padding: 10px 20px 30px 40px Tulisan dalam kotak berjarak 10 pixels dari sisi atas, 20 pixels dari sisi kanan, 30 pixels dari sisi bawah, dan 40 pixels dari sisi kiri
Kawan bisa mengganti angka-angka yang terdapat didalamnya, mengganti red dengan warna yang lain, atau juga mengkombinasikannya. Lalu lanjut baca materi berikutnya Belajar CSS -2- tentang Background, Color, Width, Border-radius
*Referensi: Wikipedia
Waktu lagi googling masalah translate.google.com yang error, saya dibawa ke laman untuk mencoba browser yang slogannya menjalankan laman web dan aplikasi secepat kilat. Jadi penasaran dengan browser buatan Om Google tersebut, karena OS Linux Mint yang saya gunakan hanya menyertakan Mozilla Firefox. Tapi apa download dan instal di OS Linux Mint, browser yang bernama Google Chrome ini semudah waktu menggunakan OS Windows?
Berita terbaru bagi kawan-kawan pengguna OS Linux (masih pake OS bajakan..? haree gini..!), terutama Linux Mint, bahwa ada kemungkinan tim Linux Mint akan mengganti logo distro Linux yang terkenal ringan dan merupakan turunan Ubuntu tersebut.
Senang ya bila punya blog kebanjiran komentar...! karena itu berarti blog kawan kebanjiran pengunjung pula, jadi basah deh (asal jangan kaya tsunami di Jepang aja). Namun apakah kawan bisa dengan mudah membedakan antara komentar pengunjung dengan komentar kawan sendiri selaku admin atau author blog?
Terinspirasi dari blog Bumi Caang yang menggunakan template yang telah membenamkan emoticon pada kolom komentarnya. Kelihatan lebih hidup dan sangat menarik.
Download kode 
