CSS adalah singkatan dari Cascading Style Sheets, yaitu bahasa pemrograman web untuk membuat style atau tampilan web.
Kalau HTML adalah untuk membuat layout atau tata letak web, sedangkan CSS untuk membuat dekorasi tampilan web menjadi menarik.
Kalau dulu CSS hanya digunakan untuk pemrograman web saja, tapi saat ini CSS sudah dikembangkan untuk membuat style yang lain. Seperti: mobile app, dll.
Bahkan CSS juga bisa dikombinasikan dengan bahasa pemrograman lain, seperit react atau javascript.
Fungsi CSS
Seperti yang telah saya jelaskan, kegunaan CSS adalah untuk membuat tampilan web menjadi menarik.
Apa saja yang bisa dilakukan CSS?
- Mengatur ukuran layout, misal berapa ukuran panjang, lebar, margin, dll.
- Mengatur jenis huruf atau typografi
- Membuat layout menjadi responsive (tampilan disesuaikan dengan device. Misal: tampilan web di smartphone beda dengan di laptop, dll
Masih banyak lagi yang bisa dilakukan CSS. Lebih jelasnya akan saya jelaskan di tutorial lain.
Mudahnya, HTML itu seperti tulang manusia. Sedangkan CSS kulit yang membungkusnya.
Jika tidak ada tulang, manusia tidak bisa berdiri tegak. Tapi, kalau tidak ada kulit manusia akan menyeramkan.
Kelebihan CSS adalah:
- Fleksibel, karena ada banyak cara penggunaan jadi sangat kondisional (tidak kaku)
- Konsisten, dengan menggunakan satu style yang sama. Kita hanya perlu mengedit satu sumber kode, dan semuanya sudah berubah
- Hemat waktu, karena satu kode bisa digunakan berulang kali. Jadi sangat menghemat waktu.
- Mudah, ya CSS adalah bahasa yang mudah dipahami.
- Maintenance mudah, dengan fitur inspect element di setiap browser. Kita bisa mencari bug atau mengganti tampilan secara real time.
Cara Menggunakan CSS
Kalau HTML ditulis dengan awalan kode <html>...</html> sedangkan CSS berbeda.
Misal, kita ingin mengganti warna background halaman web, kita bisa mengganti style dari tag elemen <body>.
<style type="text/css">
body{
background: red
}
</style>
Ada tiga cara memang untuk memanggil atau menggunakan kode CSS. Yaitu:
- Inline CSS (satu baris dengan HTML)
- Internal CSS (ditulis di tag
<head>) - Eksternal CSS (ditulis di file terpisah)
Lebih jelasnya akan saya jelaskan di artikel yang lain.