Belajar CSS -2- tentang Background, Color, Width, Border-radius

Bila pada postingan sebelumnya (baca di Belajar CSS -1- tentang Border, Margin, Padding) menggunakan tiga buah atribut CSS, yaitu border, margin, dan padding, maka untuk materi belajar CSS kali ini ditambahkan empat buah atribut yaitu background, color, width, dan border-radius, yang akan membuat kotak pemberitahuan atau box informasi blog kita tambah cantik -ga kalah dengan selebritis tanah air- nan menarik.

Fungsi dari masing-masing atribut, yaitu:

1. Background untuk memberikan warna pada kotak
2. Color untuk memberikan warna pada tulisan
3. Width untuk menentukan lebar kotak
4. Border-radius untuk membuat sudut kotak nampak bulat

Dibawah ini beberapa kode perintah dan hasil yang ditampilkannya.

Kode BORDER dengan MARGIN dan PADDING (tiga atribut)

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px;">edit disini</div>

Kode BORDER dengan MARGIN, PADDING, dan BACKGROUND (empat atribut)

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background:#EBF3FB;">edit disini</div>

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, dan COLOR (lima atribut)

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue;">edit disini</div>

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, dan WIDTH (enam atribut)

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px;">edit disini</div>

Kode BORDER dengan MARGIN, PADDING, BACKGROUND, COLOR, WIDTH, dan BORDER-RADIUS (tujuh atribut)

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 9px;">edit disini</div>

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 0 9px;">edit disini</div>

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 9px 0;">edit disini</div>

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 9px 9px 0 0;">edit disini</div>

<div style="border: 1px solid #AACCEE; margin: 10px; padding: 10px; background: #EBF3FB; color: blue; width:300px; -moz-border-radius: 0 0 9px 9px;">edit disini</div>

Kawan bisa mengganti angka-angka yang terdapat didalamnya, mengganti 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