HTML dan CSS - Pengertian, Sejarah, Fungsi, dan Jenis CSS

CSS merupakan kepanjangaan dari Cascading Style Sheets dimana css adalah salah satu bahasa pemprogaman yang digunakan oleh seorang programer untuk membuat sebuah website. CSS digunakan oleh programer untuk mendesain halaman depan atau tampilan dari suatu website agar lebih memiliki variasi

Mengapa harus CSS?

Karena di CSS ada banyak hal yang dapat kita lakukan dibandingkan dengan bahasa pemrograman inti lainnya seperti HTML dan PHP. Ketika kita menggunakan CSS, kita dapat mengatur warna teks, jenis font, baris antar paragraf, ukuran kolom, dan jenis background yang dipakai sesuai kemauna diri kita sendiri.

Tidak hanya itu, di CSS kita juga bisa untuk mendesain sebuah layout, variasi tampilan di berbagai perangkat yang berbeda (respondsive), dan masih banyak yang lainnya. Makannya tidak heran jika psada saat ini CSS hampir dipakai di berbagai website untuk dikombinasikan dengan HTML maupun PHP.

Apa itu CSS ?

CSS sendiri merupakan singkatan dari Cascading Style Sheets yang merupakan sebuah bahasa pemprogaman yang digunakan untuk mempercantik tampilan dari sebuah webbsite. 

Dengan menggunakan CSS kita dapat mengatur layout, background, teks, paragraf, dan masih banyak lagi yang lainnya. dengan menggunakan CSS kita sebagai developer juga merasa mudah dan terbantu dalam membuat sebuah website.

Sejarah Singkat CSS

Terciptanya CSS diawali dari ide besar dari Hakon Wium Lie yang tertuang dalam proposalnya mengenai Cascading HTML Style Sheet (CHSS) pada konferensi World Wide Consortium (W3C) di Chicago, Illinois.

Konferensi tersebut diadakan pada bulan Oktober 1994. Proposal yang diajukan oleh Lie tersebut akhirnya di kembangkan bersama dengan Bert Bos menjadi CSS. Selain itu, proyek pengerjaan CSS juga didukung oleh Thomas Reardon, seorang programmer dari Microsoft.

CSS 1 kemudian resmi dirilis kepada publik pada tahun 1996. Nama CSS diambil dari bentuk deklarasi style berbeda yang diletakkan secara berurutan. Pada 17 Agustus 1996, pihak W3C (World Wide Web Consortium) merekomendasi CSS sebagai sebuah bahasa pemrograman standar dalam pembuatan website.

Kemudian pada tahun 1998, W3C menyempurnakan CSS dan menamainya sebagai CSS 2. Pada level ini, CSS dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar dapat ditampilkan pada printer.

Hingga pada akhirnya, terbitlah CSS 3 yang memiliki beberapa fitur baru yaitu:

• Animasi – sehingga tidak lagi membutuhkan Adobe Flash dan Microsoft Silverlight.
• Efek teks – ada tiga macam yaitu teks berbayang, kolom koran, dan word-wrap.
• Jenis huruf eksternal – sehingga bisa menggunakan berbagai huruf yang tidak termasuk dalam web-safe font.
• Efek pada kotak – ada tiga macam efek yang dapat diterapkan yaitu kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.

Kini, CSS di maintain W3C oleh sebuah divisi bernama CSS Working Group. Mereka membuat dokumen yang dikenal dengan nama specifications. Ketika sebuah specifications telah didiskusikan dan secara resmi oleh anggota W3C, dokumen tersebut akan disebut recommendation (proposal). Specifications yang telah diresmikan disebut sebagai recommendation karena W3C tidak memiliki kontrol pada penerapannya secara nyata. Software akan dibuat oleh perusahaan dan organisasi yang bergerak secara mandiri.

Fungsi CSS

1. Mempercepat Proses Desain sebuah website

2. Membuat tampilan website menjadi lebih variatif

3. Membuat halaman menjadi lebih cepat dimuat

4. Mempermudah proses pemeliharaan

5. Membuat optimasi ke perangkat lain menjadi lebih mudah

Cara Kerja dari CSS

CSS akan bekerja dengan cara memisahkan kode-kode yang mengatur tentang visual website dan kode-kode yang mengatur tentang konten. Struktur dalam Bahasa Pemrograman ini cukup sederhana. Dalam CSS, aturan syntax nya tersusun dari sebuah selector dan declaration block. 

Di sini, Anda dapat memilih elemen yang mana yang diinginkan kemudian Anda dapat melakukan declaration terhadap elemen tersebut. Selector akan mengarahkan elemen dalam HTML yang ingin Anda percantik visualnya. Declaration block sendiri mengandung satu atau lebih declarations yang penulisannya dipisahkan oleh tanda titik koma (;).

Nah, setiap declarations memiliki sebuah property name dan value yang penulisannya dipisahkan oleh titik dua (:). Pada akhirnya declaration block ditutup dengan tanda kurung kurawal ({}).

Jenis-Jenis CSS

Menurut W3C, terdapat tiga jenis CSS yang diklasifikasikan berdasarkan penggunaannya yaitu

1. External Style Sheet CSS

External Style Sheet CSS adalah baris kode yang bisa langsung diletakkan di luar area object. CSS jenis ini dapat digunakan secara berulang pada beberapa objek sekaligus. External Style Sheet CSS juga dapat digunakan antar website, sehingga lebih menghemat ruang.

2. Inline Style Sheet CSS

Inline Style Sheet CSS adalah baris kode yang biasa diterapkan secara langsung pada objek yang ingin didesain ulang. Contohnya saat Anda ingin merubah sebuah text berwarna hitam menjadi berwarna kuning. 

Pengguna CSS jenis ini hanya perlu membubuhkan tag <style> sehingga sangat mudah dan menghemat waktu pengerjaan. 

3. Embedded Style Sheet CSS

Internal Style Sheet CSS adalah aturan CSS yang bisa ditempatkan dalam dokumen HTML menggunakan elemen style untuk memuat aturan. 

Cirinya hampir sama dengan Inline Style Sheet CSS, karena diletakkan pada halaman yang sama pada suatu website. Tag yang digunakan adalah < style > … </style> yang ditempatkan dalam tag <head> … </head>.