Pengenalan CSS

Assalamu alaikum Wr. Wb

Salam Pinter Bareng Komputer, ...zero bit...

Selamat pagi semuanya!!! Semoga pagi kalian hari ini merupakan pagi yang luar biasa penuh kesyukuran dan juga semangat. Pagi ini saya ingin sharing mengenai CSS yang kepanjangannya adalah Cascading Style Sheet. 

Apa itu CSS ?

CSS merupakan syntaks yang dapat digunakan untuk mengatur style (format tampilan) elemen yang ditulis dalam bahasa Markup seperti HTML, sehingga dapat dipisahkan antara konten dan tampilan visualnya.

CSS dibuat oleh W3C (World Wide Web Consortium) pada tahun 1996, agar tampilan halaman - halaman HTML dapat diberikan format tampilan. Karena sebelumnya halaman HTML tidak dilengkapi dengan tags yang berfungsi untuk memformat halaman.

HTML dan CSS memiliki hubungan yang sangat erat. Karena HTML adalah bahasa markup (sebagai pondasi situs) dan CSS memperbaiki format tampilan dari halaman - halaman HTML, maka kedua bahasa pemrograman ini harus bisa berjalan bersama beriringan. Dengan adanya CSS maka sebuah situs website tidak terlihat seperti sebuah situs yang ‘telanjang’ tanpa adanya tampilan yang menarik.

Apa Keunggulan CSS?

Mungkin sebagian dari kalian ada yang bertanya, kelebihan CSS apa ya? Berikut ini saya akan menjelaskan keunggulan atau kelebihan dari CSS.

Sebelum dapat menggunakan CSS, semua format tampilan CSS harus disertakan ke dalam markup HTML. Itu berati Anda harus mendeskripsikan semua background, warna font, alignment, dan lain-lain secara terpisah.

Dengan sebuah file CSS yang telah kalian isi script lengkap, maka kalian dapat mengatur tampilan semua aspek pada file - file yang berbeda, lalu menentukan format tampilan untuk selanjutnya mengintegrasikan file CSS di atas markup HTML. Hasilnya, markup HTML bisa lebih mudah dimaintain.

Secara singkat dengan CSS, Kalian tidak perlu lagi mendeskripsikan format tampilan dari masing-masing elemen secara berulang-ulang. Anda tidak membuang-buang waktu, kode yang digunakan pun lebih singkat, dan error dapat diminimalisir. Dan karena pilihan kustomisasi yang disediakan CSS hampir tidak terbatas, maka dengan CSS memungkinkan kalian untuk menerapkan berbagai macam style/format tampilan pada satu halaman HTML semenarik mungkin.

Bagaimana Cara CSS Bekerja?

Bahasa yang digunakan di dalam CSS adalah bahasa Inggris basic berbasis syntax yang dilengkapi dengan sekumpulan rule yang mengaturnya. Seperti penjelasan di atas bahwa HTML tidak dibuat untuk menerapkan elemen style (format tampilan) jika adapun itu sangat - sangat sederhana (hanya markup halaman saja). Karena HTML dirancang hanya untuk mendeskripsikan konten.

Sebagai contoh: Tag Paragraf <p>Conten</p>, dirancang untuk menampilkan artikel yang dapat diformat seperti sebuah paragraf di dalam Microsoft Word. Seperti Format Perataan (Kiri, Tengah dan Kanan). Hanya sesederhana itu.

Kemudian muncul pertanyaan. Bagaimana caranya memberikan style (Format Tampilan) untuk  paragraf yang lebih komplek? Maka jawaban ini dapat dijawab dengan sintaks CSS. Struktur sintaks CSS memiliki SELECTOR dan DECLARATION BLOCK. Pilih elemen yang diinginkan, kemudian deklarasikan perintah CSS yang akan digunakan pada elemen tersebut.

SELECTOR mengarah ke elemen HTML yang ingin Anda ubah tampilannya.  Selector ini dapat juga berupa nama properti CLASS dari tag HTML ataupun nama properti ID dari tag HTML. DECLARATION BLOCK memuat satu atau lebih banyak deklarasi (declaration) yang dipisahkan dengan tanda titik koma.

Setiap deklarasi menyertakan NAME dan VALUE dari properti CSS yang dipisahkan dengan tanda koma. Umumnya deklarasi CSS diakhiri dengan tanda titik koma, sedangkan declaration block dikelilingi oleh tanda kurung kurawal.

Contoh Struktur Sintaks CSS :

Penjelasan :

Karena CSS bekerja secara hierarki (urut sesuai tingkatan), maka sasaran pemberian format tampilan dari script CSS di atas adalah untuk tag P yang berada di dalam tag H1 yang semuanya ada di dalam tag BODY. Format yang akan diterapkan adalah background-color (merubah warna latar belakang tulisan), color (merubah warna tulisan), text-align (mengatur perataan tulisan), font-family (memilih jenis font untuk tulisan), font-size (mengatur ukuran font tulisan). 

Semoga artikel ini bermanfaat.

Kembali ke menu CSS - Inline, Internal, dan External CSS