Tuesday, July 11, 2017

Sejarah dan Perkembangan CSS Lengkap

Tahukah kamu apa yang dimaksud dengan CSS? Sebaiknya sebelum kamu membaca lebih lanjut artikel blog Pintar Sekolah kali ini kamu memahami terlebih dahulu dan mengenal CSS. Mengapa begitu? Saya rasa artikel kali ini lebih ditujukan kepada siswa yang menggemari dunia pemrograman seperti saya, karena sekarang kita akan mempelajari sejarah serta perkembangan CSS dari dulu hingga sekarang.


Sejarah dan Perkembangan CSS Lengkap Pintar Sekolah

CSS bisa dibilang saudara dari bahasa markup yang sangat populer, HTML. Karena jika kamu membuat sebuah dokumen HTML tanpa dilengkapi dengan style CSS ibaratkan sebuah kerangka yang tidak sempurna dan tidak memiliki tampilan luar.


Agar kalian lebih paham lagi, saya jelaskan secara singkat pengertian dan pengenalan CSS lebih mendalam pada artikel kali ini.
CSS adalah singkatan dari Cascading Style Sheet. Yaitu berupa dokumen yang bisa mengatur style sebuah halaman web atau dokumen lainnya dengan urutan perintah tertentu yang sudah ditentukan.
Biasanya, CSS digunakan untuk halaman web yang menggunakan HTML dan CSS. Dalam HTML, biasanya kita harus mengatur sebuah heading atau warna dari sebuah teks secara manual untuk seluruh halaman atau dokumen, tetapi dengan menggunakan CSS kita tinggal mengaturnya satu kali dan kita juga bisa memilih bagian HTML mana saja yang akan diberikan style.

Dengan menggunakan CSS, maka pekerjaan seorang programmer jauh lebih mudah dan bisa diselesaikan dengan cepat. Oleh karena kehebatannya itu lah hingga saat ini CSS sudah sangat populer dan digunakan hampir semua programmer dunia.

Saya rasa penjelasan diatas cukup jelas untuk mendeskripsikan apa yang dinamakan dengan CSS. Sekarang mari kita menuju inti bahasan dari artikel ini, yaitu sejarah dan perkembangan CSS dari dulu hingga sekarang.

Sejarah CSS


Pertama kali CSS muncul yaitu pada saat munculnya SGML (Standard Generalized Markup Language) pada tahun sekitar 1970. Sejak tahun tersebut, CSS mengalami berbagai macam perkembangan pesat dan style CSS yang sampai sekarang kita gunakan awalnya merupakan ide brilian seorang programmer bernama Hakon Wium Lie.

Pada bulan Oktober tahun 1994 di konferensi W3C yang berlokasi di Chicago, Illinois, ia menuangkan idenya pada proposal yang ia buat, yaitu mengenai Cascading HTML Style Sheet (CHSS).

Kemudian, tidak berselang lama setelah itu, ia bersama temannya yang bernama Bert Boss mengembangkan sebuah standar CSS.

Akhirnya, pada akhir tahun 1996 sebuah dokumen dan standar CSS resmi dibuat (dan pada bulan Desembernya CSS versi 1 sudah diciptakan).

Pengerjaan proyek ini juga didukung oleh seorang programmer dari perusahaan teknologi ternama, Microsoft. Programmer tersebut bernama Thomas Reardon.

Lalu, CSS digunakan baik oleh penulis maupun pembaca untuk mengubah berbagai macam asepk tampilan sebuah dokumen, seperti tata letak, warna teks, atau bagaimana sebuah elemen ditampilkan pada web browser.
Baca Juga
Selain itu, CSS juga digunakan untuk pemisahan dokumen yang ditulis dengan bahasa HTML atau bahasa markup lainnya dengan isi dokumen presentasi yang berisi dokumen CSS itu sendiri.

Pemisahan isi dokumen seperti ini bisa meningkatkan aksesibilitas penggunaan dan mengurangi kompleksitas serta pengulangan pada struktur isinya. Dan dengan begini, programmer jadi lebih leluasa lagi untuk mengontrol dokumennya apakah kerangka atau sisi tampilan yang akan diatur.

CSS juga bisa menampilkan sebuah dokumen atau halaman yang sama dengan tampilan serta metode presentasi yang berbeda, seperti tampilan dari layar, atau tampilan untuk dokumen yang akan dicetak dan masih banyak lagi yang lainnya.

Halaman HTML atau XML yang sama juga bisa ditampilkan dengan cara yang berbeda pada web browser, baik dari segi warna maupun skema hanya dengan menggunakan CSS.

Hingga sekarang, CSS sudah berkembang dan semakin memudahkan para desainer web untuk mendesain situs seperti apa yang mereka inginkan.

Jenis atau Cara Pemasangan CSS Dalam Dokumen HTML


Untuk pemasangannya pada sebuah dokumen HTML, CSS mempunyai 3 cara.

1. Internal Style Sheet

Cara yang pertama adalah dengan cara memasang CSS menyatu didalam satu file yang sama dengan HTML nya. Contohnya adalah seperti ini.


<HTML>
<head>
<title>Internal CSS</title>
<style type="text/css">
h1 {
</head>
color: blue;
}
</style>
 <h1>Ini contoh CSS dengan cara pemasangan Internal</h1>
<body>
</body>
</HTML>



2. Eksternal Style Sheet

Cara yang kedua adalah dengan cara membuat dokumen yang brbeda untuk CSS dan HTML nya sehingga CSS tidak berada didalam dokumen yang sama dengan HTML. Untuk menggabungkan CSS nya, menggunakan tag link seperti dibawah ini.


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

"Lokasi.css" pada tag diatas diganti dengan lokasi dari file CSS yang dimaksud, sementara dibawah ini adalah kode yang berada didalam dokumen CSS nya.


h1 {
color: blue;
}


Dan berikut dibawah ini adalah kode yang berada didalam dokumen HTML nya.


<HTML>
<head>
<title>Eksternal CSS</title>
<link rel="stylesheet" type="text/css" href="lokasi.css">
</head>
<body>
</body>
<h1>Ini contoh CSS dengan cara pemasangan Eksternal</h1>
</HTML>



3. Inline Style Sheet

Dan cara terakhir dalam pemasangan kode CSS untuk dokumen HTML adalah Inline CSS. Inline CSS ini menggunakan cara pemasangan CSS yang disatukan dalam tag HTML nya atau satu baris dengan HTML. Untuk lebih jelasnya berikut contoh penggunaan cara inline CSS.


<HTML>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: blue;">Ini contoh CSS dengan cara pemasangan Inline</h1>
</body>
</HTML>


Nah itulah 3 cara atau jenis pemasangan CSS dalam dokumen HTML. Kamu lebih suka menggunakan yang mana? Kalau saya sendiri lebih merekomendasikan cara ekstenal. Mengapa begitu? Karena jika kamu menggunakan CSS internal untuk dokumen halaman web yang cukup panjang kodenya dan rumit, maka bisa saja kamu tidak bisa berkontrasi dengan kode CSS nya karena berada dalam satu file yang sama.

Apalagi jika menggunakan CSS inline, karena penulisan CSS dan HTML yang berbeda bisa saja kamu lupa tidak memberikan semicolon pada CSS inline kamu sehingga codingan kamu akhirnya berantakan.

Dengan menggunakan CSS eksternal maka tentunya kamu bisa lebih leluasa mengontrol dokumen HTML dan CSS kamu yang terpisah. Ini juga sangat bermanfaat pada saat kamu mengerjakan proyek untuk membuat sebuah halaman web. Karena saya juga sudah pernah mengalaminya.

Lalu, untuk apa ada CSS internal dan inline? CSS internal dan inline digunakan untuk sebuah dokumen HTML yang cukup singkat sehingga tidak memerlukan CSS yang terlalu banyak. Dengan begini kamu tidak memerlukan file-file yang lain dan bisa menghemat ruang penyimpanan pada laptop atau komputer kamu juga.

Tapi, semua kembali pada pribadi masing-masing lebih suka untuk menggunakan CSS yang mana.

Perkembangan CSS


Sejarah singkat bagaimana CSS dibuat sudah dijelaskan pada bagian awal artikel ini dan diatas sudah saya jelaskan secara rinci tentang cara-cara atau jenis-jenis pemasangan kode CSS dalam dokumen HTML. Sekarang, saatnya kita mempelajari tentang perkembangan CSS.

Saya rasa kamu pasti sudah mengetahui bahwa sampai saat ini CSS sudah sampai versi ke 3 dan dengan CSS 3 ini kita jadi bisa membuat berbagai macam animasi unik. Namun, tahukah kamu bagaiamana perkembangannya sejak CSS versi 1 dibuat? Berikut penjelasan lengkapnya.

1. CSS versi 1


Pada tanggal 17 Agustus tahun 1996, organisasi atau lembaga pembuat HTML internasional, World Wide Web Consortium atau yang biasa disingkat dengan sebutan W3C menetapkan CSS sebagai bahasa pemrograman standar dalam pembuatan website.

Hal ini dilakukan bukan tanpa alasan, melainkan untuk menghentikan pembuatan tag-tag baru oleh Netscape dan Internet Explorer. Pasalnya, dulu kedua browser ini saling bersaing mengembangkan tag-tag sendiri untuk mengatur tampilan web.

Karena masih baru dalam pembuatannya, fitur-fitur yang ada di CSS pertama ini juga masih sangat terbatas, diantaranya seperti :

  1. Mengatur ketebalan font
  2. Warna, teks, background, dan beberapa elemen lainnya
  3. Text attributes. Seperti spasi antar kata, huruf dan baris
  4. Posisi teks, gambar, tabel dan beberapa elemen lainnya
  5. Margin, border dan padding

2. CSS versi 2


Setelah standar CSS pertama dibuat, W3C akhirnya kembali merilis CSS versi selanjutnya, yaitu versi 2. Hingga saat ini CSS versi 2 sudah menjadi standar sejak tahun 1998 yang lalu.

Semua atribut yang terdapa pada versi CSS sebelumnya dimasukkan dan dikembangan lagi dengan penekanan pada International Accessibiality and Capacibilty, khususnya media spesific CSS.

CSS 2 sendiri dikembangan dengan tujuan untuk memenuhi kebutuhan agar dokumen bisa ditampilkan di printer atau pada saat setelah dicetak.

3. CSS versi 3


CSS versi 3 adalah versi terbaru dari CSS. Versi ini memberikan berbagai macam kelebihan dan sudah mengatasi serta memenuhi berbagai macam kebutuhan sebuah website.

Selain itu juga terdapat beberapa fitur baru yang sangat menarik seperti animasi warna dan animasi 3D yang bisa digunakan oleh desainer web. Dan juga ada desain kompatibilitas untuk smartphone dengan menggunakan fitur media query.

Sementara fitur-fitur baru yang terdapat pada CSS 3 antara lain  Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru dari CSS 3 :

  1. Animasi. Dengan adanya CSS 3 seorang desainer web bisa dengan mudah membuat sebuah animasi hanya dengan CSS dan tidak membutuhkan campur tangan software pihak ketiga seperti Adobe Flash dan Microsoft Silverlight.
  2. Beberapa efek teks, seperti teks berbayang, kolom seperti koran dan word-wrap.
  3. Beberapa efek pada elemen. Seperti transformasi 2 dimensi dan 3 dimensi, sudut-sudut yang tumpul dan bayangan.

Kelebihan dan Kekurangan CSS


Sama seperti hasil pemanfaatan teknologi lainnya, CSS juga memiliki kelebihan dan kekurangannya tersendiri. Sebagai bonu karena kamu telah mengunjungi artikel blog Pintar Sekolah ini, saya akan memberikan beberapa penjelasan singkat seputar kelebihan dan kekurangan CSS.

Kelebihan CSS


  • Mudah dipelajari dan digunakan
  • CSS memisahkan antara desain dengan konten sebuah web
  • Pengaturan desain yang bisa dilakukan dengan seefisien mungkin
  • Satu kode CSS bisa dipakai untuk beberapa kode, jadi mengurangi dan menghemat tempat dan waktu
  • Mempersingkat waktu pada saat membuat web
  • Jika kamu menggunakan CSS eksternal maka ukuran file HTML nya menjadi lebih kecil

Kekurangan CSS


  • CSS bisa memperlambat kecepatan suatu website karena kadang beberapa attribut atau syntax tidak bias dimuat oleh beberapa web browser
  • Desain CSS yang sudah terlihat rapih pada satu browser belum tentu terlihat sama pada web browser lainnya

Kekurangan-kekurangan CSS diatas bisa diatasi dengan CSS hack dan vendor prefix.

Cukup singkat bukan penjelasan sejarah dan perkembangan CSS dari dulu sampai sekarang? Mungkin pada artikel selanjutnya tentang dunia pemrograman, saya akan menulis artikel seputar attribut-attribut yang ada di CSS.

Nantikan artikel menarik lainnya tentang Teknologi Informasi hanya di blog Pintar Sekolah. Mohon dikoreksi jika ada yang salah dan jangan lupa bagikan ke teman-teman kamu.

Seorang siswa dari XI RPL 1 dan bersekolah di SMKN 1 Karawang. Hobi menulis dan sangat menggemari dunia web development, internet dan desain.

16 komentar

perkembangannya begitu cepat ya... belum 1 persen kita pelajari dan gunakan sudah keluar versi terbaru... saya teringat halnya HTML... hingga HTML5... belum lagi HTML5 merata digunakan sekarang malah sudah keluar AMP HTML besutan Google...

Untuk pembelajaran secara detail dan gampang dipahami apakah ada di website ini?
karena kata pepatah jangan cuma baca teori, praktek itu yang terpenting

Ane sambil blajar bos..
Tdny css Buat apaan gtu..
Jd tau ane..

Mantap sekali sob artikelnya, pada dasarnya perkembangan css sudah melampoi dari filosofinya sendiri yang pada dasarnya mempercantik web sekarang udah bisa meanimasikan web sendiri

Betul sekali mas. Mengingat bahwa kita semua juga belum sepenuhnya bisa mempelajari CSS 2 sekarang sudah ada versi CSS 3 yang lebih keren lagi :D

Insha Allah untuk tutorial lebih dalam dan mendetailnya akan dibuat kan juga oleh blog Pintar Sekolah, tunggu saja ya gan (o)

Semoga bermanfaat gan, nantikan juga artikel selanjutnya tentang pemrograman web seperti HTML dan CSS hanya di blog Pintar Sekolah ini ya :D

Betul sekali sob :D selain itu animasi dan fitur keren lainnya juga masih banyak dan tersedia di CSS 3

semoga cepat2 muncul css versi 4, biar dunia blogger ini lebih berwarna lagi

Waduh saya CSS 3 aja masih belum bisa semua gan :D

Kalo html sih ane lumayan faham, css nya itu yang kaga faham

Cepat sekali emang gan perkembangan css disaat kita masih belajar diluar sana sudah muncul inovasi-invovasi baru seputar bahasa pemrograman.

Jika masih belum paham CSS, silahkan tunggu saja update terbaru tentang pemrograman web termasuk CSS di blog Pintar Sekolah ini, nanti pasti akan dibuatkan tutorialnya satu per satu :D

Betul sekali gan, semoga kita juga semakin berkembang pemaham dan kemampuan dalam bidang CSS nya ya :D

Wah,CSS udah tua ternyata ya,hehe.Artikel yg menambahkan ilmu bagi saya.Jadi, pengin memperdalam materi CCS :D

Betul gan hehe, Kamu juga bisa belajar mengenai materi CSS di blog Pintar Sekolah, tutorialnya nanti dibuatin satu per satu :D

Silahkan berkomentar atau berpendapat melalui form dibawah. Berkomentarlah sesuai dengan isi artikel, link tidak akan ditampilkan, dan komentar yang mengandung unsur SARA tidak diperkenankan.
Jadilah orang yang bijak dan bisa menghargai orang lain
EmoticonEmoticon