Pengenalan HTML 12
Membuat Stylesheet (CSS)
oleh: Suryo Adhy Chandra, ST
Pada materi sebelumnya kita sudah belajar membuat tampilan dengan bantuan Bootstrap. Sekarang saatnya kita membuat stylesheet (CSS) sendiri supaya tampilan halaman bisa diatur sesuai kebutuhan kita.
1. Apa itu CSS?
CSS singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur tampilan elemen HTML, seperti warna, ukuran huruf, jarak, border, dan posisi.
Kalau HTML adalah struktur halaman, maka CSS adalah bagian yang membuat halaman itu terlihat lebih rapi, menarik, dan mudah dibaca.
Ada 3 cara menulis CSS:
| Cara | Di mana ditulis | Contoh |
|---|---|---|
| Inline | Langsung di dalam tag HTML | <p style="color:red;"> |
| Internal | Di dalam tag <style> pada bagian <head> |
<style> p { color: red; } </style> |
| External | Di file terpisah .css |
<link rel="stylesheet" href="style.css"> |
2. Mengapa menggunakan class style?
Bayangkan kamu punya beberapa paragraf yang semuanya harus berwarna biru dan berukuran 18px. Kalau memakai inline style, kode akan berulang terus.
Solusi yang lebih rapi adalah membuat class style di dalam stylesheet, lalu class itu bisa dipakai berkali-kali.
Keunggulan class style:
- Style cukup ditulis sekali lalu dipakai berulang
- Kalau ingin mengubah tampilan, cukup ubah di satu tempat
- Kode HTML jadi lebih bersih dan mudah dibaca
- Satu class bisa dipakai banyak elemen sekaligus
.teks-biru.
Saat dipakai di HTML, cukup tulis class="teks-biru" tanpa titik.
3. Contoh penggunaan class pada div, p, dan span
Class bisa dipakai hampir di semua tag HTML. Tiga tag yang sering dipakai adalah
<div>, <p>, dan <span>.
Class pada <div>
Hasil:
Class pada <p>
Hasil:
Ini judul artikel
Class pada <span>
Hasil:
Jangan lupa disimpan ya!
4. Kesimpulan