Belajar CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) adalah kode yang kamu gunakan untuk memberikan gaya pada halaman web kamu. Dasar-dasar CSS akan menjelaskan apa sajakah yang kamu butuhkan untuk memulai. Kami akan menjawab pertanyaan-pertanyaan seperti: Bagaimana saya dapat membuat teks saya menjadi berwarna hitam atau merah? Bagaimana saya dapat membuat konten saya tampil sedemikian rupa pada layar? Bagaimana saya dapat mendekor halaman web saya dengan latar belakang gambar atau warna-warna?
Apakah CSS itu?
Seperti HTML, CSS bukanlah sebuah bahasa pemrograman. CSS juga bukanlah sebuah bahasa markup — ia adalah suatu bahasa style sheet. Artinya, dengan CSS kamu dapat mengaplikasikan gaya pada elemen-elemen yang ada dalam dokumen HTML. Sebagai contoh, untuk membuat teks pada seluruh elemen paragraf dalam satu halaman HTML menjadi berwarna merah, kamu akan menulis CSS sebagai berikut:
Salin baris kode CSS tersebut ke dalam suatu file baru di teks editor kamu, lalu simpan file tersebut sebagai style.css di direktori styles kamu.
Namun kita masih perlu untuk mengaplikasikan CSS tersebut ke dokumen HTML kamu. Jika tidak, CSS tersebut tidak akan berpengaruh pada bagaimana browser akan menampilkan dokumen HTML tersebut.
Buka file index.html kamu dan letakkan baris berikut di suatu tempat di bagian head (di antara tag <head> dan </head>):
Simpan index.html dan buka halaman tersebut di browser kamu. Seharusnya muncul tampilan seperti ini:
Jika teks paragraf kamu sekarang berwarna merah, selamat! Kamu berhasil menulis CSS pertama kamu.
Bagian-bagian dari sebuah CSS ruleset
Mari kita lihat CSS di atas dengan sedikit lebih detil:
Struktur di atas merupakan sebuah rule set (atau sering disebut "rule" supaya lebih singkat). Perhatikan nama dari masing-masing bagian di atas:
Selector
Nama elemen HTML di awal rule set. Selector menandai satu atau lebih elemen yang akan diberikan gaya (contoh di sini menggunakan elemen p). Untuk memberikan gaya pada elemen lain, kamu bisa mengubah selector sesuai elemen yang kamu inginkan.
Declaration
Suatu peraturan seperti color: red; yang menentukan properti mana dari elemen yang ingin kamu beri gaya.
Properties
Cara kamu memberikan gaya terhadap elemen HTML (contoh di sini, color adalah properti dari {elemen {htmlelement("p")}}.) Di dalam CSS, kamu memilih properti mana saja yang ingin kamu berikan gaya di peraturan kamu.
Property value
Sebelah sisi kanan properti setelah tanda titik dua, kita memiliki nilai properti, yang memilih satu dari banyak kemungkinan penampilan untuk properti yang diberikan (ada banyak sekali nilai-nilai color selain red).
Perhatikan juga bagian-bagian lain dari sintaks di atas:
- Masing-masing rule set (selain selector) harus dibungkus dengan sepasang kurung kurawal ({}).
- Dalam masing-masing deklarasi, kamu harus menggunakan tanda titik dua (:) untuk memisahkan properti dari nilai-nilainya.
- Dalam masing-masing rule set, kamu harus menggunakan tanda titik-koma (;) untuk memisahkan satu deklarasi dengan deklarasi berikutnya.
Untuk memodifikasi banyak nilai properti sekaligus, kamu hanya perlu menggunakan tanda titik-koma sebagai pemisah, seperti ini:
Memilih banyak elemen
Kamu juga dapat memilih lebih dari satu tipe elemen dan mengaplikasikan sebuah rule set untuk semua tipe elemen. Untuk melakukannya, kamu dapat menuliskan lebih dari satu selector dipisahkan dengan tanda koma. Sebagai contoh:
Beragam tipe selector
Ada banyak sekali tipe selector yang berbeda. Di atas, kita hanya mempelajari element selectors, yang memilih seluruh elemen dari tipe yang diberikan di dokumen HTML yang diberikan. Namun kita dapat membuat pilihan yang lebih spesifik daripada itu. Berikut adalah beberapa tipe selector lain yang sering dijumpai:
Fonts dan teks
Setelah mengeksplor dasar-dasar CSS, mari kita tambahkan aturan-aturan lain dan informasi pada file style.css kita agar contoh yang kita buat memiliki tampilan yang lebih baik. Kita dapat memulai dengan membuat fonts dan teks kita untuk terlihat sedikit lebih baik.
Pertama-tama, kembalilah dan temukan keluaran dari Google Fonts yang kamu simpan di tempat yang aman. Tambahkan elemen <link> di suatu tempat pada bagian head dari index.html kamu (di manapun di antara tag <head> dan </head>). Elemen link tersebut akan terlihat seperti ini:
Selanjutnya, hapus aturan yang sudah ada yang kamu miliki di file style.css.
Tambahkan baris berikut, dan ubah baris placeholder dengan font-family sungguhan yang kamu dapatkan dari Google Fonts. (font-family berarti jenis font yang ingin kamu gunakan untuk teks.) Aturan ini mengatur jenis font dan ukuran font dasar secara global untuk seluruh halaman (karena <html> merupakan parent element dari seluruh halaman, dan semua elemen di dalam halaman tersebut mewarisi font-size dan font-family yang sama):
Catatan: Apapun yang ada di dalam sebuah dokumen CSS antara /* dan */ adalah komentar CSS, yang akan diabaikan oleh browser ketika browser sedang mengolah kode untuk ditampilkan. Komentar berguna bagi kamu untuk menulis catatan-catatan yang membantu terkait apa yang sedang kamu lakukan.
Sekarang kita akan menentukan font size untuk elemen-elemen berisi teks yang ada di dalam body HTML (<h1>, <li>, dan <p>). Kita juga akan menengahkan posisi teks pada heading dan menentukan line height serta letter spacing pada konten bagian body agar dapat lebih mudah dibaca:
