Bloggerologi

Bagi Anda yang ingin mempelajari cara membuat website pasti akan belajar css dan bahkan belajar css3. Tapi tentu saja Anda harus belajar css dasar terlebih dahulu agar kedepanya bisa belajar css3 dengan lengkap tanpa kesulitan yang berarti. Pertama-tama Anda harus belajar pengertian CSS dan juga memahami fungsi dan contohnya barulah mempelajari CSS yang lebih kompleks.
Dalam dunia internet kita mengenal yang namanya situs, yang dimana situs-situs ini menyajikan berbagai macam konten. Setiap situs atau website yang kita kunjungi apabila kita perhatikan maka tentu kita akan mendapati setiap website memiliki gaya tampilan websitenya masing-masing.

Contohnya blog ini misalnya, saat penulis menulis artikel ini blog ini didominasi dengan warna hijau yang mendekati biru dengan layout yang terlihat cukup simpel dibanding dengan wesite-website berita.

Lalu apa sebenarnya yang membuat sebuah website memiliki desain yang berbeda-beda?

Jawbanya adalah karena setiap website menggunakan yang namanya CSS (Cascading Style Sheet).  Kemudian kita akan berpindah ke pertanyaan-yang lebih besar dan menjadi tema artikel ini, yaitu :

Apa itu CSS?

apa itu css? / freepik

CSS adalah singkatan dari Cascading Style Sheet, yang merupakan aturan atau bahasa untuk mengatur komponen-komponen halaman website sehingga akan lebih terstruktur dan seragam.

Simpelnya CSS adalah bahasa para web designer untuk memperindah tampilan website mereka dengan mengatur warna, posisi, gambar, font dan lainya,

CSS bukanlah termasuk kepada bahasa pemrograman karena ia tidak memiliki fungsionalitas yang dinamis melainkan amat terbatas pada styling atau memperindah dokumen yang menggunakan bahasa markah seperti HTML dan XHTML.

Sejarah CSS

sejarah CSS / freepik

CSS merupakan bahasa yang direkomendasikan oleh World Wide Web Consortium (W3C) pada tahun 1996 sebagai standar web design, kemudian browser seperti Internet Explorer dan Netscape merilis browser baru mereka dengan standar CSS.

CSS sendiri disicptakan oleh seorang bernama Håkon Wium Lie yang berasal dari Norwegia, Ia lahir 16 Juli tahun 1665. Ia mulanya menuangkan ide awal CSS nya pada proposal berjudul Cascading HTML Style Sheet (CHSS) di Chicago, Ilinois tahun 1994. Ia tidak berkerja sendiri namun Ia juga berkerja sama dengan Bert Bos untuk mengembangkan standar CSS.

Kemudian pada tahun 1996 CSS resmi dijadikan standar browser dan pada desember ditahun yang sama dirilislah CSS level 1, atau CSS pertama.

Fungsi CSS

fungsi css / freepik

Apabila Anda adalah seseorang yang memiliki blog maka seharusnya Anda akan menemukan kode CSS setiap kali Anda membuka source code blog Anda atau saat mencari tutorial blog di mesin pencari.

Hal ini karena CSS adalah bahasa yang hampir seluruh website dan blog menggunakanya, penulis benar-benar tidak dapat menunjukan contoh website yang tidak menggunakan CSS pada websitenya kecuali website yang didirikan oleh Timoty Berners Lee yang mana webnya adalah website pertama didunia.

Sebagai gambaran untuk memahami fungsi CSS silahkan lihat tampilan blog ini lalu bandingkan dengan webnya milik Berners Lee yaitu http://info.cern.ch/.

Anda akan mendapati website tersebut benar-benar tidak bernilai estetika bukan? hal itu dikarenakan website tersebut belum menggunakan CSS.

Sehingga cukup jelas bahwa fungsi CSS itu untuk mengatur dan memperindah halaman website yang menggunakan HTML atau XHTML.

Perkembangan CSS

CSS Level 1

Pada bulan agustus 1996 dirilislah CSS level 1 oleh organisasi W3C dengan tujuan untuk mengurangi perang browser antara Internet Explorer dan Netscape. CSS ini memiliki beberapa fitur diantaranya dapat mengatur font, warna, gambar, margin, posisi teks, padding, border dan lainya.
Rilis Tahun 1996

