Sabtu, 26 Desember 2009

Sekilas Tentang CSS

Sekilas Tentang CSS




Apa itu CSS? 
CSS (Cascading Style Sheet) atau biasa disebut style sheet merupakan bahasa pemrogaman yang digunakan untuk melengkapi bahasa pemrogaman HTML. Tujuan style sheet adalah untuk mempermudah penggunaan HTML dengan saling menautkan beberapa fungsi HTML hanya dengan penulisan beberapa baris kode. Bahasa CSS ini dikenalkan oleh organisasi W3C (kunjungi di: http://www.w3c.org).
Kekurangan dan Kelebihan CSS
Kekurangan dari CSS mungkin hanya pada tampilannya yang tidak didukung beberapa browser tertentu. Browser-browser lama seperti Netscape dan Internet Explorer 4.0 tidak mendukung CSS. Namun browser-browser terkini pun kadang tidak menampilkan secara maksimal kode CSS dalam suatu website. Apabila itu yang terjadi, biasanya pengembang browser menyiasatinya dengan add-on atau plugin untuk mendukung tampilan CSS. Anda hanya perlu mengunduhnya dari internet dari situs pengembang browser yang bersangkutan. Keuntungan dari penggunaan CSS adalah lebih praktis. Sebagai contoh, apabila Anda ingin mengganti tipe font (Arial ke Trebuchet misalnya) dari beberapa halaman website Anda, Anda hanya perlu mengganti penulisan kode CSS yang menautkan pengaturan huruf pada beberapa halaman website tersebut. Berbeda apabila Anda hanya menggunakan HTML. Anda harus mencari dan mengubah kode HTML yang mengatur penggunaan tipe font tersebut. Apabila kode HTML-nya banyak, maka Anda harus keluar tenaga dan waktu lebih untuk mengubahnya.
Penggunaan CSS sekarang sudah meluas untuk berbagai macam template dan banyak sekali variasi kode yang dapat digunakan untuk memaksimalkan penggunaannya. (kunjungi http://www.w3c.org untuk mengetahui lebih lanjut tentang CSS dan varian kode CSS).
Ciri Kode CSS
Ciri dari CSS dalam kode dari suatu template adalah berawalan: <style type="text/css"> kemudian dilanjutkan dengan pengaturan beberapa elemen template seperti layout, sidebar, dan content. Sedangkan tag penutupnya adalah </style>. Untuk pengaturan layout, sidebar, dan konten biasanya ditulis dengan mengetik strip kemudian asterix lalu mengetik elemen yang ingin diatur, kemudian diakhiri dengan asterix dulu kemudian strip, contoh jelasnya seperti di bawah ini:
/* layout */
body{
background: #339933;
font-family: Tahoma, Verdana, Arial;
padding: 0;
margin: 0;
}
#container{
width: 800px;
background: url("bg-container.jpg");
margin: 0 auto;
}
terlihat bahwa pengaturan di atas adalah untuk layout yang mencakup body dan container. Sedangkan dalam body dan container sendiri terdapat pengaturan lagi untuk lebar, warna, dan margin/padding. Lebar, warna, margin/padding untuk pengaturannya diawali dengan notasi ”{” dan ditutup dengan notasi ”}
Sebenarnya masih banyak lagi yang perlu dibahas dari CSS, pengaturan huruf, padding/margin, dan warna. Nanti saya akan bahas lebih lanjut untuk Anda. Thanks to read, Have a nice day!