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: