Kalau kamu sudah belajar HTML maka tahapan selanjutnya adalah mempelajari CSS. Apa itu CSS? Temukan pengertian dan cara kerjanya di artikel ini.
Pengertian Singkat CSS
CSS atau kepanjangannya Cascading Style Sheet merupakan bahasa markup yang digunakan untuk mengatur tampilan elemen menjadi lebih indah.
Kode-kode yang kita tulis di HTML tampilannya pasti sangat-sangat tidak menarik, nah untuk membuatnya lebih menarik seperti tampilan warna, background, font, maka kita bisa menambahkan kode-kode CSS.
Sejarah CSS
CSS sendiri dibuat pada tahun 96 oleh W3C (World Wide Web Consortium). Masalah awalnya yaitu dulu HTML tidak dilengkapi dengan tag untuk format halaman.
Akhirnya dikenalkan lah tag <font> pada versi HTML 3.2 yang menyebabkan banyak masalah. Karena website mempunyai berbagai macam pilihan :
- font
- warna background
- juga style
Maka kalau ditulis satu-satu di HTML prosesnya akan lebih lama dan kode akan menjadi lebih panjang. Itulah yang menyebabkan CSS lahir.
HTML dan CSS Beriringan
HTML dan CSS tidak akan terpisahkan dari dunia pengembangan web. Karena HTML merupakan bahasa markup atau disebut sebagai fondasi dari sebuah website sedangkan CSS akan memperindah style semua aspek yang sudah dibuat oleh HTML.
Fungsi CSS Pada Website
Berikut ini adalah beberapa fungsi jika membangun website menggunakan CSS, yaitu :
#1. Proses Desain Jadi Lebih Cepat
Membuat desain website hanya dengan HTML saja tentu akan sangat memakan waktu dan rumit. Oleh karenanya proses desain akan lebih cepat dan mudah jika dengan CSS.
Dengan CSS kita bisa mengetikan satu kali fungsi saja untuk digunakan berbagai halaman HTML.
Jadi hemat waktu, karena tanpa harus menyalin baris kode proses desain sudah bisa berjalan.
#2. Loading Halaman Lebih Cepat
Dengan CSS kita tidak perlu lagi menuliskan atribut tag HTML di setiap filenya.
Kita cukup menulis satu aturan CSS lalu menerapkannya di berbagai file yang membutuhkan fungsi tersebut hanya dengan memanggilnya menggunakan kode tertentu.
Nantinya satu file hanya terdapat sedikit baris kode, sehingga proses loading website menjadi lebih cepat.
#3. Mudah di Maintenance
Karena terpisah dari HTML maka proses pemeliharaannya sangat mudah. Misalkan kita ingin update tampilan di halaman tertentu atau semua halaman website, maka tinggal ubah fungsi stylenya di file CSS saja. Otomatis pasti akan berubah.
#4. Style Lebih Beragam
Karena memang dikhususkan untuk mendesain tampilan HTML, maka fungsinya otomatis akan lebih beragam dibandingkan kita mendesain hanya dengan kode-kode HTML saja.
#5. Responsive di Berbagai Perangkat
Tidak usah takut ketika menggunakan CSS website kita tidak bisa responsive. Karena CSS ini sudah kompatibel dengan berbagai perangkat.
Memahami Cara Kerja CSS
Bagaimana cara kerja CSS? Berikut saya jelaskan secara singkat cara kerjanya.
Kode HTML
Berikut adalah kode html yang digunakan untuk menampilkan paragraf.
<p>Ini adalah paragraf!</p>
Kode CSS
Jika tanpa kode CSS maka yang ditampilkan hanya tulisan “ ini adalah paragraf !” dengan font dan warna standar bawaan dari HTML.
Nah, bagaimana supaya :
- mengubah warna menjadi merah
- memberikan efek tulisan bold
Caranya yaitu dengan menuliskan kode berikut pada CSS :
p { color:blue; font-weight:bold; }
Penjelasan :
- P merupakan baris kode CSS untuk mendefinisikan elemen di HTML. Sebutannya yaitu selector
- Sedangkan color dan font-weight merupakan properti yang digunakan untuk mengubah elemen P,
- blue dan bold disebutnya adalah sebuah nilai
Sampai sini bagaimana sudah paham cara kerja CSS? mudah sekali ya.
Penutup
Itulah penjelasan singkat mengenai apa itu CSS disertai dengan fungsi dan cara kerjanya. Semoga bermanfaat dan jangan lupa share ke temanmu yang lainnya juga.
Sumber gambar utama : https://mona.media/