Penulis
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.
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.
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.
Dan berikut dibawah ini adalah kode yang berada didalam dokumen HTML 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.
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.
<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 :
- Mengatur ketebalan font
- Warna, teks, background, dan beberapa elemen lainnya
- Text attributes. Seperti spasi antar kata, huruf dan baris
- Posisi teks, gambar, tabel dan beberapa elemen lainnya
- 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 :
- 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.
- Beberapa efek teks, seperti teks berbayang, kolom seperti koran dan word-wrap.
- 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
EmoticonEmoticon