Apabila kita ingin membuat pengguna betah menggunakan website buatan kita maka kita perlu memberikan tampilan yang menarik (eye-catching) di mata pengguna. Kita perlu memberikan styling seperti color, typography, spacing, grid system, dan lainnya sehingga website terlihat lebih modern, clean, minimalist, dan intuitive. Untuk melakukan styling tersebut maka kita perlu mempelajari lebih dalam ilmu CSS di dalam dunia website development.
Apa itu CSS?
CSS kepanjangan dari Cascading Style Sheets adalah sebuah bahasa style sheet yang digunakan oleh website developer dalam mengembangkan dan memodifikasi tampilan website sehingga bisa lebih menarik. CSS biasanya digunakan di dalam dokumen HTML dan juga bisa digunakan secara pisah dari HTML agar lebih mudah diorganisir dengan rapih.
Apabila kita memisahkan CSS dari HTML maka perlu kita import menggunakan script HTML seperti <link rel=”stylesheet” type=”text/css” href=”css/style.css”>
Kelebihan menggunakan CSS
Dalam membuat layout website maka kita perlu menggunakan HTML, keterbatasan dari HTML adalah tidak bisa memberikan styling yang lebih complex lagi dibandingkan CSS misalnya membuat animasi, warna gradient, corners pada sudut element, dan sebagainya.
Selain itu juga apabila kita memisahkan kodingan CSS dengan file HTML maka projek website akan lebih mudah di-maintenance oleh lebih dari satu developer saja pada perusahaan tersebut sehingga selain tampilan website yang jadi lebih menarik namun juga memberikan perfomance website tersebut menjadi lebih cepat dan membuat pengguna betah menggunakannya.
Beberapa contoh yang saya lakukan dengan CSS dalam membuat projek website menjadi lebih menarik adalah sebagai berikut:
- Mengatur responsive design sehingga tampilan website tetap bagus pada laptop, handphone, dan layar smartTV
- Membuat beberapa animasi dalam meningkatkan user-experience pada website yang saya bangun
- Membuat reusable styling sehingga saya bisa lebih cepat menggunakan style yang sama dan berulang kepada halaman-halaman lainnya
Cara menggunakan CSS pertama kita
Kita beruntung karena CSS sebenarnya menggunakan bahasa Inggris yang mudah dipahami seperti jika kita ingin mengatur suatu lebar maka pakai width dan untuk tinggi pakai height, well, sudah waktunya perdalam bahasa Inggris kita juga nih.
Untuk memberikan styling kepada sebuah element tertentu pada tampilan website kita maka kita perlu memberikan selector kepada element tersebut melalui file CSS kita. Misalnya kita ingin membuat button yang besar dan berwarna biru, maka kita perlu menuliskan kodingan seperti berikut:
button { background-color: blue, width: 200px, height: 55px; }Jika kita perhatikan kodingan di atas maka kita telah mengarahkan styling kepada button lalu kita berikan property seperti background-color (warna background) menjadi biru ditambah juga mengatur lebar dan tinggi menggunakan pixel.
Kodingan CSS di atas akan mengubah seluruh styling pada <button></button> pada dokumen HTML kita, namun apabila kamu hanya ingin mengubah pada beberapa button tertentu maka kita bisa menggunakan ‘.’ ditambah dengan nama kelas yang dimaksud, sebagai contoh berikut:
.button-checkout { background-color: orange, width: 200px, height: 55px; }Kodingan diatas dapat membantu kita mengubah seluruh warna background menjadi warna oranye kepada button yang memiliki nama kelas button-checkout, oleh karena itu kita perlu memberikan attribute class=”” pada button menjadi <button class=”button-checkout”><button>.
Apabila kamu ingin coba mempraktikkan kodingan CSS di atas maka bisa menggunakan software seperti visual studio code atau sublime text editor.
Jika kamu tertarik untuk memperdalam ilmu CSS pada website design dan development maka silahkan mengikut beberapa kelas CSS gratis pada website BuildWithAngga sehingga tampilan website kamu bisa lebih menarik perhatian calon perusahaan tempat kamu bekerja nantinya.
Kesimpulan perkenalan CSS
Beberapa poin penting perlu kita ingat dalam mempelajari CSS:
- CSS adalah bahasa stylesheet yang digunakan website developer untuk membuat tampilan website lebih menarik dan meningkatkan user-experience
- CSS wajib dipisah dari dokumen HTML agar mudah di-maintenance
- CSS dapat membantu kita membuat layout lebih complex seperti menambahkan animasi
- CSS menggunakan bahasa Inggris sederhana sehingga mudah dipahami orang awam
- Dengan menggunakan CSS kita bisa memberikan styling lebih cepat tanpa mengulang-ulang kembali pada styling yang sama
- CSS membantu kita membuat tampilan website lebih responsive di seluruh device
Oiya nanti pada artikel selanjutnya kita akan bahas lebih tentang CSS seperti Internal dan External CSS, beberapa framework CSS pilihan, dan sebagainya. Pantau terus halaman tips ini untuk mendapatkan beberapa tips CSS terbaru lainnya. See you again in the next article.
