1. Memahami CSS berdasarkan perumpamaan
[sc name=”iklan umum terbaik 300 x 250 float left”]
Agar lebih mudah memahami CSS, saya akan membuat sebuah perumpamaan yang membuat anda lebih paham apa itu CSS?. Di dalam pembuatan halaman website umumnya anda pasti akan mendengar istilah tentang HTML, CSS, Javascript, PHP dan MySQL. dari ke-5 istilah tersebut, semuanya memiliki peran dan fungsi masing-masing. Jika seandainya ke-5 istilah tersebut diibaratkan seperti “manusia”, HTML adalah fisiknya, CSS adalah pakaiannya, Javascript dan PHP adalah respon fisik sedangkan MySQL adalah Otak yang menyimpan berbagai data. Dari perumpamaan inilah, CSS dapat disimpulkan untuk mempercantik halaman website sebagaimana pakaian mempercantik tampilan fisik manusia.
Konsep dasar dari CSS sendiri adalah sebagai “Pakaian” untuk HTML. Artinya, CSS tidak ada gunanya jika tidak ada desain kode HTML , karena CSS diciptakan untuk mempercantik halaman website dengan menargetkan ke beberapa desain kode HTML. sama seperti pakaian manusia dimana setiap desainnya dirancang dengan menyesuaikan ukuran fisik dan selera masing-masing individu.
Sebagaimana pakaian pada manusia yang memiliki berbagai macam type, properti dan ukuran, CSS memiliki berbagai macam type, Elemen, properti dan nilai yang membedakan antara desain kode CSS yang satu dan yang lainnya. Sebagai contohnya perhatikan kode CSS berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style>
.tulisan-merah-standar { color: red }
.tulisan-biru-standar { color: blue }
.tulisan-merah-besar { color:red; font-size: 30px }
.tulisan-merah-besar { color:blue; font-size: 30px }
</style>
</head>
<body>
<p class="tulisan-merah-standar"> Ini adalah tulisan merah </p>
<p class="tulisan-biru-standar"> Ini adalah tulisan biru </p>
<p class="tulisan-merah-besar"> Ini adalah tulisan merah dengan text sebesar 30px </p>
<p class="tulisan-biru-besar"> Ini adalah tulisan biru dengan text sebesar 30 px</p>
</body>
</html>
Jika Kode desain dari CSS + HTML di atas digenerate, maka tampilannya akan seperti gambar dibawah ini :
