Di postingan ini saya akan menjelaskan mengenai apa itu CSS. Maklum kurang lengkap, soalnya ini hanya menurut sudut pandang saya. Kalau mau yang lengkap bisa cari referensi lain seperti di wikipedia.. :D
CSS merupakan singkatan dari Cascading Style Sheet. CSS umumnya digunakan untuk memposisikan suatu elemen, bisa itu elemen HTML, javascript, flash, dsb. Selain itu, CSS juga bisa digunakan untuk mengkostumisasi tampilan suatu elemen.
Dalam HTML, CSS harus diletakkan dalam tag <style>. Diluar tag tersebut, CSS tidak bisa digunakan. Berikut contoh kecil dari sebuah CSS pada dokumen HTML:
<style>
#nama CSS{
postision: absolute;
width: 600px;
height: 400px;
top: 0px;
right: 0px;
}
</style>
<div id='nama CSS'>
<img src='http://....../gambar.jpg'/>
</div>
Penjelasannya:
- tanda # mendeklarasikan variabel dalam CSS.
- position absolute berarti bahwa posisinya menempel pada dokumen html yang menyertainya (scrollable)
- Width dan height menentukan dimensi objek (dalam hal ini gambar.jpg) biasanya satuannya pixel (px), namun bisa juga diberi persen (%)
- top dan right menentukan letak posisi objek di halaman web. Bisa juga menggunakan left dan bottom. Sama juga, satuannya bisa px atau %
- div, nah, tag inilah yang akan mengapit objeknya. Biar pengaturan CSS bisa berlaku pada objek dalam div, maka harus ditambahkan div id-nya. Beri nama sesuai dengan variabel nama CSS tadi. Tanpa id, CSS tidak dapat bekerja.
Jadi script diatas akan menampilkan gambar di posisi kanan atas dengan ukuran 600x400 piksel. Selamat mencoba... :D
CSS merupakan singkatan dari Cascading Style Sheet. CSS umumnya digunakan untuk memposisikan suatu elemen, bisa itu elemen HTML, javascript, flash, dsb. Selain itu, CSS juga bisa digunakan untuk mengkostumisasi tampilan suatu elemen.
Dalam HTML, CSS harus diletakkan dalam tag <style>. Diluar tag tersebut, CSS tidak bisa digunakan. Berikut contoh kecil dari sebuah CSS pada dokumen HTML:
<style>
#nama CSS{
postision: absolute;
width: 600px;
height: 400px;
top: 0px;
right: 0px;
}
</style>
<div id='nama CSS'>
<img src='http://....../gambar.jpg'/>
</div>
Penjelasannya:
- tanda # mendeklarasikan variabel dalam CSS.
- position absolute berarti bahwa posisinya menempel pada dokumen html yang menyertainya (scrollable)
- Width dan height menentukan dimensi objek (dalam hal ini gambar.jpg) biasanya satuannya pixel (px), namun bisa juga diberi persen (%)
- top dan right menentukan letak posisi objek di halaman web. Bisa juga menggunakan left dan bottom. Sama juga, satuannya bisa px atau %
- div, nah, tag inilah yang akan mengapit objeknya. Biar pengaturan CSS bisa berlaku pada objek dalam div, maka harus ditambahkan div id-nya. Beri nama sesuai dengan variabel nama CSS tadi. Tanpa id, CSS tidak dapat bekerja.
Jadi script diatas akan menampilkan gambar di posisi kanan atas dengan ukuran 600x400 piksel. Selamat mencoba... :D
SHARE THIS POST:
Untuk langsung menjalankan kode-kode HTML atau javascript, anda bisa menggunakan TryIt editor.
1 comments:
Tukeran link ya....
-------------------------------------------
Title : PPC Lokal Indonesia
URL : http://ppclokalindonesia.blogspot.com
-------------------------------------------
Thnx
Post a Comment