Tutorial CSS Untuk Pemula - Mengenal Apa Itu CSS
Sebagai pengembang website, mempelajari bahasa pemrograman khususnya bahasa pemrograman yang ditujukan untuk pembuatan dan pengembangan website merupakan sesuatu yang sangat penting, karena website itu sendiri terdiri dari rangkaian kode-kode khusus yang tersusun rapi yang kemudian kode-kode tersebut dibaca oleh komputer dan diproses lalu ditampilkan kepada pengguna dengan berbagai macam tampilan sebagaimana yang sering kita lihat ketika kita berselancar diinternet.
Diantara bahasa pemrograman yang paling mendasar untuk dipelajari oleh pengembang website yang baru saja terjun ke dunia website adalah HTML dan CSS. HTML sendiri merupakan bahasa pemrogaman yang paling mendasar yang wajib dipelajari dan dipahami pertama kali, bahkan sangat penting untuk dikuasai jika kita ingin menjadi pengembang website yang handal sebelum akhirnya kita melangkah untuk mempelajari bahasa pemrograman yang lain.
Pada kesempatan kali ini, saya akan membahas tentang bahasa pemrograman dasar tingkat kedua (kalau boleh saya katakan seperti itu) yang penting untuk kita pelajari, yaitu CSS. Saya berasumsi bahwa anda sebagai pembaca telah mempelajari dan mengerti bahasa pemrograman HTML, sehingga dengan itu diharapkan anda akan lebih mudah untuk memahami tutorial yang akan saya sampaikan berikut ini. Dan jika ternyata anda belum mempelajari atau belum mengerti tentang bahasa pemrograman HTML, maka sebaiknya silahkan anda pelajari dan pahami terlebih dahulu.
APA ITU CSS?
CSS yang merupakan singkatan dari Cascading Style Sheet adalah suatu bahasa pemrograman yang dibuat dengan tujuan untuk memudahkan pengembang website mengatur dan memperindah tampilan website yang dimilikinya. CSS berfungsi untuk memodifikasi tag atau element pada HTML. Dengan CSS seseorang akan lebih mudah untuk menata tampilan websitenya dan membuat tampilan websitenya menjadi menarik dan elegan.
MENGAPA PERLU BELAJAR CSS?
Karena dizaman ini CSS telah menjadi suatu bagian penting dari HTML. Hampir tidak ada website yang tidak menggunakan CSS dizaman ini. Oleh karena itu, mempelajari CSS adalah suatu hal yang bisa terbilang wajib bagi kita yang ingin menjadi seorang pengembang website yang profesional.
BISAKAH MEMBUAT WEBSITE HANYA DENGAN CSS TANPA HTML?
Tentu tidak bisa. Karena jika diibaratkan, HTML adalah sebuah rumah sedangkan CSS adalah dekorasinya. Sehingga seperti yang saya katakan sebelumnya bahwa bagi seseorang yang ingin mempelajari CSS maka dia wajib untuk mempelajari HTML terlebih dahulu. Karena bagaimana mungkin seseorang akan mendekorasi sebuah rumah tanpa tahu terlebih dahulu apa itu rumah? kira-kira seperti itu gambarannya.
APA MANFAAT YANG BISA KITA DAPATKAN DENGAN BELAJAR CSS?
Ada banyak manfaat yang bisa kita dapatkan, diantaranya adalah kita akan lebih mudah untuk membuat desain website, sehingga akan lebih menghemat waktu dan tenaga serta biaya. Disamping itu pula bukan tidak mungkin kita akan bisa menjadi seorang website designer atau seorang template maker atau yang lainnya yang itu akan sangat menguntungkan kita. (in sya aLLAH)
APA SAJA YANG PERLU DIPERSIAPKAN UNTUK BELAJAR CSS?
Setidaknya ada 3 hal yang perlu kita persiapkan untuk belajar CSS, yaitu :
- Sebuah PC atau laptop atau notebook atau sebuah smartphone.
- Sebuah aplikasi teks editor. Disarankan teks editor yang dilengkapi fitur penulisan bahasa pemrograman seperti notepad++ pada windows atau Xed, Sublimetext,VSCode dan yang lainnya pada linux.
- Sebuah aplikasi browser seperti mozilla firefox atau yang semisalnya yang bisa membaca kode CSS.
MEMULAI TUTORIAL BELAJAR CSS
Jika semua persiapan yang dibutuhkan telah ada maka sekarang waktunya kita untuk mempelajari CSS, dimulai dari mengenal cara penulisan kode CSS dan berlanjut pada contoh penggunaanya.
MEMAHAMI ATURAN PENULISAN KODE CSS
Sebagaimana bahasa pemrograman lainnya, CSS memiliki aturan penulisan kode tersendiri yang wajib diikuti. Jika tidak maka kode CSS tidak akan bisa berjalan sebagaimana yang diharapkan.
Adapun aturan penulisan kode CSS adalah sebagai berikut :
contoh penulisan kode CSS :
b { color : white; background-color: red; font-size : 30px; )`Penjelasan :
"b" disebut sebagai Selector.
Selector ini merupakan bagian yang bertugas untuk mencari pola yang sesuai didalam file HTML yang ingin kita modifikasi. Pada contoh diatas saya menuliskan huruf "b" yang mana huruf "b" tersebut merupakan salah satu Tag atau Element HTML yang berfungsi untuk menebalkan huruf yaitu "<b>". Anda bisa mengubah contoh selector diatas dengan Tag atau Element HTML lain semisal "p" untuk paragraf dengan yaitu Tag atau Element HTML "<p>" atau yang lainnya.
Didalam CSS ada beberapa jenis selector (yang in sya aLLAH akan saya jelaskan nanti), dan pada contoh diatas saya menggunakan salah satu jenis selector yang disebut Tag atau Element Selector yang mana selector tersebut bertugas untuk mencari Tag atau Element HTML bold (<b>) untuk dimodifikasi sesuai dengan keinginan saya.
Selanjutnya, setelah selector terdapat tanda kurung kurawal buka "{" dan diakhir kode diatas terdapat tanda kurung kurawal tutup "}".
Fungsi kedua kurung kurawal tersebut adalah sebagai tempat untuk meletakkan Declaration (deklarasi) atau agar lebih mudah bisa kita sebut sebagai "perintah" kita tentang apa yang harus dimodifikasi oleh selector terhadap pola yang ingin kita modifikasi. Deklarasi atau perintah bisa berjumlah satu atau lebih, dan pada contoh diatas saya menuliskan tiga contoh deklariasi atau perintah sekaligus.
Sebuah deklarasi atau perintah didalam CSS harus mengandung dua hal, yaitu Property dan Value. Pada contoh diatas, "color", "background-color" dan "font-size" disebut sebagai Property, sedangkan "white", "red" dan "30px" disebut dengan Value. Didalam CSS terdapat bermacam-macam property yang bisa kita gunakan, dan diantaranya adalah sebagaimana pada contoh diatas. Property "color" digunakan untuk mengubah warna font dan "background-color" digunakan untuk mengubah warna background, sedangkan "font-size" digunakan untk mengubah ukuran font. Masing-masing property memiliki nilai tersendiri tergantung pada property yang digunakan.
Dalam penulisannya, property dan value harus dipisah dengan tanda titik dua ":", dan setelah meletakkan value dari sebuah property maka jangan lupa untuk menuliskan tanda titik koma ";" sebagai penutup dan sekaligus pemisah antara property yang satu dengan yang lain.
Setelah kita memahami penjelasan diatas maka itu berarti sekarang kita sudah mengerti bahwa maksud dari kode CSS yang saya contohkan diatas adalah saya ingin agar CSS mengubah warna font, warna background dan mengubah ukuran font pada tulisan yang terdapat pada Tag atau Element bold ( <b> )didalam suatu file HTML. Dan jika digambarkan dengan bahasa kita maka kira-kira gambarannya adalah saya berkata kepada CSS seperti ini, "CSS, tugaskan selector untuk mencari Tag atau Element HTML <b> lalu ubahlah warna hurufnya menjadi putih, warna latarbelakangnya menjadi merah dan ukuran hurufnya menjadi 30 pixel!", dan CSSpun segera menjalankan tugasnya dan mengubah itu semua sesuai apa yang saya perintahkan.
Sedikit tambahan penjelasan, pada bagian selector kita bisa menuliskan lebih dari satu pola untuk dimodifikasi jika memang deklarasi atau perintah pada masing-masing pola tersebut sama persis, contoh :
`h1, h2 { color : green;}`yang berarti kita ingin agar CSS mengubah warna font pada Tag atau Element HTML <h1> dan <h2> menjadi warna hijau.
Nah, bagaimana? sangat mudah untuk dipahami bukan?
AlhamduliLLAH, sekarang kita sudah mengenal CSS dan sudah mengerti tentang aturan penulisan kode CSS. Selanjutnya in sya aLLAH kita akan membahas tentang " Cara Memasukkan Kode CSS Kedalam HTML ".
Sekian dulu penjelasan dari saya tentang Pengenalan CSS pada artikel Tutorial CSS Untuk Pemula - Mengenal Apa Itu CSS kali ini.
Semoga bermanfaat.