Belajar CSS dari Nol untuk pemula

Materi Pertemuan 1: Pembelajaran CSS Dasar

Materi Awal untuk Pemula

1. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan desain halaman website. CSS tidak bisa berdiri sendiri, melainkan bekerja bersama HTML.

Jika dianalogikan:

• HTML = rangka bangunan
• CSS = cat, dekorasi, tata letak

Tanpa CSS, website akan terlihat polos, hitam-putih, dan tidak menarik.

2. Fungsi CSS Secara Detail

CSS digunakan untuk:

• Mengubah warna teks dan latar belakang
• Mengatur ukuran tulisan agar mudah dibaca
• Mengatur jarak antar elemen
• Membuat website terlihat rapi dan konsisten
• Menghemat penulisan kode HTML

Dengan CSS, satu aturan bisa digunakan untuk banyak elemen sekaligus.

3. Cara Kerja CSS (Penjelasan Pemula)

CSS bekerja dengan cara memilih elemen HTML, lalu memberikan aturan gaya.

Struktur CSS terdiri dari:

1. Selector → elemen yang dipilih
2. Property → jenis pengaturan
3. Value → nilai pengaturan

p {
  color: red;
}
  

Artinya: semua tag <p> akan berwarna merah.

4. Struktur HTML Dasar (Wajib Dipahami)

CSS tidak akan bekerja tanpa HTML. Oleh karena itu, kita perlu mengenal elemen dasar HTML.

• <h1> → Judul utama
• <p> → Paragraf
• <ul> → List tidak berurutan
• <ol> → List berurutan
• <li> → Isi list
• <div> → Pembungkus

5. Cara Menambahkan CSS ke HTML

a. CSS Internal

CSS ditulis langsung di dalam file HTML pada tag <style>. Cara ini cocok untuk latihan awal.

b. CSS External (Pengenalan)

CSS disimpan di file terpisah agar kode rapi dan profesional.

<link rel="stylesheet" href="style.css">
  

6. CSS Dasar yang Wajib Dikuasai Pemula

Warna Teks

p {
  color: blue;
}
  

Ukuran Font

p {
  font-size: 16px;
}
  

Background

body {
  background-color: #f1f5f9;
}
  

Margin dan Padding

div {
  margin: 10px;
  padding: 15px;
}
  

6.4 Margin dan Padding (Penjelasan Lengkap untuk Pemula)

Margin dan Padding adalah properti CSS yang sangat penting untuk mengatur jarak antar elemen. Hampir semua tampilan website rapi karena penggunaan margin dan padding.

Apa Perbedaan Margin dan Padding?

• Margin → mengatur jarak di luar elemen
• Padding → mengatur jarak di dalam elemen

Jika dianalogikan:

• Margin = jarak antar kotak
• Padding = jarak teks dengan dinding kotak

Contoh Visual Sederhana

Bayangkan sebuah kotak pengumuman:

• Padding membuat teks tidak menempel ke pinggir kotak
• Margin memberi jarak antara kotak pengumuman dengan elemen lain

Contoh CSS Margin

Contoh berikut memberi jarak 20px di luar elemen div:

div {
  margin: 20px;
}
  

Artinya: semua sisi (atas, kanan, bawah, kiri) memiliki jarak 20px dari elemen lain di sekitarnya.

Contoh CSS Padding

Contoh berikut memberi jarak 15px di dalam elemen div:

div {
  padding: 15px;
}
  

Artinya: teks di dalam elemen tidak menempel langsung ke tepi kotak.

Mengatur Margin dan Padding Per Sisi

Kita juga bisa mengatur jarak secara spesifik untuk setiap sisi:

div {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}
  

div {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
}
  

Penulisan Singkat (Shorthand)

CSS menyediakan cara singkat untuk menulis margin dan padding:

div {
  margin: 10px 20px;
}
  

Artinya:

• 10px → atas dan bawah
• 20px → kiri dan kanan

div {
  padding: 10px 15px 20px 25px;
}
  

Urutannya adalah:

1. Atas
2. Kanan
3. Bawah
4. Kiri

Contoh Penerapan Nyata

Contoh penggunaan margin dan padding pada kotak pengumuman sekolah:

.box-contoh {
  background-color: #e0f2fe;
  border: 2px solid #38bdf8;
  padding: 15px;
  margin-top: 20px;
}
  

Dengan pengaturan di atas:

• Teks terlihat rapi dan mudah dibaca
• Kotak tidak menempel dengan elemen lain
• Tampilan website terlihat profesional

Kesalahan Umum Pemula

• Menyamakan fungsi margin dan padding
• Lupa menambahkan satuan (px, em, rem)
• Terlalu besar memberi margin sehingga tampilan berantakan

Tips: Gunakan margin dan padding secukupnya agar tampilan tetap rapi dan nyaman dilihat.

7. Contoh Penerapan Nyata

CSS sering digunakan pada website sekolah, toko online, blog, dan dashboard admin.

Pengumuman Sekolah

Pembayaran SPP bulan ini dapat dilakukan hingga tanggal 30. Silakan hubungi admin sekolah jika mengalami kendala.

8. Kesalahan Umum Pemula

• Lupa titik koma (;)
• Salah menulis selector
• Tidak menutup kurung kurawal
• CSS tidak terhubung ke HTML

9. Kesimpulan Materi Pertemuan 1

Pada pertemuan pertama ini, kita sudah memahami konsep dasar CSS, fungsi, cara kerja, serta contoh penerapan sederhana. Materi ini menjadi fondasi penting sebelum masuk ke selector lanjutan, class, ID, dan layout.

© 2026 Materi Pembelajaran CSS Dasar