Pengertian dan Fungsi CSS
Di Dasar-dasar Pemrograman, Anda akan diperkenalkan dengan HTML dan CSS. Keduanya adalah hal dasar yang harus dimiliki oleh seorang programmer, terutama untuk seorang front-end developer. Jadi apa itu CSS?
Sebelum kita melangkah terlalu jauh, CSS adalah jenis kode yang menciptakan antarmuka HTML untuk pengalaman pengguna yang lebih baik di halaman web. Kali ini Jagoan Hosting akan memberikan tutorial CSS dasar untuk pemula. Silahkan simak artikel berikut ini!
Apa itu CSS?
Kepanjangan CSS adalah singkatan dari Cascading Style Sheets, yang berguna untuk menyederhanakan proses pembuatan website dengan mengatur elemen di bahasa markup. Pemakaian CSS adalah untuk mendesain website front end.
Ketika menggunakan CSS, kamu akan bisa mengeksplorasi lebih jauh dibandingkan dengan bahasa pemrograman HTML dan PHP. Karena saat menggunakan CSS, kamu bisa mengatur gaya huruf, warna huruf, ukuran huruf, baris antar paragraf, serta jenis background yang ingin digunakan. Selain itu, CSS juga sering digunakan untuk mendesain layout, efek untuk website dan mengubah tampilan pada perangkat yang berbeda.
Fungsi CSS
Sudah pernahkah kamu mencoba mengembangkan website menggunakan HTML atau PHP? Jika sudah, pasti kamu merasa kesulitan untuk menata dan mengatur tampilannya, kan?
Pada dasarnya HTML dan PHP dikembangkan memang bukan untuk mendesain tampilan depan website. Jadi, menggunakan CSS adalah pilihan tepat! Contohnya jika kamu membuat tombol menggunakan HTML, pasti kamu hanya bisa menampilkan button yang biasa saja. Sedangkan dengan menggunakan CSS, tombol yang kamu buat bisa diberikan style seperti warna, ukuran, dan lainnya.
- Halaman dimuat lebih cepat
Pertama-tama, fungsi CSS adalah membuat halaman web lebih responsif. Saat menggunakan CSS, yang harus Anda lakukan adalah menulis aturan dan menerapkannya ke berbagai file yang membutuhkannya hanya dengan memanggilnya.
Jadi kode yang Anda hasilkan akan lebih pendek dan mempercepat proses pengunduhan.
- Mempercepat proses desain
Jika menggunakan CSS, kamu tidak perlu lagi menyalin satu per satu desain ke setiap file halaman. Ini berlaku ketika kamu membuat suatu desain yang sama di beberapa halaman. Nah, kamu tidak perlu lagi melakukan hal itu saat menggunakan CSS!
Kamu hanya perlu mengetikkan satu kali fungsi CSS lalu menggunakannya di banyak halaman HTML. Bukankah hal ini akan mempercepat proses desain?
- Mengatur style dalam website
CSS memiliki atribut yang lebih beragam jika dibanding dengan HTML ataupun PHP. Dengan CSS kamu bisa menentukan font selain default, menentukan warna dan ukuran teks, menerapkan warna background, menambah elemen tabel dan menggabungkannya ke posisi tertentu.
Jenis CSS
Dalam proses implementasinya, ada 3 jenis CSS yang bisa kamu praktekkan. Setiap jenisnya memiliki fungsi, kelebihan, dan kekurangan masing-masing.
Berikut penjelasan dari ketiga jenis CSS tersebut:
Internal CSS
Internal CSS adalah kode CSS yang penulisannya dalam tag <style> dan posisinya ada pada bagian atas header file HTML. CSS jenis ini berguna untuk membuat custom khusus dalam satu halaman website. Penggunaannya cocok untuk kamu yang sedang mengerjakan website dengan tampilan berbeda-beda.
Kelebihan internal CSS adalah :
- Editing yang mudah di tiap halaman website
- Tidak perlu melakukan upload file CSS karena termasuk ke dalam HTML
- Internal stylesheet bisa memakai ID dan Class
- Error mudah diperbaiki
Kekurangan internal CSS adalah :
- Kurang efisien, karena harus menuliskan ulang untuk penggunaan di beberapa halaman website
- Memperlambat performa website karena memiliki CSS sendiri di tiap halamannya
- Ukuran file menjadi lebih besar