CSS Level 2

W3C memperbaharui standar CSS tahap awal dengan merilis CSS level 2 yang kemudian hingga kini masih digunakan secara masif, CSS 2 ini dirilis pada tahun 1998. Fitur ini tidak menghilangkan fitur CSS level 1 melainkan mengembangkanya agar lebih memiliki kapabilitas yang lebih tinggi.
Rilis Tahun 1998

CSS Level 3

CSS ini merupakan versi CSS terbaru, Ia memiliki fitur yang jauh lebih dinamis dibanding pendahulunya, diantaranya Ialah fitur animasi 2D dan 3D, border-radius, drop shadow, text shadow dan lainya.

Jenis-jenis CSS

Sebelum kita masuk ke contoh penggunaanya kita harus mengetahui jenis-jenis CSS, diantaranya :

1. Internal CSS atau Embedded (ini adalah kode CSS yang disimpan dibawah tag "style".)

2. External CSS (ini adalah kode CSS yang diambil dari luar dokumen.

3. Inline CSS (Inline CSS adalah kode CSS yang terdapat dalam baris HTML)

Contoh Penggunaan CSS

Internal CSS atau Embedded CSS

CSS ini bersifat memisahkan diri dari kode HTML namun tetap dalam dokumen yang sama, hanya saja peletakanya tidak dalam baris yang sama dalam kode HTML.
contoh internal CSS :

<!DOCTYPE html> 
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>

<style>
body {background:blue; color:black; margin-left:10px}
h1 {font-size:24px; color:black}
p {font-size:12px; font-family:arial; text-indent:0.5in}
</style>

<body>
<h1>Judul ini berukuran 24 pixel dengan warna hitam!</h1>
<p>Tag p ini di format dengan besar font 12 pixel dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

Kita dapat melihat bahwa kode CSS dalam dokumen diatas diapit dalam tag :
  <style>...</style>

Eksternal CSS

Cara ini mudah dilakukan karena kita tak akan pusing saat mengoding kode HTML karena tak bercampur, namun kekurangnya ialah teknik ini memiliki kekurangan yaitu membuat loading web semakin lambat. karena berbeda dengan Embedded CSS, External CSS benar-benar memisahkan diri dari dokumen HTML dan berada pada dokumen CSS nya sendiri secara mandiri, CSS ini akan memiliki domumen berbentuk ".CSS".

File tersebut kemudian dapat dipanggil menggunakan caller atau pemanggil yang akan terlihat seperti ini :

<!DOCTYPE html>
<head>
<title>Contoh Bentuk Embedded</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<h1>Judul ini berukuran 24 pixel dengan warna hitam!</h1>
<p>Tag p ini di format dengan besar font 12 pixel dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

Dapat kita amati bahwa perbedaan dengan kode CSS sebelumnya ialah kali ini tak terlihat ada kode CSS dalam dokumen tersebut, namun telah digantikan dengan kode berikut :

<link rel="stylesheet" type="text/css" href="style.css"> 

Inline CSS 

Inline CSS adalah CSS yang posisinya tepat dalam satu baris yang sama dengan tag HTML nya itu sendiri, contoh :

<!DOCTYPE html>
<head>
<title>Contoh Bentuk inline CSS</title>
</head>
<body style="margin-left: 5in;background-color:blue;">
<h1 style="font-size:24px;">Judul ini berukuran 24 pixel dengan warna hitam!</h1>
<p style="font: 12px Arial;">Tag p ini di format dengan besar font 12 pixel dengan tipe font Arial </p>
<p>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>

Kita dapat melihat kini kode CSS berada tepat didalam setiap tag HTML, kekurangan dari teknik ini adalah kita harus selalu mengulang kode CSS ke setiap tag HTML.

Akhir kata - Pelajari lagi lebih lanjut

Pada dasarnya penjelasan diatas benar-benar hanya dasar dari CSS, setidaknya ada puluhan properti dan nilai CSS yang harus kita pelajari agar benar-benar dapat membangun sebuah web dengan desain yang indah dipandang.

Pelajarilah lebih lanjut mengenai CSS. Karena hakikatnya CSS adalah salah satu bahasa paling dasar untuk dapat memndesain website. sehingga masih jauh jalan yag harus kita tempuh untuk menjadi seorang web designer ataupun front-end programmer.