Kamis, 26 November 2009

CSS (Cascading Style Sheet)

Ketika kita tinggal di rumah atau mungkin di kos. Tentunya kalian pengen membuat tampilan kamar di rumah atau kos anda semenarik mungkin. Menempatkan lemari, komputer, laptop, meja, alas tidur/kasur anda sesuai keinginan atau mungkin dinding kamar rumah/kos anda ditempelin poster artis pujaan anda. Bagi cwek, biasanya kamar kos/rumah anda selalu ada boneka imut dgn ukuran kecil maupun besar. Nah, barang-barang itu diatur secara rapi agar tidak terlihat sumpek. Desain dan tampilan kamar kos yang menarik dan rapi mengidentifikasikan sosok anda..

Sama seperti ketika kita akan membuat website. Sebelum kita membuat proses transaksi di dalam website anda, tentunya kita harus mendesain halaman web kita semenarik mungkin agar dikunjungi banyak orang, orang menjdi tidak bosan ketika mengunjungi web anda. Misalnya di halaman anda diberi animasi atau mungkin diberi gambar atau mungkin diberi gambar-gambar bercorak atau mungkin font(huruf) diberi warna atau mungkin anda ingin mengganti model font(huruf)....



Pakai apa ya kira-kira supaya tampilan halaman web kita tampil semenarik mungkin? hmmmm....mikir dl....ah gampang banget. pakai aja CSS.

Apa itu CSS? Makanan apa sih CSS itu? Kepanjangan dari CSS adalah CASCADING STYLE SHEET. CSS merupakan file yang berfungsi untuk mendesain dan membuat tampilan halaman web semenarik mungkin. file CSS berekstensi *.css, CSS dapat diimplementasikan di berbagai tools pemrograman web seperti ASP.Net, ASP, PHP, Crypton,dll.

Contoh kecil isi dari file CSS yaitu :
body
{
background-color:blue;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
Penjelasan dari contoh kecil di atas: body{} merupakan coding yang berfungsi untuk mendesain tampilan halaman web anda secara global. Misal anda memiliki halaman web DEFAULT.aspx atau mungkin DEFAULT.php. Secara default, background dari halaman web itu putih mulus...Waow...putih mulus...hehehe...Ketika kita memakai file CSS dengan isian filenya adalah body{} aja dengan warna background sperti yang ada di contoh kecil itu maka background dari halaman web DEFAULT.aspx atau DEFAULT.php berubah menjadi warna biru...udah ngerti belum? tanya aja gan jgn skedar baca aja.... :D
Penjelasan dari coding p{} merupakan coding yang berfungsi untuk mendesain tampilan kalimat-kalimat yang ada di masing-masing paragraf pada halaman web anda. Jika di halaman web anda berisikan info-info suatu perusahaan.
body{} merupakan kode secara default dari file CSS yang ada di ASP.Net...

CSS memiliki class dan selector. apa itu class dan apa itu selector? source code dari class adalah ada tanda # pada awal nama class. misal #classku{}. source code itu memiliki fungsi untuk mendesain halaman web anda elemen per elemen.
Misal di halaman web anda ada header (tempat kita menuliskan nama perusahaan), ada footer (tempat kita menuliskan siapa pembuat web anda), ada badan kiri (tempat menaruh menu sperti di situs facebook), ada badan kanan (tempat menaruh info-info perusahaan atau mungkin tempatnya proses transaksi). Kita tentunya ingin mendesain satu per satu elemen-elemen tersebut. Supaya bisa mendesain satu per satu gunakanlah class. Untuk implementasinya bisa baca postingan aku selanjutnya...xixixi...
Fungsi dari selector adalah source code yang berfungsi untuk mendesain control-control secara menarik. source code dari selector adalah ada tanda [] pada awal nama selector. misal [slectortitle]{}. Untuk implementasinya bisa baca postingan aku selanjutnya...xixixi...

Saya tidak membahas secara lengkap masing-masing kegunaan dari isi dari file CSS.
Info lebih lanjut bisa lihat di http://www.w3schools.com/css/css_reference.asp

SELAMAT MENCOBA teman-teman

0 komentar: