Memahami CSS dalam membuat halaman web | WebCSS | 01
Memahami CSS dalam membuat halaman web merupakan hal yang paling penting bagi web designer !! sebab dan alasannya adalah CSS merupakan sekumpulan kode desain yang digunakan untuk mempercantik tampilan website. Apakah anda memperhatikan warna-warna dari halaman website ini? apakah anda memperhatikan besar dari text judul dan sub judul di postingan ini? dan apakah anda melihat tata letak dari setiap komponen yang ada di website ini? semuanya adalah urusan CSS. Untuk membahas lebih rinci tentang memahami CSS.
1. Memahami CSS berdasarkan perumpamaan
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 :
Dengan menggunakan CSS, Tampilan halaman website dari struktur kode HTML akan berbeda-beda sesuai dengan nilai properti yang kita buat. Untuk baris pertama saya menginginkan kalimatnya berwarna merah tetapi dengan ukuran yang standar, untuk baris kedua tidak jauh berbeda hanya warnanya saja yang berubah menjadi biru, sedangkan baris ketiga hanya ukurannya saja yang berbeda dari baris pertama dan untuk baris keempat hanya berbeda ukuran dari baris kedua.
Jika di berikan perumpamaan bagaikan “manusia”, Baris satu adalah anak kecil yang memakai pakaian yang berwarna merah, sedang baris dua adalah anak kecil yang memakai pakaian biru, Untuk baris ketiga dan keempat adalah orang dewasa yang memakai pakaian merah dan biru.
2. Memahami CSS berdasarkan Artinya
CSS merupakan singkatan dari Cascading Style Sheet. Setiap kepanjangan dari CSS sendiri terdapat arti khusus yang dapat menjelaskan makna dan fungsi dari kode CSS sendiri :
— 2.1 Memahami CSS dari kata Cascading
Cascading berararti “Mengalir Kebawah” dimana setiap anda menyusun kode CSS susunannya akan tersusun dari atas ke bawah. Dalam penyusunan kode CSS, akan berlaku namanya “Aturan yang paling terakhir” dimana kode CSS yang terakhir akan dipakai dalam Elemen HTML yang sama. Contoh, Perhatikanlah kode CSS dibawah ini :
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style>
.kalimat-pertama { color: red }
.kalimat-pertama { color: green }
.kalimat-pertama { color: chocolate }
.kalimat-pertama { color: blue }
</style>
</head>
<body>
<p class="kalimat-pertama"> Ini adalah paragraph pertama, kira-kira kalimat ini jadi warna apa ya ? Yups akan berwarna Biru !! </p>
</body>
</html>
Jika digenerate pada web browser maka tampilannya akan jadi seperti ini :
— 2.2 Memahami CSS dari kata Style
Seperti arti dari style sendiri yaitu gaya, bawha CSS menjelaskan berfungsi sebagai gaya dari elemen HTML. Style lebih mengarah ke “penandaan” dimana setiap kode CSS dalam satu halaman website harus diletakan pada markup/tanda antara <style> ….. Kode CSS disini ….. </style>. Cara menulis kode CSS seperti ini tidak menjadi aturan mutlak dalam penulisan, karena markup <style> ….. Kode CSS disini ….. </style> lebih di khususkan untuk kumpulan kode CSS dalam 1 halaman website dengan tujuan menjadikan desain kode CSS menjadi lebih efisien dibandingkan dengan “Inline CSS“.
— 2.3 Memahami CSS dari kata Sheet
Sheet mengartikan bahwa susunan dari kode CSS juga dapat bersifat kumpulan dari berbagai kode CSS. Contohnya menggunakan @import url(“slug.css”); dimana, kode CSS diambil dari berbagai sumber. misalnya, jika anda menggunakan CSS dengan gaya penulisan <style> ….. Kode CSS disini ….. </style> di dalam tag head, maka kode dalam halaman website akan menjadi lebih banyak apabila anda menyeleksi ratusan atau ribuan elemen HTML untuk dibuat tampilan CSS-nya. Hal ini akan memberatkan halaman website, Solusi terbaik untuk permasalahan ini adalah membuat sekumpulan kode CSS yang terdiri dari tiap sheet untuk setiap fungsi CSS. misalnya : @import url(“style-tulisan.css”); digunakan untuk mengatur ukuran dan posisi tulisan, @import url(“style-tampilan.css”); digunakan untuk mengatur tata letak dan tampilan halaman website dan @import url(“style-warna.css”); digunakan untuk mengatur warna halaman website. Contoh penyusunan dalam desain kode adalah seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style>
@import url("style-tulisan.css")
@import url("style-tampilan.css");
@import url("style-warna.css");
</style>
</head>
<body>
...........
</body>
</html>
3. Apa manfaat yang akan di dapat jika sudah memahami CSS ??
Manfaatnya sangat banyak, terlebih lagi untuk anda yang berkecimpung di dunia web designer. Dengan memahami CSS, anda akan mendapatkan manfaat berupa : Efektif dalam mendesain tampilan halaman website, Efisien dalam menyusun source kode dan menjadikan anda lebih profesional dalam mendesain tampilan halaman website. Walaupun di zaman sekarang sudah ada berbagai macam platform dalam membuat website sehingga anda tidak perlu lagi direpotkan menyusun tampilan halaman website, tetapi ujung-ujungnya anda pasti butuh yang namanya “memahami CSS” karena setiap platform juga butuh settingan pada Custom CSS agar anda bisa mengubah tampilan dasar dari halaman website sesuai dengan keinginan anda.
