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

Artikel Terkait:

tutorial blogger

• cari template klik disini
• Apa Itu SEO?
• Apa Itu JavaScript
• Kelebihan Dan Kekurangan Blogspot dan Wordpress
• Cara Memberi Password Pada Winrar
• APAKAH BLOGGER ITU PAHLAWAN?
• Cara Memasang Tukeran Link Otomatis Dengan Mistery Linky's Magic Wizard
• efek loading blog dengan animasi keyfames
• 9 Cara Membuat Loading Blog 300% Lebih Cepat
• Cara Memasang Tombol Back to Top diatas Footer pada Blog
• Cara Scan Blog dan Website dari Virus dan Malware
• EFEK SHADOW PADA TEXT DENGAN CSS
• Loading Blog dengan Keyframes dari Bawah ke Atas
• menu blog dengan CSS
• CARA MENGUBAH "JOIN THIS SITE" DENGAN GAMBAR FOLLOWERS 999999999
• cara membuat menu berbentuk lingkaran
• Membuat Efek Sliding
• cara membuat tooltip di blog
• cara membuat read more dan add coment
• cara membuat menu navigasi
• cara membuat gambar poting berputar saat di sorsot mouse
• Pentingnya & Manfaat bahasa inggris bagi seorang blogger
• Pengertian Tentang Komentar Kentut Pada Blog
• Cara Membuat Kotak Judul Postingan Jadi Menarik
• Cara Memasang Embed Link di bawah Postingan Blog