Memanfaatkan Desain Web CSS
Nah disinlah fungsi CSS, sebentar lagi anda akan melihat wujud div itu seperti
apa.Pada topik saya sebelumnya, saya telah menerangkan tentang membuat sebuah desain website dengan menggunakan bantuan software Artisteer. Kalau Anda pernah mencobanya, coba deh bongkar file template bikininan Artisteer. Pasti disitu Anda akan menemukan sebuah file CSS.
Nah apa itu CSS? Kepanjangannya sih adalah Cascading Style Sheet. Yaitu sebuah aturan yang digunakan untuk mengatur tampilan website.
Wujud CSS itu seperti apa?
CSS itu berwujud sebuah file teks biasa saja sih, cuma berekstensi .css
Artinya kalau anda menemukan sebuah file yang akhirannya .css. Seperti atur.css. Nah itulah yang disebut file CSS. Kalo anda buka file tersebut dengan Notepad atau file editor sejenis, akan berisi kode-kode CSS.
Anda boleh berkesimpulan bahwa CSS adalah sebuah file yang berguna untuk mengatur tampilan suatu website. Satu file CSS bisa berguna untuk mengatur seluruh halaman website yang terhubung file CSS itu sendiri. Ibarat komputer server dengan banyak komputer client, satu file CSS seperti komputer server yang mengatur banyak komputer klien. Sedangkan beberapa file HTML seperti komputer clientnya.
Jadi jelaslah CSS menjadi sangat berguna dalam hal pendesainan website. Tahu tidak, dahulu sebelum ada CSS para web designer menata halaman website dengan tabel. Desain web di bentuk melalui photoshop dengan gambar keseluruhan yang utuh. Lalu gambarnya akan dipotong-potong dengan tool slice yang ada pada Photoshop. Potongan-potongan itu lalu diletakan dalam setiap cell tabel. Pokoknya ribet.
Tapi dengan CSS, Anda hanya perlu menuliskan satu kali saja untuk mengatur banyak elemen. Elemen apa? Yah elemen yang ada diwebsite. Seperti jenis huruf, warna background, ukuran header, dsb adalah elemen website. Nah disinilah peran CSS untuk mengatur semua jenis elemen tersebut.
Nah, kalau Anda lihat contoh diatas. Penulisan CSS mengikuti format sebagai berikut
He-he, kalau anda pemula yang baru melihat file CSS. Pasti ruwet
dan pusing melihatnya. Tenang saja. Kita tidak akan mulai dari Dasar. Tapi kita
akan mulai dari cara yang menyenangkan.
Yuk, sekarang saya akan ajak Anda berkesperimen membuat sebuah
file html biasa. Kita buat saja sebuah HTML yang sedehana seperti ini
<html>
<body>
<div>
</div>
</body>
</html>
Kalau Anda ingin melihat
hasil dari kode diatas. Tampilannya akan seperti ini
Kosong yah, hehe...
Anda tahu, sebenarnya di
halaman web yang kosong itu ada sebuah div.
Apa itu div?
Div itu ibarat sebuah
elemen kotak di dalam html. Fungsi div berguna seperti penampung elemen apa
saja. Nanti dalam hal pengaturan desain web, Anda pasti akan banyak berurusan
dengan tag div.
Anda belum bisa melihat
div, karena div itu belum saya atur sehingga belum kelihatan apa-apa
Saya menulikan kode ini
<style>
div{
background:#0F0;
width:500px;
height:400px;
}
</style>
Saya akan menambahkan
kode ini antara bagian <head> dan </head> sehingga kesluruhan kode
htmlnya akan seperti ini
<html>
<head>
<style>
div{
background:#0F0;
width:500px;
height:400px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Nah, hasil kode diatas
akan menampakan wujud div seungguhnya
Lihat, ada tiga bagian utama yang harus ada dalam penulisan kode CSS. Yaitu Selector, Property, dan Value.
Dalam contoh kasus diatas. Yang bertindak sebagai Selector adalah elemen <div>. <div> adalah salah satu elemen HTML. Selain <div>, masih banyak lagi elemen HTML yang bisa kita atur menggunakan CSS.
Yang kedua adalah Property. Dalam contoh kasus diatas kita menggunakan tiga property sekaligus. Disitu saya menggunakan tiga properties yaitu background, width, dan height.
Oke, itulah fungsi CSS sebagai pengatur tampilan. Jika ada yang ingin ditanya silahkan berkomentar.
Yang kedua adalah Property. Dalam contoh kasus diatas kita menggunakan tiga property sekaligus. Disitu saya menggunakan tiga properties yaitu background, width, dan height.
div{
background:#0F0;
width:500px;
height:400px;
}
Ketiga properti mempunyai fungsinya masing-masing. Background berguna untuk mengatur tampilan latar belakang, widht untuk mengatur lebar div, dan height untuk mengatur tinggi div.
Selain ketiga properties tadi, masih banyak sekali properties CSS lainnya. Mungkin terdapat ribuan properties yang tersedia dalam CSS (lebay). Tapi tenang saja, anda tidak perlu tahu semua properties dalam CSS. Cukup tahu yang perlu saja. Untuk kali ini saya hanya memperkenalkan tiga properties saja dulu. ^_^
bagian terakhir dari kode CSS adalah value. Value digunakan untuk mengisi nilai dari properti. Bentuk value sendiri menyesuaikan dari propertie yang digunakan. Misalkan nih, properti height pasti bentuk valuenya berupa angka karena untuk mengatur ukuran tinggi suatu elemen. Ga mungkin donk satuan tinggi nilainya berupa warna. ^)^
bagian terakhir dari kode CSS adalah value. Value digunakan untuk mengisi nilai dari properti. Bentuk value sendiri menyesuaikan dari propertie yang digunakan. Misalkan nih, properti height pasti bentuk valuenya berupa angka karena untuk mengatur ukuran tinggi suatu elemen. Ga mungkin donk satuan tinggi nilainya berupa warna. ^)^
Oke, itulah fungsi CSS sebagai pengatur tampilan. Jika ada yang ingin ditanya silahkan berkomentar.
Terimakasih. Infonya sangat berguna bagi saya yang awam banget maslah script... saya sedang ngoprek www.zigra.co.id
ReplyDelete