MENAMBAHKAN BORDER DAN LATAR BELAKANG

MENAMBAHKAN BORDER DAN LATAR BELAKANG

Cara menambahkan border disekitar heading, daftar (list), atau paragraf atau sekelompok heading, list dan paragraf secara tertutup dengan mempergunakan elemen div. Contoh :

div.box{ border: solid; border-width: thin; width: 100% }

Catatan : tanpa property "width" beberapa browser akan menempatkan tepi kanan terlalu jauh ke arah kanan. Untuk mencegah hal ini menuliskan perintah HTML-nya sebagai berikut :

<div class="box"> The content within this DIV

element will be enclosed in a box with a thin line

around it. </div>

Ada sedikit jenis border yaitu : dotted, dashed, solid, double, groove, ridge, inset dan outset. Lebar border diatur dengan mempergunakan property "border-width". Nilai dari property ini yaitu thin, medium dan thick yang tampak setipis ukuran 0.1 em. Property "border-color" memungkinkan pengaturan warna.

Sebuah efek yang cantik dapat dilakukan dengan memberikan warna latar belakang kotak dengan warna tebal (solid color) atau dengan hamburan gambar ("tile image"). Untuk melakukan ini perlu mempergunakan property "background" dengan mengikuti perintah berikut ini.

div.color {

background: rgb(204,204,255);

padding: 0.5em;

border: none;

}

Tanpa pengaturan property border, biasanya program browser hanya akan menampilkan warna standar saja. Property padding memberikan beberapa ruangan di antara tepi-tepi daerah berwarna dan teks yang ada di dalamnya. Cara mengatur nilai property padding dengan menambahkan padding-left, padding-top, padding-right dan padding-bottom. Pengaturan ini dituliskan misalnya sebagai :

padding-left: 1em.

Jika menginginkan border pada satu sisi halaman web saja. Caranya melakukan pengontrolan tiap sisi border dengan memberikan keterangan border-left, border-top, border-right dan border-bottom.

Contoh :

p.changed {

padding-left: 0.2em;

border-left: solID;

border-right: none;

border-top: none;

border-bottom: none;

border-left-wIDth: thin;

border-color: red; }

Susunan perintah di atas memberikan efek pada tampilan web dengan border berwarna merah di sisi sebelah kiri.