PENGERTIAN CSS

CSS adalah singkatan dari Cascading Style Sheet. Adalah standar pembuatan dan pemakaian style untuk dokumen terstruktur. CSS digunakan untuk mempersingkat penulisan tag HTML \ seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML maupun XHTML. Meskipun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk juga SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

Selector

Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang ada pada dokumen HTML:

p {

    ....

}

Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “{}”.

Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada bab.

Property

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah:

p {

    color: ...;

    font-size: ...;

}

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”). Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan diberikan pada bagian yang relevan. Daftar properti sendiri dapat dibaca di.

Value

Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti Photoshop). Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:

p {

    color: #FFFF00;

    font-size: 50px;

}

Sintaks CSS

Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut:

Sintaks CSS

Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut.

Penyingkatan Nilai dari Property

Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:

/*

    Bentuk Panjang

*/

p {

    margin-top    : 10px;

    margin-right  : 20px;

    margin-bottom : 10px;

    margin-left   : 20px;

}

/*

    Bentuk Singkat (1)

*/

p {

    margin: 10px 20px;

}

/*

    Bentuk Singkat (2)

*/

p {

    margin: 10px;

}

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value.

Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.

Mengimplementasikan CSS pada HTML

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu:

Referensi ke File Eksternal

Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.

Penulisan CSS pada Elemen Head

CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.

CSS di dalam Atribut style pada Elemen

Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser).

Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML:

<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Pengenalan HTML</title>

    <!-- Referensi pada Elemen Head -->

    <style type="text/css">

        h1 {

            color: red;

        }

    </style>

    <!-- Referensi pada file eksternal -->

    <link rel="stylesheet" href="style.css">

  </head>

  <body>

    <h1>Berita Utama</h1>

    <p>

        Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1).

        Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.

    </p>

    <!-- CSS langsung pada atribut style -->

    <p style="font-weight: bold;">

        Paragraf kedua.

    </p>

  </body>

</html>

Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus membuat file style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode berikut:

p {

    font-size: 50px;

}

Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css harus berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori “style”, kita dapat mengisikan style/style.css pada atribut href.

Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html dan lihat hasilnya, seperti pada gambar berikut:

Hasil Eksekusi referensi-css.html

Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit deklarasi kode. Gambar berikut menunjukkan perbandingan dokumen HTML yang memiliki CSS dan tidak memiliki CSS:

Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS

Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS. Teks pada elemen h1 berubah menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya paragraf kedua) dicetak tebal karena CSS yang berada di atribut style pada paragraf kedua. Ketiga CSS yang terpisah tersebut berjalan dengan baik.

Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file yang sama).

Keunggulan CSS

Sebelum kehadiran CSS, seorang webmaster harus bekerja ekstra keras menuliskan tag-tag HTML baik untuk mendesain layout ataupun untuk memberi gaya tampilan (style) pada bagian-bagian tertentu dari situ web yang akan dibuatnya. Pekerjaan ini tentu semakin berat apabila situs web tersebut terdiri dari puluhan atau bahkan ratusan halaman dengan tampilan yang berbeda-beda, karena setiap tampilan membutuhkan penulisan tag-tag yang secara mandiri unik. Untuk bagian-bagian dengan tampilan yang sama pun seorang webmaster harus direpotkan dengan penulisan tag-tag HTML secara berulang-ulang.
Hadirnya CSS, pekerjaan seorang webmaster menjadi jauh lebih ringan. CSS mampu menghindarkan pengulangan dalam penulisan tag HTML, sehingga ukuran file pun akan jauh lebih kecil. Dengan ukuran file yang kecil, proses loading situs web juga akan jauh lebih cepat.
Meskipun sebuah file CSS bisa diintegrasikan langsung dengan file HTML, namun umumnya file CSS dibuat secara terpisah, sehingga memungkinkan kita mendekorasi tampilan bagian-bagian tertentu dari halaman web secara serempak.
Inilah manfaat paling penting dari CSS! Mempelajari CSS bisa jadi bukan pekerjaan mudah. Namun, ada banyak keuntungan lain yang akan kita peroleh dengan menggunakan CSS ini, yaitu:

1. Update tampilan lebih mudah
Mengupdate tampilan situs web yang terdiri dari beberapa halaman saja tentu jauh lebih mudah daripada untuk situs dengan ratusan atau ribuan halaman. Dengan CSS, kita akan dapat mengupdate tampilan halaman-halaman web dalam jumlah banyak dengan mudah, karena semua tag untuk style ini berada pada satu file CSS saja.

2. Beban bandwidth lebih kecil
Dengan CSS, ukuran file web akan menjadi “langsing” karena tag-tag style dipisahkan secara mandiri. Hal ini secara signifikan akan berdampak pada proses loading yang lebih cepat. Selain itu, CSS hanya akan di-load satu kali oleh browser dan akan terus diterapkan pada halaman-halaman lain. Hal ini berbeda dengan situs yang menggunakan table karena harus di-load berulang-ulang.

3. Modifikasi web template lebih mudah
Cara paling cepat membangun situs web ialah dengan menggunakan template. Namun terkadang template tersebut tidak sesuai dengan keinginan dan keperluan kita. Dengan CSS, kita akan lebih mudah melakukan “vermak” pada template tersebut, misalnya mengganti warna latar atau mengubah jenis huruf.

4. Lebih mudah digunakan pada mobile phone
Sekarang, orang melakukan browsing tidak hanya melalui browser di PC, tetapi juga melalui mobile phone atau PDA. Situs web yang menggunakan CSS akan jauh lebih mudah digunakan oleh mereka yang browsing melalui gadget-gadget tersebut.

5. Seacrh engine friendly
Sebuah situs web yang dilayout dengan CSS akan lebih search engine friendly daripada situs-situs web yang menggunakan table sebagai pondasi layoutnya.

Kekurangan Penggunaan CSS
Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua browser.