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

Artikel Terkait

Pilih Label

• Blogger
• Linux
• Tips dan Trik
• Musik
• Live USB
• Sunda
• Android

Baca lagi