CSS atau yang merupakan kepanjangan dari Cascading Style Sheet, merupakan suatu bahasa yang dibuat pada halaman web untuk mempercantik tampilan web, namun selain memiliki kelebihan, CSS juga memiliki kekurangan, kekurangan dan kelebihan itu antara lain :
Kelebihan
- Memisahkan desain dengan konten halaman web.
- Mengatur desain seefisien mungkin.
- Jika kita ingin mengubah suatu tema halaman web, cukup modifikasi pada css saja.
- Menghadirkan sesuatu yang tidak dapat dilakukan oleh HTML.
- Lebih mudah didownload karena lebih ringan ukuran filenya.
- Satu CSS dapat digunakan banyak halaman web.
- dan masih banyak lagi
Kekurangan
- Tampilan pada browser berbeda-beda.
- Kadang juga terdapat browser yang tidak support CSS (browser lama).
- Harus tahu cara menggunakannya.
- dibutuhkan waktu lebih lama dalam membuatnya.
- Belum lagi ada bug/error dalam CSS.
Manfaat dari CSS:
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
- Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
- Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
- Dapat berkolaborasi dengan JavaScript.
- Digunakan dalam hampir semua web browser.
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header : berisi tema web/ judul
Menu : menu link web
Content : isi dari web
Footer : identitas/ copyright
Ada dua cara penempatan elemen dalam web dengan CSS yaitu:
1. Position (Posisi)
Mengunakan properti position terdapat 4 cara:
- Static : posisi normal (default).
- Relative : posisi elemen tergantung dari elemen yang lain.
- Absolute : posisi elemen berpatokan pada jendela browser.
- Fixed : posisi elemen tetap walaupun digeser.
2. Float (Nempel)
Menggunakan properti float atau clear:
- Float:left : elemen akan menempel pada sebelah kiri elemen induk.
- Float:right : elemen akan menempel pada sebelah kanan elemen induk.
- Clear:left : elemen akan menempel pada sebelah kiri dan berada di bawah.
- Clear:right : elemen akan menempel pada sebelah kanan dan berada dibawah
- Clear:both : elemen akan berada pada posisi bawah elemen diatasnya.
· Margin : jarak/batas elemen dengan elemen lain
· Border : border/garis tepi elemen
· Padding : jarak elemen dengan isi elemen (elemen anak)
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu:
- External Style Sheet (file CSS berbeda dari file HTML),
- Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML)
- Inline Style Sheet (Kode CSS langsung dipasang di tag HTML, tidak direkomendasikan).