Pertemuan 3 – Pengenalan dan Penerapan Dasar-dasar CSS

← Kembali ke Beranda

Tujuan Pembelajaran

Mahasiswa diharapkan memahami fungsi CSS dalam styling halaman web, menguasai selector dan properti dasar, serta mampu menerapkan CSS dalam tiga jenis (inline, internal, external) untuk membuat tampilan yang menarik dan konsisten.

Pengenalan CSS: Apa dan Mengapa Diperlukan?

CSS (Cascading Style Sheets) adalah bahasa untuk mengatur tampilan halaman web. Bayangkan HTML sebagai kerangka rumah, maka CSS adalah cat dan dekorasinya. Tanpa CSS, web akan tampil polos dan tidak menarik. CSS memisahkan struktur (HTML) dari presentasi, membuat kode lebih rapi dan mudah diubah. Dikembangkan oleh W3C, CSS memungkinkan kontrol warna, font, layout, dan animasi.

CSS penting untuk user experience: membuat web responsif, aksesibel, dan profesional. Misalnya, mengubah warna tombol atau menyelaraskan teks.

Selector, Properti, dan Jenis CSS

Selector adalah "target" elemen HTML yang ingin di-styling, seperti tag (h1), class (.myclass), atau ID (#myid). Properti adalah atribut styling, seperti color atau font-size. Jenis CSS: Inline (di tag HTML), Internal (di <style> head), External (file .css terpisah – paling direkomendasikan untuk maintainability).

  • Selector Dasar: Tag (h1 { color: red; }), Class (.btn { background: blue; }), ID (#header { text-align: center; }). Gunakan class untuk reusable styling.
  • Properti Umum: color (warna teks), font-size (ukuran font), margin/padding (spasi), background (latar belakang).
  • Jenis CSS: Inline cepat tapi berantakan; Internal untuk halaman tunggal; External untuk proyek besar.

Langkah penerapan: 1) Pilih selector, 2) Tambah properti dalam {}, 3) Link file CSS di HTML.

Contoh Kode CSS Lengkap

/* External CSS (style.css) */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
    text-align: center;
}

.btn {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

/* Inline: <h1 style="color: red;"> */
/* Internal: <style> h1 { color: blue; } </style> */

Tips Praktis

  • Gunakan external CSS untuk proyek besar, hindari inline agar kode bersih.
  • Test di browser dev tools untuk melihat perubahan real-time.
  • Belajar specificity: ID > Class > Tag, untuk menghindari konflik styling.

Ringkasan

CSS mengubah HTML menjadi web yang cantik dan fungsional. Dengan selector dan properti, Anda bisa kontrol tampilan penuh. External CSS adalah best practice untuk kolaborasi.

Latihan

1. Buat file CSS eksternal, styling halaman HTML dengan warna, font, dan button. 2. Coba inline dan internal, bandingkan kelebihannya. 3. Diskusikan: Mengapa CSS penting untuk web modern?