 |
| Image from belajarkoding.net |
CSS
CSS (Cascading Style Sheet) adalah sebuah bahasa yang bertugas untuk mendeskripsikan, mengatur, dan menghias elemen HTML di layar monitor sehingga terlihat lebih rapi dan menarik. Keberadaan CSS dan HTML ibarat seperti 2 sisi mata uang, yaitu saling melengkapi. Tanpa CSS, bentuk dan tampilan HTML tidak akan enak dilihat oleh mata.
Di dalam CSS, kita bisa melakukan banyak aktivitas, antara lain:
- Mengubah jenis, style, dan ukuran font
- Mengatur tata letak sebuah halaman
- Membuat animasi
- Mengatur warna
- Mengatur bentuk dan tampilan elemen HTML
- dan lain sebagainya
CSS Syntax
Aturan penulisan dalam sebuah CSS berbeda dengan HTML. Jika HTML banyak dipenuhi dengan tag <>, CSS akan banyak menggunakan kurung kurawal, hashtag (#), simbol titik koma (;) dan dot (.)
PEMBUATAN CSS
Untuk membuat css ada 2 cara, yaitu:
- Kode CSS dijadikan satu dengan file HTML
- Kode CSS dibuat terpisah (file ekstensi .css), kemudian dihubungkan dengan file HTML
Langkah-langkah yang kita lakukan adalah:
- Jika jadi satu dengan HTML
- Arahkan cursor ke bagian <head>
- Buat tag <style>
- Membuat kode css
- Jika terpisah:
- Membuat new document
- Membuat kode css
- Menyimpan dengan format .css
ID dan CLASS pada HTML
id dan class di dalam HTML berfungsi untuk menandakan identitas unik pada sebuah element. Saya akan jelaskan dengan analogi berikut ini:
Di dalam gudang terdapat 100 kardus polos. Seorang karyawan diminta untuk mencari kardus berisi buku-buku akuntansi. Karena seluruh kardus tidak diberi nama, alhasil si karyawan kebingungan mencari dimana kardus berisi buku akuntansi. Seandainya seluruh kardus diberi nama, pasti ia lebih mudah mencari kardus yang dimaksud.
Analogi di atas menunjukkan pentingnya sebuah identitas. Demikian pula dengan element HTML. Dengan adanya identitas, kita akan mudah mencarinya dan fungsi-fungsi di dalam kode program akan berjalan tanpa mengalami kebingungan.
Untuk memberi penanda pada element, kita dapat menggunakan dua atribut, yaitu id dan class. Keduanya memiliki aturan penulisan yang sama: tidak boleh ada spasi, case-sensitive (beda huruf kecil dan besar). ID adalah nama unik dan hanya bisa digunakan dalam 1 elemen saja. ID juga akan banyak digunakan pada kode javascript dan php. Sedangkan class bisa digunakan lebih dari 1 elemen (berkali-kali). Kedua-duanya (id dan class) sama-sama bisa dipakai di dalam css. Untuk lebih jelasnya, akan kita lihat contoh di bawah ini.
Pertama-tama, kita lihat apa yang saya lakukan di bagian head. Saya membuat tag style, di dalamnya saya mendefinisikan sebuah class dengan nama "paragraf". Pada CSS, class dimulai dengan simbol dot (.) sehingga menjadi ".paragraf". Kemudian saya memulainya dengan kurung kurawal untuk mengatur apa saja yang mau saya lakukan dengan class itu. Setiap aturan selalu diakhiri dengan tanda titik koma (;). Setelah semua diatur, saya menutup class tersebut dengan kurung kurawal tutup.
Langkah berikutnya, saya harus memanggil class paragraf tadi. Panggilan tersebut harus dan hanya bisa dilakukan di dalam tag body. Kita dapat menentukan sendiri di tag sebelah mana class tersebut digunakan. Contohnya di dalam tag p. Saya panggil dengan syntax: <p class="paragraf">. Jika syntax benar, maka hasilnya tulisan "Hello World" akan berubah menjadi warna biru, sesuai dengan yang saya mau.
Pertama-tama, kita lihat apa yang saya lakukan di bagian head. Saya membuat tag style, di dalamnya saya mendefinisikan sebuah class dengan nama "paragraf". Pada CSS, class dimulai dengan simbol dot (.) sehingga menjadi ".paragraf". Kemudian saya memulainya dengan kurung kurawal untuk mengatur apa saja yang mau saya lakukan dengan class itu. Setiap aturan selalu diakhiri dengan tanda titik koma (;). Setelah semua diatur, saya menutup class tersebut dengan kurung kurawal tutup.
Langkah berikutnya, saya harus memanggil class paragraf tadi. Panggilan tersebut harus dan hanya bisa dilakukan di dalam tag body. Kita dapat menentukan sendiri di tag sebelah mana class tersebut digunakan. Contohnya di dalam tag p. Saya panggil dengan syntax: <p class="paragraf">. Jika syntax benar, maka hasilnya tulisan "Hello World" akan berubah menjadi warna biru, sesuai dengan yang saya mau.
