Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan
seragam. CSS bukan merupakan bahasa pemograman.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word
yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext,
footer, images, dan style lainnya untuk dapat digunakan bersama-sama
dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat
tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
Sejarah singkat CSS
Pada tanggal 17 Agustus 1996, World Wide Web Consortium (W3C) menjadikan
CSS sebagai bahasa pemrograman standart dalam pembuatan dokumen web.
Tujuannya adalah mengurangi pembuatan tag-tag baru oleh Netscape dan
Internet Explorer, karena kedua kedua browser pada saat itu bersaing
mengembangkan TAG sendiri untuk mengatur tampilan web.
CSS level 1 mendukung pengaturan tampilan dalam hal :
1. Font (jenis, ketebalan)
2. Warna, teks, backgrounf dan elemen lainnya
3. Text attributes, misalnya spasi antar baris, kata dan huruf
4. Posisi teks, gambar, table dan elemen lainnya
5. Marjin, border dan padding.
Selanjutnya di tahun 1998, W3c menyempurnakan CSS awal dengan
menciptakan standar CSS2 (CSS level 2) yang menjadi standar hingga saat
ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta
diperluas dengan penekanan pada Internasional accessibility and
capability khususnya media-specific CSS.
Bahkan pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS2
ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi
pada beberapa topik atau modul.
Perkembangan CSS
1. CSS1
Dikembangkan berpusat pada pemformatan dokumen HTML.
2. CSS2
Dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa
ditampilkan di printer. CSS2 mendukung penentuan posisi konten,
downloadable, huruf (font), tampilan pada tabel (table layout) dan media
tipe untuk printer. Kehadiran versi CSS yang kedua diharapkan lebih
baik dari versi pertama.
3. CSS3
Adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam
desain website. melakukan animasi pada halaman website, diantaranya
animasi warna hingga animasi 3D. Dengan CSS3 desainer lebih dimudahkan
dalam hal kompatibilitas websitenya pada smartphone dengan dukungan
fitur baru yakni @media query. Selain itu, banyak fitur baru pada CSS3
seperti: multiple background, border-radius, drop-shadow, border-image,
CSS Math, dan CSS Object
terdapat 3 metode penulisan CSS :
- Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara
penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML
tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan
tidak akan memengaruhi tag HTML yang lain.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Inline Style CSS</title>
</head>
<body>
<h2 style="background-color:black; color:white" >
Text ini akan bewarna putih dan background warna hitam
</h2>
</body>
</html>
Dalam kode diatas, terdapat sisipan atribut style pada tag <h2>,
nilai dari atribut style ini adalah kode CSS yang ingin diterapkan.
- Internal Style Sheet
Metode Internal Style Sheets, atau disebut juga Embedded Style Sheets
digunakan untuk memisahkan kode CSS dari tag HTML namun tetap dalam satu
halaman HTML. Atribut style yang sebelumnya berada di dalam tag,
dikumpulkan pada pada sebuah tag <style>. Tag style ini harus
berada pada bagian <head> dari halaman HTML.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Bentuk Embedded</title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format
dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi
0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan
juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan
warna background biru</p>
</body>
</html>
- External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css.
Untuk memanggilnya menggunakan script html yang disisipkan antara tag
head sebagai berikut:
<link rel="stylesheet" type="text/css" href="ditektori/filecss.css" />
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana
Anda menempatkan file cssnya. Penggunaan sistem embeding css ini sangat
disarankan karena memang banyak kelebihan yaitu mudah untuk melakukan
pengeditan, mengatur semantik dan praktis terkumpul dari satu file.
Kelebihan penggunaan CSS :
1. halaman web menjadi tidak padat, hingga halaman web menjadi SEO friendly
2. anda dapat dengan mudah mengganti tampilan web dengan cukup mengganti nilai dan definisi pada pada satu file CSS saja.
Kekurangannya penggunaan CSS :
sayangnya susah untuk dimengerti dibandingkan dengan bahasa pemrograman
lainnya contohnya: HTML, PHP, Java Script, dan lain-lain dan CSS ini
memerlukan waktu yang sangatlah lama untuk bisa mahir untuk mempelajari
CSS ini.
Sumber :
http://id.wikipedia.org/wiki/Cascading_Style_Sheets
http://lindamawa2.wordpress.com/2013/11/18/sejarah-dan-perkembangan-css/
http://www.coretansaya.web.id/2013/07/sejarah-css-dan-perkembangannya.html
http://www.duniailkom.com/tutorial-belajar-css-cara-menginput-kode-css-ke-halaman-html/
http://bptik.unnes.ac.id/artikel/perkenalan-dasar-tentang-css/
