CSS for Blog (Properties)

Kali ini kita akan menitik beratkan pada beberapa properties CSS yang paling sering digunakan dalam pembuatan sebuah halaman web. Pada pembahasan sebelumnya dimana sudah terdapat contoh-contoh kecil untuk pengaturan layout halaman, maka sekarang kita akan mengurai lebih luas masing-masing properties tersebut.

Background
Digunakan untuk mensetting latar belakang halaman web, paling sering digunakan untuk pengaturan layout body, kolom, atau table.

* Contoh yang sering digunakan

body {
background:#ccc url(images/background_body.gif) repeat-x;
}

* properties yang berhubungan dan option yang diberikan

- background-color : color-rgb, color-hex, color-name, transparent
- background-image : url,none
- background-repeat : repeat, repeat-x, repeat-y, no-repeat
- background-attachment : scroll, fixed
- background-position : top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% , y-%, x-pos, y-pos

contoh :

body {
background-color : #ccc;
background-image : url(images/background_body.gif);
background-repeat : repeat-x;
background-attachment : fixed;
background-position : top-left;
}

nb: lihat image biru bergradasi di header web ini sebagai salah satu contoh aplikasinya

Border
Digunakan untuk memberi garis luar pada elemen HTML

* Contoh yang sering digunakan

#batas {
border:1px solid #ccc;
}

* properties yang berhubungan dan option yang diberikan

- border-width : thin, medium, thick, length
- border-color : color
- border-style : none, hidden ,dotted, dashed, solid, double, groove, ridge, inset, outset

contoh :

#batas {
border-width : 1px;
border-style : solid;
border-color : #ccc;
}

nb: lihat garis di bawah list masing-masing categories di web ini sebagai salah satu contoh aplikasinya

Padding
Mengatur jarak antara elemen dengan entiti di dalamnya, biasanya digunakan untuk mengatur kedalaman jarak text dengan table atau kolom

p {
padding-top : 10px;
padding-right : 5 px;
padding-bottom : 5px;
padding-left : 10px;
}

nb: lihat jarak text di sebelah kiri tulisan ini sebagai salah satu contoh aplikasinya

Margin
Mengatur jarak antara satu elemen HTML dengan elemen HTML yang lain

#jarak {
margin-top : 10px;
margin-right : 5 px;
margin-bottom : 5px;
margin-left : 10px;
}

nb: lihat jarak antar kolom sidebar di web ini sebagai salah satu contoh aplikasinya, ada beberapa properties yang tidak bisa ditampilkan oleh browser tertentu atau berbeda hasilnya, saya sarankan untuk menggunakan Mozilla sebagai default browser anda.

Continued …….