Estimasi Waktu Baca: 7 menit

Pemanasan

Artikel ini merupakan artikel ke #01 dari seri Tutorial CSS Dasar untuk Pemula. Jika kalian sekiranya sudah paham mengenai topik pada artikel ini, mungkin bisa lompat saja ke artikel berikutnya 3 Cara Penulisan Kode CSS.

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

- Pendinginan
- Referensi

Pada materi pembuatan website, bahasa pertama yang wajib kita pelajari adalah HTML. Setelah HTML tuntas, selanjutnya kita akan mulai belajar bahasa lain yang bernama CSS.

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

HTML dan CSS
HTML dan CSS

Yups benar, bahasa ini berguna untuk mendesain tampilan atau antarmuka (interface) pada website, maka dari itu sangat wajib bagi kita para pemula untuk mempelajarinya.

Persiapan

Sebelum lanjut ke materi, saya sarankan kalian sudah memasang beberapa peralatan atau aplikasi wajib untuk membuat website. Aplikasinya tidak jauh beda dengan saat belajar HTML, hanya dua, yaitu teks editor dan browser.

Untuk teks editor saya sarankan untuk menggunakan VS Code karena selain gratis juga komunitasnya besar dan banyak ekstensi yang dapat mendukung pekerjaan kalian dalam membuat website nantinya.

Selanjutnya yang tak kalah penting ialah web browser, untuk web browser saya sangat sarankan untuk menggunakan tiga browser canggih seperti mozilla firefox, google chrome, atau microsoft edge. Untuk user Mac umumnya pakai safari.

Namun saya juga tidak melarang kalian menggunakan aplikasi di luar yang saya sebutkan di atas, tergantung selera atau pun ‘keterbatasan’ PC setiap orang yang berbeda-beda.

Oke, tanpa berlama lagi 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. Bahasa ini bertugas untuk membuat dan mengatur tampilan website agar terlihat lebih menarik.

CSS kurang tepat jika disebut sebagai bahasa pemrograman, kurang tepat juga bila dikatakan bahasa markah (markup) seperti halnya HTML. CSS lebih tepat bila disebut sebagai bahasa style sheet.

Maksud style sheet di sini berarti dengan menggunakan bahasa ini kita dapat menentukan dan mengatur gaya (style) untuk setiap elemen HTML.

Sejarah CSS

Seseorang berkebangsaan Norwegia bernama Håkon Wium Lie merupakan tokoh yang mengusulkan CSS pertama kali pada tanggal 10 Oktober 1994 melalui proposalnya mengenai Cascading HTML Style Sheet (CHSS) dalam konferensi W3C di Chicago, Illinois.

Di mana pada waktu yang sama Lie juga sedang bekerja bersama dengan pengembang HTML yaitu Tim Berners Lee di CERN.

Setelah itu berselang sekitar dua tahun yaitu pada tanggal 17 Desember 1996, Håkon Wium Lie resmi memperkenalkan CSS1 ke publik. Dalam proses mengembangkan bahasa ini Lie tidak sendiri. Ia bekerja sama dengan seorang temannya bernama Bert Bos.

Varian Versi CSS

Mulai dari kelahirannya hingga sekarang, bahasa satu ini sudah memiliki beberapa versi (sumber lain menyebutnya dengan level) yang setiap kenaikan versinya merupakan pembaruan dari versi sebelumnya.

CSS1 – 17 Desember 1996

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

CSS2 – 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 pada versi ini 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 CSS2.1 yang berarti CSS Level 2 Revision 1. Versi revisi ini dirilis pada 7 Juni 2011.

CSS3 – 2012

Versi ini adalah versi yang saat ini banyak digunakan oleh para pengembang dan programmer website. Karena beberapa fitur mulai 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 Dibuat?

Alasannya, karena style-formatting pada HTML versi lawas saat itu dianggap terlalu panjang. Apalagi ketika HTML versi 3.2 mulai dirilis dengan penambahan tag <font> di dalamnya, yang mana hal ini menjadi mimpi buruk bagi para pengembang dan programmer web besar.


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

Bagaimana tidak?! Karena ketika terdapat perubahan seperti jenis font atau warna font, para programmer dituntut untuk mengubahnya satu per satu secara manual di setiap halaman website.

Mungkin kita masih bisa menyelesaikannya dengan mudah jika hanya satu, dua, tiga halaman, namun bagaimana kalau puluhan halaman?

Hal ini malah akan menguras banyak tenaga, waktu, dan biaya.

Sehingga terciptalah CSS yang memungkinkan kita untuk membuat satu tampilan yang dapat diterapkan pada banyak halaman website. Selain itu dokumen HTML juga akan terlihat lebih rapi karena antara kode style dan kode HTML berada pada file yang terpisah, tidak bercampur satu sama lain. Hal ini pada akhirnya mengatasi masalah pada HTML versi lawas.

CSS Bisa Apa?

Sudah disinggung sebelumnya bahwa secara garis besar CSS digunakan untuk membuat tampilan website. Namun, lebih spesifiknya lagi dengan menggunakannya, 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.

Bagaimana Bila Tidak Pakai CSS?

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

Halaman Website Tanpa CSS
Halaman Website Tanpa CSS

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

Maka dari itulah kita butuh yang namanya CSS, semakin cantik suatu tampilan website maka pengunjung akan semakin nyaman.

Tutorial CSS: Halaman Website dengan CSS
Halaman Website dengan CSS

Anatomi CSS

CSS memiliki anatomi atau struktur kode yang terdiri dari tiga bagian:

Struktur Kode CSS
Struktur Kode

Selector, merupakan kata kunci untuk menentukan elemen HTML yang akan kita beri style.

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

Properti dan nilainya, merupakan atribut atau aturan yang akan diterapkan pada selektor. Setiap properti memiliki nilai yang sesuai dengan fungsinya. Tenang, tidak perlu bingung, akan dijelaskan di artikel berikutnya.

Penerapan

Sekarang kita akan coba menerapkan CSS pada dokumen HTML. Pada bagian ini kita akan coba menulis kodenya dan menampilkannya pada web browser.

Sebelum lanjut, akan saya jelaskan sedikit bahwasanya terdapat tiga cara penulisan kode CSS untuk dokumen HTML, yaitu:

  • Inline, adalah cara menulis kode style secara langsung di dalam tag HTML dengan menggunakan atribut style.
  • Internal, adalah cara menulis kode style di dalam blok tag <head> dokumen HTML dengan menggunakan tag <style>
  • Eksternal, adalah cara penulisan dengan memisahkan antara dokumen HTML dan kode style, yang mana kode style ini akan tersimpan secara terpisah dalam file berekstensi .css.

Penjelasan lebih dalam untuk masing-masing cara penulisan di atas akan saya jelaskan pada materi berikutnya. Untuk sementara waktu dalam artikel ini kita akan coba menulisnya secara internal.

Selanjutnya, buka teks editor kalian, create new file dan beri nama file tersebut index.html. Buat struktur dokumen HTML seperti di bawah ini.


<!DOCTYPE html>
<html>
<head>
    <title>Belajar CSS</title>
</head>
<body>
    
</body>
</html>

Selanjutnya pada bagian dalam tag <body> kita akan coba tambahkan elemen yang nantinya akan kita beri style. Contohnya di sini kita akan coba otak-atik elemen <h1>.


....
<body>
    <h1>Halo Dunia</h1>
</body>
....

Karena penulisan CSS-nya secara internal maka kita perlu tag <style> di dalam tag <head>.


....
<head>
    <title>Tutorial CSS</title>
    <style>
         
    </style>
</head>
....

Di dalam tag <style> itulah nantinya kita definisikan property beserta nilainya untuk elemen <h1>.

Jika sudah, maka saatnya kita hias elemen <h1> tersebut. Misal di sini saya ingin elemen <h1> ini memiliki teks berwarna pink dan background berwarna hitam. Maka seperti inilah penerapan CSS-nya


....
<head>
    <title>Tutorial CSS</title>
    <style>
          h1{
              background-color: black;
              color: pink;
          } 
    </style>
</head>
....

Mudah sekali bukan!

Menampilkan Hasil Kode

Terakhir buka file index.html tadi melalui browser.

Menampilkan CSS di Browser
Menampilkan CSS di 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.

Mengganti Style CSS
Mengganti Style CSS

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

Cara Menampilkan Fitur Inspect Element
Cara Menampilkan Fitur Inspect Element

Keluarannya akan seperti berikut.

Tampilan Inspect Element
Tampilan Inspect Element

Tips Belajar CSS

Terakhir ada beberapa tips yang dapat kita gunakan agar lebih mudah mempelajari CSS antara lain:

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 para programmer biasa menyebutnya dengan istilah cheat sheet.

Darimana kita bisa mendapatkan cheat sheet ini?

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

Tampilan Cheat Sheet
Tips CSS: Cheat Sheet

Lalu download dan print cheat sheet tersebut. Hal ini juga berlaku pada banyak bahasa pemrograman yang lain.

Gunakan Inspect Element

Inspect elemen adalah tool bawaan browser untuk para pengembang yang wajib kita pakai ketika membuat suatu projek website. Karena inspect elemen ini memiliki banyak fungsi seperti untuk mendebug website, mengetes perubahan tanpa harus menyentuh kodenya secara langsung, dan juga dapat kita gunakan untuk melihat beberapa elemen dari website lain.

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

Tampilan Inspect Element
Tips CSS: Inspect Element

Pendinginan

Pada artikel pertama ini kita sudah mengenal sedikit mengenai CSS, bagaimana implementasinya, dan tips untuk mempelajarinya.

Lalu apa selanjutnya?

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

Referensi

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