CSS - Cascading Style Sheet (Pengertian, Sejarah dan Struktur Dasar)

Sebagai seorang web developer pemula yang ingin belajar mendesain web, anda wajib mempelajari bahasa CSS. Selain mempelajari bahasa CSS, anda wajib terlebih dahulu mempelajari bahasa HTML. Kenapa wajib belajar HTML dulu? karena kedua bahasa ini memiliki keterikatan satu sama lain. Kita ibaratkan HTML sebagai kerangka dari situs dan CSS berfungsi untuk membuat tampilan situs menjadi lebih dinamis.

Pada kesempatan baik ini, penulis akan membahas:

Apa itu CSS?
Sejarah CSS
Struktur Dasar CSS

Apa itu CSS?

Cascading Style Sheet (CSS) merupakan bahasa style sheet untuk mengatur tampilan beberapa komponen dalam sebuah web baik itu web statis maupun web dinamis sehingga akan lebih terlihat menarik. Dari pengertian sebelumnya, dengan adanya CSS anda lebih mudah membuat tampilan halaman atau tata letak sebuah website yang sesuai dengan kebutuhan.

Sejarah CSS

Pada tahun 1994 dibawah naungan Tim Berners-Lee dan Robert Cailliau, Hakon Wium Lie seorang programmer asal Norwegia telah mengusulkan konsep Cascading Style Sheet (CSS). Pada tahun yang sama CSS pertama kali di implementasikan ke dalam web browser arena.

"Web browser arena merupakan salah satu web browser pertama untuk UNIX"

Pada tahun 1995 setelah bergabung dengan W3C (World Wide Web Consortium), Hakon Wium Lei bersama Bert Bos mulai mengembangkan spesifikasi CSS 1 dan CSS 2.

Pada tahun 1996 pengerjaan proyek CSS dibantu oleh Thomas Reardon seorang programmer dari Microsoft dan pada tahun yang sama pula CSS berhasil dipublikasikan.

Setelah CSS pertama kali dipublikasikan dan seiring dengan perkembangan web, CSS terus melakukan perubahan sehingga memiliki beberapa versi, yaitu CSS1, CSS 2 dan CSS 3. Adapun pembahasan dari versi-versi CSS sebagai berikut:

1. CSS 1

CSS versi pertama dikembangkan dengan tujuan untuk mengatur pemformatan tampilan dokumen pada HTML. Pemformatan tersebut berupa:

Font : untuk membuat teks menjadi tebal sekaligus mengatur ukuran teks
Position : menyesuaikan posisi teks, gambar, dan tabel
Color : merubah warna pada teks, tabel dan background
Padding : berfungsi mengatur ruang atau jarak di sekitar konten
Margin : untuk mengatur ruang atau jarak di luar elemen
Border : Batasan yang mengelilingi konten dan padding

2. CSS 2

CSS untuk versi kedua tidak jauh berbeda dengan versi pertama, karena seluruh attribut dari CSS 1 dimasukkan ke dalam CSS 2. Yang membedakan CSS 2 dan CSS 1, yaitu CSS 2 mendukung format dokumen agar bisa ditampilkan di printer sedangkan CSS 1 tidak bisa menampilkan hasil dokumen di printer. CSS 2 juga sudah ditetapkan menjadi standarisasi hingga saat ini oleh World Wide Web Consortium (W3C).

3. CSS 3

CSS 3 merupakan versi terbaru dari pengembangan versi kedua. CSS 3 juga mendukung pembuatan animasi teks dan gambar serta dapat mengkombinasi lebih dari 2 warna (RGB). Selain itu CSS 3 memiliki fitur baru yaitu border-radius, border-image, multiple background dan lainnya. Versi ketiga ini diharapkan dapat mempermudah desainer web dalam membuat web responsif.

Struktur Dasar CSS

Struktur dasar pada CSS memiliki 3 bagian, yaitu

Selektor (Selector) merupakan proses pemilihan elemen-elemen atau tag HTML yang akan diatur sedemikian rupa sesuai dengan kebutuhan.
Deklarasi (Declaration) merupakan tempat untuk meletakkan atribut-atribut CSS yang akan diberikan oleh selektor.
Properti (Property) merupakan atribut yang akan digunakan oleh selektor, sedangkan Value adalah nilai dari properti.

Contoh Penerapan Struktur Dasar CSS

p {
      font-size:12px;
      color:blue;
}

p sebagai selektor
Tanda {} sebagai deklarasi
font-size dan color sebagai properti sedangkan 12px dan blue adalah nilai dari properti

Jadi kode diatas dapat disimpulkan, kita memilih tag p untuk diubah tampilannya selanjutnya untuk mulai menuliskan atribut kita harus memberikan tanda { sebagai pembuka dari deklarasi kemudian semua teks pada tag p akan diubah ukurannya sebesar 12px, lalu teks tersebut akan diberikan warna biru (blue). Tidak sampai disitu saja, setiap selesai membuat properti dan value kita harus memberikan tanda ; di akhir, tanda tersebut berlaku jika kita membuat lebih dari satu properti dan value. jika sudah selesai menuliskan deklarasi, jangan lupa untuk mengakhiri dengan memberi tanda }.

Sampai disini dulu pembahasan singkat mengenai CSS, apabila masih bingung dengan pembahasan diatas penulis menyarankan untuk mencari referensi lain yang lebih lengkap atau bisa langsung kunjungi channel youtube Web Programming UNPAS, disana pembahasan lengkap dan mudah dimengerti.

Sekian dan Terima Kasih :)

Sumber Referensi :