Estimasi Waktu Baca: 8 menit
Daftar Isi

Pemanasan β˜•

Apa itu CSS? 🀨
   Sejarah CSS ⏳
   Varian Versi CSS 🎨
   Kenapa CSS Diciptakan? 🀷
   
CSS Bisa Apa? 🀷
   Bagaimana Bila Tidak Pakai CSS? 🀨

Anatomi CSS πŸ“„
   Selektor πŸ“Œ 
   Blok Deklarasi πŸ“‘
   Properti dan Nilainya πŸ’Ό

Penerapan CSS πŸ’»
   Menulis Kode CSS untuk Dokumen HTML πŸ“
   Menghubungkan File CSS dengan File HTML πŸ”—
   Menampilkan Hasil Kode CSS πŸ“Ί

Tips Belajar CSS πŸ’‘
   Gunakan Cheat Sheet πŸ“ƒ
   Gunakan Inspect Elemen πŸ”§

Kesimpulan πŸ“‹
Penutup πŸšͺ
Referensi πŸ“š

Pemanasan β˜•

Pada materi pembuatan website, bahasa pertama yang dipelajari adalah HTML. Setelah HTML tuntas, selanjutnya kita akan disarankan untuk mempelajari bahasa lain yaitu CSS.

Bila HTML merupakan sebuah pondasi atau kerangka untuk membuat website, lain halnya dengan CSS yang digunakan untuk memperindah pondasi tersebut.

Yups benar, CSS diperuntukkan untuk membuat atau mendesain tampilan (interface) pada website, maka dari itu sangat wajib bagi kita para pemula untuk mempelajarinya.

Sudah tidak sabar? Mari kita lanjutkan!

Apa itu CSS? 🀨

Menurut World Wide Web Consortium (W3C) dalam situs resminya w3.org:

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.

WORLD WIDE WEB CONSORTIUM (W3C)

CSS merupakan kepanjangan dari Cascading Style Sheet. CSS adalah bahasa yang digunakan untuk membuat dan mengatur tampilan website agar terlihat lebih cantik dan menarik.

CSS kurang tepat jika disebut bahasa pemrograman, ia juga kurang tepat jika disebut bahasa markah (markup) seperti halnya HTML. CSS lebih tepat disebut bahasa style sheet. Maksudnya, dengan menggunakan CSS kita dapat menentukan dan mengatur gaya (style) untuk setiap elemen bahasa markup (dokumen HTML).

Sejarah CSS ⏳

CSS pertama kali diperkenalkan oleh seseorang berkebangsaan Norwegia bernama HΓ₯kon Wium Lie pada tanggal 10 Oktober 1994 melalui proposalnya mengenai Cascading HTML Style Sheet (CHSS) dalam konferensi W3C di Chicago, Illinois. Dimana pada waktu yang sama Lie juga sedang bekerja bersama dengan bapak HTML yaitu Tim Berners Lee di CERN.

Setelah itu, berselang sekitar dua tahun akhirnya pada tanggal 17 Desember 1996 CSS1 resmi dirilis ke publik. Dalam mengembangkan CSS Lie tidak sendiri, Ia bekerja sama dengan seorang temannya bernama Bert Bos.

Varian Versi CSS 🎨

Tercatat ada beberapa varian versi (beberapa sumber menyebutnya level) CSS semenjak CSS diciptakan hingga sekarang, varian versi tersebut antara lain:

CSS 1 – 17 Desember 1996

Merupakan versi pertama CSS, pada versi ini salah satu programmer dari Microsoft bernama Thomas Reardon ikut bergabung dalam projek.

CSS 2 – Mei 1998

Merupakan versi lanjutan dari sebelumnya yang mana pada versi ini terdapat beberapa perubahan oleh W3C di tahun 1998. Perubahan ini mengenai format dokumen yang dapat ditampilkan di printer. Lebih detailnya lagi CSS 2 menyertakan kemampuan baru seperti berikut:

  • positioning
    • absolute
    • relative
    • fixed
  • z-index
  • konsep tipe media
  • teks dua arah (bidirectional text)
  • properti font baru seperti shadow

Pada versi ini pula terdapat yang namanya versi CSS 2.1 yang berarti CSS Level 2 Revision 1. Versi revisi tersebut dirilis pada 7 Juni 2011.

CSS 3 – 2012

Versi ini adalah versi yang saat ini banyak digunakan oleh para pengembang dan programmer website. Beberapa fitur ditambahkan dalam versi ini, salah satunya adalah fitur yang memungkinkan kita untuk membuat efek animasi tanpa harus menggunakan aplikasi semacam Adobe Flash Player.

Kenapa CSS Diciptakan? 🀷

Alasan kenapa diciptakannya CSS adalah agar dapat memisahkan antara kode style dengan dokumen HTML. Dengan begitu dokumen HTML hanya berisi konten saja dan dokumen CSS hanya berisi kode style yang nantinya dapat disematkan pada banyak dokumen HTML sehingga memungkinkan kita untuk membuat style yang sama pada banyak halaman.

Hal ini juga memecahkan masalah pada versi HTML lama, yang mana pada versi lama kita dapat mengatur style dari suatu elemen secara langsung.

Contohnya pada versi HTML 4 dan lebih lama lagi, pada versi ini diperkenalkan tag font yang digunakan untuk mengatur style dari font, seperti jenis font yang digunakan, warna, ukuran dan lain-lain.


<font face="calibri" size="12" color="green">
   <p>Halo Dunia</p>
</font>

Mungkin terdengar bagus karena kita bisa menentukan stylenya secara langsung di dalam tag tersebut.

Namun nyatanya cara ini justru menyulitkan para pengembang dan programmer website. Karena untuk mendapatkan hasil style yang sama pada tiap halaman, kita dituntut untuk menyelipkan tag ini satu-persatu.

Mungkin masih bisa ditoleransi jika hanya satu, dua, tiga halaman, namun bagaimana kalau puluhan? atau bahkan lebih?

Belum lagi bila ada perubahan kecil seperti warna teks atau ukuran teks pada halaman-halaman yang memiliki style yang sama, maka kita akan melakukan perubahan secara manual satu-persatu. Sungguh akan menguras banyak waktu dan melelahkan.

CSS Bisa Apa? 🀷

Sudah disinggung sebelumnya bahwa dengan adanya CSS kita dapat mendesain tampilan website. Lebih spesifiknya lagi dengan menggunakan CSS, kita dapat:

  • mengatur tata letak (layout) halaman
  • menentukan jenis, ukuran, dan warna font
  • mendesain background halaman
  • mengatur bagaimana elemen HTML seperti button, field input, dan lain-lain akan ditampilkan
  • membuat bangun bidang, garis, bayangan dan lain-lain
  • menambahkan efek animasi

Serta masih banyak lagi fungsi yang dapat kita rasakan dengan memakai CSS.

Maka dari itu dalam pembuatan website yang namanya CSS wajib hukumnya untuk dipelajari.

Bagaimana Bila Tidak Pakai CSS? 🀨

Bila kita tidak menerapkan CSS ke dalam website maka akan jadi seperti ini

Website tidak akan memiliki tampilan sama sekali dan hal ini akan membuat orang-orang tidak akan mau mengaksesnya.

Maka sangat diperlukan yang namanya CSS, semakin cantik suatu tampilan website maka pengunjung akan semakin nyaman.

Anatomi CSS πŸ“„

CSS memiliki anatomi atau struktur kode yang terdiri dari tiga bagian

  • Selektor
  • Blok deklarasi
  • Properti dan nilainya

Selektor πŸ“Œ

Selektor (selector) merupakan kata kunci untuk menentukan elemen HTML yang akan diberi style.


p{ color: yellow; } 

Kode di atas akan membuat seluruh teks di dalam tag <p> berwarna kuning.

Selektor dapat berupa nama tag, id, class, dan atribut.

