Pertama kita kenalan dulu deh ma yang namanya css ini. kalau dilihat dari kegunaannya sih, kayaknya css itu adalah kumpulan kode-kode yang dipakai buat mengatur tampilan halaman situs atau blog kita. Bisa dipakai untuk memperindah bisa juga untuk memperburuk. Tergantung citarasa seni kita. Dengan css kita bisa mengatur background halaman web, huruf, tampilan link, jumlah dan posisi kolom pada halaman web/blog, dll.
Beberapa kelebihan menggunakan css untuk menghias situs kita, jika dibandingkan dengan hanya menggunakan kode html saja antara lain, lebih hemat waktu dan lebih mudah dalam mengedit tampilan web, karena css fungsinya seperti master halaman. Jadi ketika ingin mengubah seluruh web hanya cukup mengubah dari file css-nya tanpa perlu satu per satu dari tiap halaman. Karena sekali css ditulis, akan berlaku untuk semua halaman web. Ini juga berefek pada loading halaman yang menjadi lebih cepat, karena ukuran file tiap halaman web jadi lebih kecil. Kemudian, dengan css, juga memungkinkan berbagai efek yang lebih beragam untuk mempercantik tampilan web kita yang tidak bisa didapat dari html. Sedangkan kekurangannya adalah, beberapa kode css yang berjalan baik pada satu web browser, belum tentu bisa aktif pada web browser yang lain.
Oh iya, lupa. Css itu singkatan dari Cascading Style Sheet ^_^
Cara penulisan CSS
Seperti yang udah dijelasin sebelumnya, css itu bisa buat ngatur macam-macam, dari background sampai huruf. Format penulisan css contohnya seperti ini:
body { color: red; background: black; }
h1{font:25px helvetica;font-weight:bold;}
h2{font:23px helvetica;font-weight:bold;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:#333;text-decoration:none;}
a:hover{color:#666;}
Untuk menjelaskannya kita buat permisalan saja seorang bos dan karyawannya. Si bos (yaitu kita) ingin memberikan perintah pada karyawannya (maksudnya halaman blog kita). Nama karyawan yang akan di tuju adalah body,h1, h2, h3, h4, dan a. Sedangkan isi perintahnya adalah yang ada di antara {…}. Body tugasnya mengatur tampilan halaman web secara umum, h1 tugasnya mengatur tampilan judul utama, h2 dst mengatur sub judul, dan si a untuk mengatur tampilan link yang ada pada halaman web. Untuk kode di atas si bos bermaksud memerintahkan si body supaya menggunakan huruf berwarna merah (color: red;) dan warna backgroundgnya harus hitam (background: black;). Untuk h1 si bos memerintahkan dia supaya menampilkan judul utama dengan huruf helfitica dengan ukuran 25 px dan ditampilkan dengan efek tebal. Dan begitu seterusnya.
Css bisa juga ditulis secara berkelompok seperti
h1,h2,h3,h4,h5,h6 { color: blue }
Ini bisa dilakukan jika kita menginginkan judul utama dan sub judulnya memiliki warna yang sama yaitu biru. Jadi tidak perlu ditulis satu per satu.
Untuk memudahkan membacanya bisa juga dituliskan dalam bentuk seperti ini
h1 {
color:blue;
font-family:arial;
font-size:14px;
}
Untuk bisa mengaktifkan css di halaman situs kita, ada 3 cara.
Pertama, ditulis langsung di tag htmlnya
<html>
<head>
<title>test css</title>
</head>
<body>
<h1 style=”color: red”>ini judul</h1> <!–ini kode css-nya–>
<p>kalau yang ini paragraf</p>
</body>
</html>
Kedua, di tulis di dalam tag <style>
<html>
<head>
<title>test css</title>
<style type=”text/css”>
p { color:#0000FF;font-weight:bold; } /*ini kode css-nya. ditujukan untuk tag <p>*/
</style>
</head>
<body>
<h1>Ini judul</h1>
<p>ini paragraf</p> <!–bagian ini (tag P) yang terkena efek css–>
</body>
</html>
Yang terakhir, melalui link ke file css lain
<html>
<head>
<title>test css</title>
<link rel=stylesheet type=”text/css”href=”http://www.alamatsitus/styles/namafile.css”/>
</head>
Supaya cepat mengerti ada baiknya sering-sering melihat contoh-contoh kode css dari suatu web/blog. Bandingkan kode css yang tertulis dengan tampilan halamannya di web browser.
