A. Mengenal CSS
Dalam pembuatan Website ada yang disebut dengan HTML (Hyper Text Markup Language) yang berfungsi sebagai struktur dari website tersebut. HTML mengatur struktur konten dalam website seperti judul, paragraf, dan gambar. Website yang hanya menggunakan HTML sebagai halaman web biasanya terlihat datar dan tidak menarik. Untuk itu digunakanlah CSS (Cascading Style Sheets) yang berfungsi untuk mengatur bagaimana konten halaman web tersebut terlihat. Contohnya seperti menentukan warna halaman web tersebut, besar kecil tulisan atau font, dan lain lain. Secara sederhana, CSS digunakan untuk mempercantik halaman web yang dibuat oleh HTML.
Secara umum, Syntax dalam CSS memiliki struktur sebagai berikut:
 |
| Struktur Syntax CSS |
Dalam gambar tersebut, h1 merupakan elemen dalam HTML yang dalam CSS disebut dengan Selector yang berfungsi untuk merujuk elemen HTML yang ingin diberi Style CSS. Lalu, bagian yang ada di dalam kurung kurawal disebut dengan Declaration yang terdiri dari dua bagian yaitu Property dan Value. Pada gambar, elemen color: dan font-size: merupakan Property yakni seperti instruksi bagaimana Selector (contohnya h1 dalam gambar) akan terlihat. Sedangkan Value adalah nilai spesifik untuk Property yang akan mempengaruhi bagaimana Selector akan terlihat. Di gambar, blue dan 12px merupakan Value dari Property color: dan font-size:.
B. Cara Menambahkan CSS ke dalam HTML
Untuk menambahkan CSS ke dalam file HTML ada 3 cara, yakni:
1. Internal CSS
Internal CSS adalah menempatkan kode CSS langsung di dalam file HTML. Kode CSS ini ditempatkan dalam elemen <style> di bagian <head> file HTML.
 |
| Contoh Internal CSS dalam file HTML. |
Kelebihan Internal CSS:
• Cepat dan mudah untuk penataan CSS skala kecil dalam satu file HTML.
• Tidak perlu meng-upload beberapa file karena HTML dan CSS dikemas dalam satu file yang sama.
• CSS yang dikemas dalam file HTML akan mengurangi risiko konflik dengan CSS lain.
Kekurangan Internal CSS:
• Tidak cocok untuk mempertahankan Style CSS yang konsisten di beberapa halaman web.
• Kode bisa menjadi berantakan dan kurang terorganisir, terutama pada dokumen yang lebih besar.
• Perubahan hanya terjadi pada 1 halaman sehingga tidak efisien bila ingin menggunakan CSS yang sama pada beberapa file.
2. External CSS
External CSS melibatkan pembuatan file .css terpisah yang berisi kode-kode CSS. Kemudian menautkan file CSS eksternal ini ke dokumen HTML menggunakan elemen <link> di bagian <head> dokumen HTML. External CSS bisa digunakan kembali pada file HTML yang berbeda sehingga menjadi lebih terorganisir.
 |
| Contoh External CSS (file .html) |
 |
| Contoh External CSS (file .css) |
Kelebihan External CSS:
• Ukuran file HTML menjadi lebih kecil dan strukturnya lebih rapi.
• Kecepatan loading menjadi lebih cepat.
• File CSS yang sama bisa digunakan di banyak halaman.
Kekurangan External CSS:
• Halaman belum tampil secara sempurna hingga file CSS selesai dipanggil.
3. Inline CSS
Inline CSS merupakan cara menerapkan CSS langsung ke elemen HTML individual menggunakan atribut 'style'. Metode ini memungkinkan menentukan gaya secara spesifik untuk satu elemen, namun tidak direkomendasikan karena setiap elemen HTML harus diberi attribute 'style'.
 |
| Contoh Inline CSS |
• Berguna jika ingin menguji dan melihat perubahan pada salah satu elemen HTML.
• Berguna untuk perbaikan cepat.
• Permintaan HTTP yang lebih kecil.
Kekurangan Inline CSS:
• Inline CSS harus diterapkan pada setiap elemen.
0 Komentar