Apa itu CSS? Inilah Ulasan Lengkapnya 

Kalau kamu sudah belajar HTML maka tahapan selanjutnya adalah mempelajari CSS. Apa itu CSS? Temukan pengertian dan cara kerjanya di artikel ini. 

Pengertian 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

Apa itu CSS
Ilustrasi HTML Sebelum dan sesudah menggunakan CSS

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. 

kmw

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

apa itu css
Contoh properti, selector dan nilai di 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.

kmw

Sumber gambar utama : https://mona.media/

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.