Pada bagian sebelumnya, saya sudah membahas sedikit pengantar tentang CSS seperti Definisi, Syntax, hingga Implementasi dari CSS. Di bagian kedua ini saya akan membahas sedikit lebih mendalam tentang CSS. Harapan saya adalah anda akan mengetahui tentang Selector, Property, Value, beserta contoh-contoh penggunaannya setelah membaca bagian kedua ini.

Selector, Property, dan Value

Pada bagian sebelumnya, saya sudah menjelaskan tentang Syntax Dasar CSS. Dimana terdapat istilah Selector, Property, dan Value. Pada bagian ini saya akan mencoba membahas secara umum mengenai Selector, Property, dan Value.

  1. ID dan Class

    Pada dasarnya ID dan Class merupakan Selector tambahan agar seorang Web Desainer dapat memberi penamaan khusus pada sebuah elemen HTML-nya (atribut ID dan Class pada HTML). ID pada CSS didefinisikan dengan tanda pagar #, sedangkan Class dengan tanda titik .. Penamaan ID harus unik dan tidak diawali dengan angka, karena ID bertujuan untuk memanipulasi hanya satu elemen dari sebuah halaman HTML. Jika anda ingin memanipulasi banyak elemen dengan menggunakan satu selector, maka gunakan Class. Berikut contoh penggunaannya :

    Pada contoh diatas saya mencoba membuat contoh ID yang unik, yaitu pada Elemen h1 dan h2. Dan penamaan Class yang jelas, sesuai dengan efeknya pada elemen HTML. Pada contoh diatas kita juga bisa melihat bahwa dalam satu elemen HTML dapat diberi lebih dari satu Class, lihat tag h2 dengan ID post-2.

  2. Selector Turunan (Descendant Selectors)

    Descendant Selector adalah selector yang memanfaatkan elemen diatasnya (parent) untuk dimanipulasi kemudian. Contoh, terdapat sebuah file HTML yang skripnya sebagai berikut :

    Kemudian CSS-nya adalah sebagai berikut :

    Pada contoh di atas, warna teks dari elemen em yang berada didalam h1 diset menjadi warna merah, karena styling umum warna teks untuk elemen em diset menjadi warna merah. Dan begitu juga dengan elemen di atasnya (h1) yang telah diset menjadi warna merah.

    Nah sekarang kita mencoba membuat teks dari elemen em menjadi warna biru, tentunya dengan menggunakan Descendant Selector. Berikut skrip tambahan CSSnya :

    Baru saja kita berhasil memanipulasi elemen em memanfaatkan metode descendant selector. Salah satu kemudahan dari descendant selector adalah, kita dapat memanfaatkan elemen yang berada diatasnya (parent element) untuk memanipulasi sebuah elemen.

  3. Pseudo-classes dan Pseudo-elements

    Pseudo? Saya juga kurang memahami kenapa dinamakan Pseudo. Pada dasarnya, Pseudo-classes dan Pseudo-elements merupakan selector yang berfungsi menangani elemen-elemen khusus seperti huruf pertama, baris pertama, dan lain-lain. Pada bagian ini saya tidak akan membahas seluruh dari Pseudo-classes dan Pseudo-elements, hanya beberapa saja yang umum digunakan. Berikut daftar dari pseudo class dan pseudo elements, dan sedikit penjelasan tentunya :

    1. :link

      Pseudo classes ini berfungsi untuk memanipulasi link (tag a) yang belum dikunjungi (default).

    2. :visited

      Pseudo classes ini berfungsi untuk memanipulasi link (tag a) yang sudah dikunjungi.

    3. :hover

      Pseudo-classes ini berfungsi untuk memanipulasi link (atau elemen lainnya) yang sedang berada dibawah pointer mouse (hover).

    4. :active

      Pseudo-classes ini berfungsi untuk memanipulasi link (atau elemen lainnya) yang sedang diaktifkan oleh user. Contohnya seperti jeda ketika user menekan mouse pada link kemudian melepasnya beberapa saat kemudian.

    5. :first-line

      Pseudo-elements ini berfungsi untuk memanipulasi sekumpulan teks yang berada di baris pertama dalam sebuah elemen. Contohnya seperti pada baris pertama dari sebuah paragrap.

    6. :first-letter

      Sama dengan pseudo-element :first-line. Perbedaannya, pseudo-element :first-letter memanipulasi huruf pertama dari sebuah elemen.

    Contoh berikut ini merupakan contoh implementasi dari Pseudo-classes dan Pseudo-elements :

    Yang perlu diperhatikan disini adalah elemen a. Lihat perubahan yang terjadi ketika nge-klik, hover, dan mengunjungi salah satu link yang terdapat dalam skrip.

  4. Satuan CSS

    Seperti pada contoh-contoh sebelumnya, banyak contoh yang menggunakan satuan ukuran sebagai Value dari Property. Seperti padding, font-size, line-height, dan sebagainya.

    CSS mendukung beberapa satuan seperti Pixel (px), Em (em), Points (pt), Inches/Inci (in), Persen(%) dan lain-lain. Satuan Pixel, Points, Inches/Inci adalah satuan absolut yang berarti mempunyai ukuran yang tetap. Sedangkan satuan Em (em) dan Persen (%) merupakan satuan relatif yang berarti dinamis, atau menyesuaikan dengan konfigurasi dari Browser milik user. Em (em) menggunakan satuan ukuran font default dari browser, sedangkan Persen menggunakan skala dari resolusi monitor.

  5. CSS Shorthand

    CSS Shorthand adalah perintah pendek dari beberapa property CSS yang mempunyai fungsi yang sama. Seperti margin yang merupakan Shorthand dari margin-top, margin-right, margin-bottom, margin-left. Sebagai contoh, kedua contoh CSS dibawah ini adalah sama. Yang membedakan hanyalah bagian Shorthand-nya.

    Informasi selengkapnya mengenai CSS Shorthand, silahkan baca bagian berikutnya, yaitu tentang Property dan Value.

  6. Property dan Value

    Di bawah ini saya membuat tabel Property serta Value-nya masing-masing yang bisa anda download. Tabel ini saya ambil dari Spesifikasi CSS W3C. Saya hanya memasukkan property bersifat umum (sering digunakan) pada tabel ini, jika anda ingin melihat tabel selengkapnya silahkan lihat Spesifikasi CSS dari W3C.

      Tabel Property CSS

Contoh Penggunaan CSS

Setelah mempelajari sedikit teori dari Selector, Property, dan Value pada CSS, pada bagian ini saya akan mencoba memberikan beberapa contoh penggunaan CSS dalam website.

  1. Warna, dan Background

  2. Font dan Text.

  3. List

  4. Link

  5. Width, Height, dan Border

Petunjuk Latihan

Berikut ini saya akan memberi kan beberapa tips atau petunjuk dalam pembelajaran anda di CSS. Berikut petunjuk-nya :

  1. XHTML, kemudian CSS

    Biasakan membuat markup XHTML terlebih dahulu, supaya anda mendapatkan bayangan tentang bagaimana syntax CSS anda nantinya. Tambahan, untuk penamaan ID dan Class silahkan lihat artikel Belajar XHTML saya sebelumnya.

  2. Gunakan Firebug, dan Google Translate

    Pada artikel Belajar XHTML saya menyarankan anda untuk menggunakan browser Mozilla Firefox dalam belajar XHTML & CSS, karena browser tersebut mempunyai banyak addons yang sangat membantu anda sebagai Web Desainer. Firebug adalah salah satu addons-wajib-install buat anda sekalian. Cara menggunakannya cukup mudah, cukup klik kanan pada elemen yang anda ingin periksa kemudian klik Inspect Element. Untuk men-download Firebug, silahkan search Firebug di Addons Manager pada Mozilla Firefox atau kunjungi situs Firebug untuk informasi lebih lanjut.

    Gunakan juga Google Translate untuk mempermudah anda dalam menerjemahkan daftar Property. Ini sangat berguna bagi teman-teman yang mempunyai bahasa Inggris yang FALS seperti saya :). Karena pada dasarnya sebagian besar dari Property CSS bertindak sesuai dengan namanya masing-masing.

  3. Gunakan CSS Cheat Sheet

    CSS Cheat Sheet boleh diartikan sebagai file rangkuman mengenai CSS yang sangat membantu kita dalam membangun sebuah website. Silahkan mencari Cheat Sheet menggunakan google dengan menggunakan kata kunci CSS Cheat Sheet. Dibawah ini saya menyertakan beberapa CSS Cheat Sheet yang bisa anda gunakan, berikut daftarnya :

    1. CSS Cheat Sheet oleh pxleyes.com
    2. CSS Cheat Sheet oleh gosquared.com
    3. CSS Cheat Sheet oleh addedbytes.com
    4. CSS Cheat Sheet oleh about.com
    5. CSS Cheat Sheet oleh lesliefranke.com
  4. Explore

    Explorasi! Perbanyak latihan dan eksperimen akan membuat anda mengetahui CSS dan seluk beluknya. Ingat, sebelum berlari, berjalan lah terlebih dahulu. Mulailah dengan perlahan-lahan, dan hargailah proses menjadi kuncinya.

  5. Siapkan diri untuk CSS 3

    Saat ini Tim Kerja CSS W3C sedang mengembangkan CSS 3. Saya sendiri belum mengetahui informasi kapan CSS 3 dirilis tapi saat ini beberapa browser terkemuka sudah mendukung beberapa Property CSS 3. Jadi siapkan dirimu, Indonesia!!!!

Kesimpulan

Pada 2 postingan tentang Belajar CSS ini anda sudah mengetahui sedikit tentang CSS, mulai dari pengenalan CSS hingga bagaimana mengimplementasikannya dalam pembangunan website.

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

  • yudi

    postingannya bagus banget, pembahasannya detail..mantabb
    request mas,kalo ada posting desaign layout dengan css…..
    makasih.

    • Terima kasih mas yudi :)

      Untuk pembahasan masalah layout saya pasti akan menulisnya tapi saya tidak janji akan selesai pada bulan ini karena saat ini saya lagi diluar kota.

      Tapi saya janji akan nulis tentang Layout dengan CSS

      Terima kasih atas atensinya sob :D

      • yudi

        mas Novri numpang tanya dong..
        saya bingung dengan css yang saya buat ketika dicoba pada IE kok hasilnya hancur mas,mohon pencerahannya mas..
        makasih tanggapan sebelumnya.

        • ya memang seperti itu mas, terutama jika anda testing menggunakan IE 6
          IE 6 dan 7 memang nge-render CSS dengan cara mereka sendiri (bahkan sampai IE 9). Yang harus kita pelajari adalah Box Modelnya. Karna IE memiliki metode render sendiri dengan Box Model. Coba searching di Gugel dengan keyword IE BOX MODEL

          Saya sendiri menolak penggunaan IE di blog ini, coba saja kunjungi blog ini dengan menggunakan IE
          Yah bgitu lah cara saya untuk menolak IE, sembari belajar bagaimana cara membuat layout yang Cross-browser :)

  • yudi

    makasih banyak mas saranya, bermanfaat sekali buat pemula seperti saya….
    sukses trus buat novrian.info

    • Terima kasih banyak mas
      Sukses juga buat mas yudi dan teman-teman :)