Pernahkah anda mendengar atau membaca tentang istilah CSS? Ataukah anda baru ingin belajar CSS? CSS merupakan sesuatu yang sangat familiar untuk teman-teman Web Developer, terutama buat Web Designer (Front-End Designer). Pada artikel ini saya akan membahas mengenai CSS, tetapi sebelum membaca artikel ini lebih lanjut anda harus memahami HTML/XHTML terlebih dahulu.

Pengenalan CSS

  1. Apa itu CSS?

    CSS merupakan singkatan dari Cascading Style Sheet. CSS pada dasarnya berfungsi untuk mengatur bagaimana sebuah halaman web ditampilkan pada browser. Styling, adalah kata yang pantas untuk menggambarkan bagaimana CSS bekerja pada sebuah halaman web.

    CSS pertama kali direkomendasikan oleh W3C sejak pertengahan 1990-an. Pada waktu itu, W3C merekomendasikan CSS sebagai solusi menampilkan halaman web yang menggunakan HTML 4.0. Hingga hari ini, versi CSS yang masih digunakan adalah versi 2. Walaupun beberapa browser-browser terkemuka sudah mendukung beberapa syntax dari CSS 3 yang status-nya masih dalam pengembangan oleh CSS Working Group W3C (Tim Pengembangan CSS dari W3C).

  2. Kelebihan Menggunakan CSS

    Salah satu keunggulan CSS adalah kemampuannya dalam mendesain interface dari sebuah halaman web. Dengan CSS, unsur komunikasi dalam interface web bisa menjadi lebih efektif. Selain itu, jika file CSS anda terpisah dengan HTML (External Style Sheet, akan dibahas dibawah), hal itu bisa menghemat banyak waktu anda dalam membuat dan memelihara (maintenance) interface sebuah website.

    Secara umum, browser-browser terkemuka menerjemahkan CSS sesuai dengan rekomendasi dari W3C. Hanya saja hingga hari ini, ada beberapa browser terkemuka yang menerjemahkan beberapa syntax CSS sesuai dengan metode masing-masing. Hal tersebut merupakan tantangan dalam dunia Web.

Syntax CSS

Illustrasi Syntax CSS

Selector bisa dikatakan sebagai elemen HTML yang akan dimanipulasi dalam blok deklarasi. Deklarasi terdiri dari Property dan Value, dan dalam kumpulan dari banyak deklarasi kita sebut dengan Blok Deklarasi. Property adalah atribut-atribut style yang akan diberi nilai (Value).

Selector pada contoh diatas akan berdampak pada elemen <h1> pada file HTML anda. Selector boleh terdiri lebih dari 1 elemen HTML yang akan dimanipulasi. Pemahaman tentang Selector akan dibahas selanjutnya.

Penggunaan CSS

Pada bagian ini kita akan membahas metode mengimplementasikan CSS pada sebuah halaman HTML. Disini kita akan membahas tentang bagaimana implementasi dari Internal, External, Multiple Stylesheet, dan Inline Styles.

  1. Inline Styles

    Inline Styles adalah CSS yang terdapat dalam sebuah atribut HTML. Berikut contohnya :

  2. Internal Stylesheet

    Internal Stylesheet adalah CSS yang terdapat dalam sebuah file HTML. Jika Inline Styles berada dalam sebuah tag HTML, maka Internal Stylesheet berada dalam sebuah file HTML. Secara umum, Internal Stylesheet biasa ditempatkan pada bagian head dari dokumen HTML. Berikut contoh-nya:

  3. External Stylesheet

    External Stylesheet adalah CSS yang dibuat dalam sebuah file CSS (berekstensi *.css) yang nantinya akan dilink ke bagian <head> dari file HTML anda. Berikut contoh implementasi-nya :

  4. Multiple Stylesheet

    Menurut Google Translate, arti Multiple adalah beberapa, ganda, atau banyak. Jadi singkat-nya, Multiple Stylesheet adalah menggunakan banyak CSS, atau menggunakan beberapa metode implementasi dari CSS yang sebelumnya sudah dibahas. Berikut contohnya :

    Saya biasa memanfaatkan metode multiple stylesheet dengan memisahkan file-file CSS. File tersebut dipisah sesuai dengan fungsinya masing-masing, seperti umum (general.css), layout (layout.css), tipografi (typo.css), warna & background (color.css), dst. Kemudian membuat sebuah file CSS yang memanggil file-file tersebut dengan menggunakan perintah @import. Perintah @import sendiri berfungsi untuk memasukkan (impor) sebuah file CSS ke dalam skrip yang memanggil-nya dengan memanfaatkan nilai dari atribut URL. Berikut contoh implementasinya :

    Pada contoh diatas, pertama-tama saya membuat file general.css (untuk styling umum pada web), typo.css (untuk tipografi pada web), dan color.css (untuk warna-warna pada web). Kemudian memanggilnya kedalam file style_3.css menggunakan perintah @import. Setelah itu membuat link pada halaman HTML yang mengarah kepada file style_3.css.

Untuk dibagian pertama ini, jika anda belum mengetahui property-property yang saya gunakan di atas, berhentilah memikirkannya karena pada bagian kedua tulisan ini, saya akan membahas beberapa property yang sering digunakan dalam CSS.

Jika ada tanggapan, kritik, saran, maupun pertanyaan tentang artikel ini, silahkan meninggalkan komentar anda. Silahkan menginput email anda pada form di bawah ini untuk menerima update jurnal terbaru dari saya. :)

Spread the Word

  • terimakasih om nono, tutorialnya menarik bisa menambah ilmu saya di dunia web.
    mampir balik ke blog saya ya sob

    • sama-sama sob

      ilmu itu bukan untuk disimpan, tapi untuk dibagikan