CSS (Cascading Style Sheet ) - Style Untuk Background & Link

Properti CSS ( Cascading Style Sheet ) untuk background digunakan untuk membuat efek pada bagian latar belakang ( background ) dari sebuah halaman web atau elemen HTML. Latar belakang ato background sebuah web defaultnya adalah warna putih disini kita akan mempelajari bagaimana menempatkan sebuah gambar atau memberikan warna dengan menggunakan CSS (Cascading Style Sheet).

Properti yang digunakan untuk beckground adalah :

1. background-color -> memberikan warna background pada sebuah elemen HTML, contoh memberikan warna pada sebuah halaman web dengan penerapannya sebagai berikut :

Memberikan warna background pada halaman web.	body{        background-color: orange; }
Memberikan warna background pada elemen HTML.	h2{background-color: white;} p{background-color: black;}
nilai warna selain menggunakan nama english dapat juga dengan menggunkan nilai : -> RGB (red, green, blue) seperti (255, 255, 255) -> Nilai Hex seperti #FFFFFF untuk warna putih, #00000 untuk warna hitam, dll, nilai color ini dapat dilihat dalam warna di coreldraw, photoshop atau cari di mbah google juga ada...*_^

2. background-image -> menempatkan sebuah gambar untuk background pada sebuah elemen HTML, contoh penerapannya :

body{        background-image: url(nama_file_gambar.jpg); }

type gambar juga bisa dengan .gif, .png, dll.

3. background-repeat -> mengatur perulangan gambar yang ditampilkan untuk background-image,pada contoh penerapan diatas, gambar untuk background akan berada pada posisi default dimana gambar selalu melakukan perulangan sehingga background dengan gambar akan melatari isi dari elemen HTML. Jika hanya ingin mengatur perulangan gambar pada background secara horizonta, vertikal atau tanpa perulangan dapat kita atur dengan background-repeat ini, contoh penerapan untuk background-repeat :

Pengulangan gambar secara horizontal	body{     background-image: url(nama_file_image.jpg);     background-repeat: repeat-x; }
Pengulangan gambar secara vertikal	body{     background-image: url(nama_file_image.jpg);     background-repeat: repeat-y; }
Tidak melakukan pengulangan pada Background	body{     background-image: url(nama_file_image.jpg);     background-repeat: no-repeat; }
Penempatan -repeat pada posisi background-image	body{     background-image: url(nama_file_image.jpg)repeat-x; }

4. background-attachment -> mengatur posisi gambar agar tetap berada pada tempatnya, yaitu dengan memberikan nilai scroll, fixed atau inherit.contoh penerapannya :

Memberikan nilai -fixed untuk background-image

body{      background-image: url(nama_file_image.jpg);      background-attachment:fixed; }

5. background-position -> mengatur posisi gambar pada background-image yang ditampilkan pada background halaman web, contoh penerapan :

Mengatur posisi gambar ditengah-tengah halaman web	body{      background-image: url(nama_file_image.jpg);      background-position:center center; }
Mengatur posisi gambar ditengah bagian atas halaman web	body{      background-image: url(nama_file_image.jpg);      background-position:right top; }
Mengatur posisi gambar dikiri bagian atas halaman web	body{      background-image: url(nama_file_image.jpg);      background-position:left top; }
Karna terlalu banyak nilai untuk mengatur posisinya jadi saya lanjut aja pada nilainya aja, soalnya capek nulisnya...*_* ...Selain nilai diatas ada lagi : left center, left bottom, right center, right bottom, center top, center bottom, x% y%, xpost ypost dan inherit.

6. Cara mempersingkat untuk penulisan kode dari contoh 1-5 :

body {background: Orange url(nama_file_image.jpg) repeat-x center top;}

Disini kita dapat menggabungkan semua nilai properti dari background, saya lebih suka dengan penulisan ini karna lebih simpel...heheh

Style untuk Link

Kita dapat menggunakan properti color, font, background dan sebagainmya untuk Style CSS Links. Bisa menggunakan varian style CSS berbeda tergantung pada situasi link tersebut contoh pada tabel di bawah :

Link awal, belum di click.	a:link { color:black; text-decoration: none; }
Link yang sudah di click.	a:hover { color: wahite; text-decoration: underline; }
Link yang ditunjuk oleh mouse.	a:visited { color: pink; font: 15pt; }
Link yang sedang Active.	a:active { color: purple; background-color: white; }