Blok Deklarasi πŸ“‘

Blok deklarasi merupakan tempat untuk kita menuliskan bermacam atribut CSS yang nantinya akan diterapkan oleh selektor


p{
   /* masuk blok kode */
   color: yellow;
   background-color: pink;
}
/* keluar blok kode */ 

Kode di atas akan membuat seluruh elemen <p> memiliki background berwarna merah muda.

Blok deklarasi dimulai dan diakhiri dengan tanda kurung kurawal {….}.

Properti dan Nilainya πŸ’Ό

Properti merupakan atribut atau aturan yang akan diterapkan oleh elemen yang dipilih (selektor).

Jika terdapat lebih dari satu properti dalam blok deklarasi maka tiap properti harus dipisahkan dengan titik koma (;). Selain itu khusus untuk properti terakhir diizinkan untuk tidak memakai titik koma.


p{
   color: yellow;
   background-color: pink
}

Sedangkan jika hanya berisi satu properti maka boleh tidak menggunakan titik koma.


p{ color: yellow } 

Penerapan CSS πŸ’»

Sekarang kita akan coba menerapkan CSS pada dokumen HTML. Pada bagian ini akan menjelaskan 3 hal antara lain:

  • Cara menulis CSS untuk dokumen HTML
  • Cara menghubungkan file CSS dengan dokumen HTML
  • Cara menampilkan hasil dari CSS

Untuk lebih lengkapnya mari kita mulai.

Terdapat tiga cara menulis kode CSS untuk dokumen HTML:

  • Inline CSS
  • Internal CSS
  • Eksternal CSS

Inline CSS

Inline CSS adalah cara menulis kode CSS secara langsung di dalam tag HTML dengan menggunakan atribut style.


<h1 style="background-color: black; color: pink;"> Hello World! </h1> 

Cara ini sangat tidak direkomendasikan, namun bila memang dalam kondisi terpaksa karena suatu hal maka diperbolehkan.

Internal CSS

Internal adalah cara menulis kode CSS di dalam blok tag <head> dokumen HTML dengan menggunakan tag <style>.


<head>
  <style>
     h1{
         background-color: black;
         color: pink;
     }
  </style>
</head>

Cara ini masih diperbolehkan namun tidak menjadi rekomendasi.

Eksternal CSS

Eksternal adalah cara menulis kode CSS dengan memisahkan antara dokumen HTML dan kode CSS, yang mana kode CSS ini akan disimpan dalam file berekstensi .css.

Kode HTML


<h1> Hello World! </h1> 

Kode CSS


h1{
    background-color: black;
    color: pink;
} 

Cara ini sangat direkomendasikan.

Karena dengan menggunakan cara ini kode HTML dan kode CSS terlihat lebih rapi tidak bercampur jadi satu.

Cara ini yang akan sering digunakan pada tutorial kedepannya.

Menghubungkan File CSS dengan File HTML πŸ”—

Cara ini akan menjelaskan bagaimana menghubungkan antara kode CSS dengan dokumen HTML menggunakan cara penulisan eksternal CSS.

Kita ambil contoh kode sebelumnya

Kode HTML


<h1> Hello World! </h1> 

Simpan dengan nama index.html.

Kode CSS


h1{
    background-color: black;
    color: pink;
} 

Simpan dengan nama style.css.

Catatan: Nama file index.html menandakan bahwa file tersebut yang akan dipilih pertama kali (secara default) saat website dijalankan. Sedangkan nama file style.css umumnya menandakan file tersebut adalah file CSS induk dari website yang bersangkutan.

Setelah itu untuk menghubungkan dokumen HTML dengan file CSS diperlukan yang namanya tag <link> dengan atribut href yang berisi url lokasi dari file css tersebut berada.

Tag <link> sendiri dideklarasikan di dalam tag <head>.


<head>
    <title>Tutorial CSS</title>
    <link rel="stylesheet" href="....">
</head>

Berhubung file css tersebut berada satu lokasi dengan dokumen HTML maka tinggal kita tulis nama file css nya.


<!DOCTYPE html>
<html>
<head>
    <title>Tutorial CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Halo Dunia</h1>
</body>
</html>

Bang bagaimana kalau file css nya berbeda lokasi dengan dokumen HTML?

Pertanyaan ini akan terjawab di artikel ketiga.

Menampilkan Hasil Kode CSS πŸ“Ί

Kemudian buka file index.html tadi melalui browser.

Akan terlihat bahwa tulisan Hello World sesuai dengan style yang kita inginkan.

Coba kita ganti style nya


h1{
    background-color: blue;
    color: yellow;
} 

Kemudian refresh halamannya.

Ngomong-ngomong kita juga bisa melihat kode CSS yang kita tulis dengan mengklik kanan kemudian pilih inspect elemen atau jika melalui keyboard tekan tombol Ctrl+Shift+i.

Keluarannya akan seperti berikut.

Tips Belajar CSS πŸ’‘

Kita sudah mengenal apa itu css, bagaimana sejarahnya, kemudian apa fungsi dari css, dan bagaimana penerapannya. Terakhir ada beberapa tips yang dapat kita gunakan agar lebih mudah mempelajari CSS diantaranya:

Gunakan Cheat Sheet πŸ“ƒ

Terdapat banyak sekali properti yang ada pada CSS yang mana setiap properti memiliki nilai yang berbeda-beda, sulit bagi kita untuk menghafalnya semua kecuali jika memang kita sudah sering berinteraksi langsung dengan CSS.

Namun bagi pemula ada cara lain untuk mengatasi ini tanpa perlu menghafalnya yaitu dengan menggunakan contekan atau biasa disebut cheat sheet.

Darimana kita bisa mendapatkan cheat sheet ini?

Cukup mudah kalian tinggal cari di google dengan kata kunci “cheat sheet CSS”.

Lalu download dan print cheat sheet tersebut

Gunakan Inspect Elemen πŸ”§

Inspect elemen adalah tool bawaan browser untuk pengembang yang wajib digunakan ketika membuat suatu projek website. Inspect elemen ini banyak gunanya seperti untuk mendebug website yang dibuat, mengetes perubahan tanpa harus menyentuh kodenya secara langsung, dan juga dapat digunakan untuk melihat beberapa elemen dari website lain.

Cara pakainya cukup mudah, tinggal klik kanan kemudian pilih inspect elemen atau inspect saja tergantung browser yang digunakan atau jika melalui keyboar bisa tekan Ctrl+Shift+i.

Kesimpulan πŸ“‹

Setelah mempelajari materi ini, kita dapat mengambil beberapa poin penting antara lain:

  • CSS merupakan cara kita mendeskripsikan bagaimana elemen-elemen dalam dokumen HTML akan ditampilkan.
  • Fungsi utama CSS adalah untuk mengatur atau mendesain tampilan halaman website.
  • Terdapat 3 bagian utama dalam CSS yaitu selektor, blok deklarasi, dan properti beserta nilainya.
  • Terdapat 3 cara penulisan CSS yaitu inline, internal, dan eksternal.
  • Eksternal CSS merupakan cara penulisan CSS yang paling direkomendasikan.
  • Untuk mempermudah belajar CSS gunakan cheat sheet dan inspect elemen sebagai peralatan pendukung.

Penutup πŸšͺ

Pada pertemuan kali ini sudah dibahas beberapa materi diantaranya:

  • Pengenalan CSS βœ…
  • Pengenalan Struktur dan Sintaks Dasar CSS βœ…
  • Sekilas Penerapan CSS βœ…
  • Tips Belajar CSS βœ…

Lalu apa selanjutnya?

Selanjutnya kita akan mempelajari lebih dalam mengenai Struktur dan Sintaks Dasar dari CSS.

Referensi πŸ“š

 [1] Wikipedia - CSS
 [2] W3 - Historical Style Sheet Proposal
 [3] W3 - A brief of history CSS until 2016