Bab 28: CSS Playground

Quiz

🎨 Playground

Materi

Worksheet

Soal 1 dari 10Skor: 0

dari 10

Benar

Salah

🎨 Selamat datang di CSS Playground!
Ubah warna, font, dan ukuran di panel kiri — lihat hasilnya langsung berubah di preview sebelah kanan. Kode CSS yang kamu buat akan muncul di bawah, siap di-copy!

🎨 Warna

Background

#FFFBEB

Warna Judul

#0D9488

Warna Teks

#374151

✏️ Font

Jenis Font

Ukuran Judul

28px

Ukuran Teks

15px

Tebal Judul

⚡ Preset Tema

preview.html

Tentang Saya

Halo! Nama saya siswa kelas 9. Saya suka belajar coding dan membuat website keren!

Hobi saya membaca buku, bermain game, dan menggambar.

🎮 Gaming
📚 Membaca
🎨 Menggambar

Dibuat dengan HTML & CSS ✨

📋 Kode CSS yang Dihasilkan

💡 Tahukah Kamu?
Bayangkan HTML seperti kerangka rumah — dinding, pintu, dan jendela sudah berdiri, tapi belum dicat. CSS adalah "cat dan dekorasi" itu. Dengan CSS, halaman HTML yang polos bisa diubah menjadi tampilan berwarna, rapi, dan menarik!

A. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang mengatur tampilan visual halaman HTML — seperti warna, ukuran, jenis huruf, jarak antar elemen, dan tata letak.

CSS bekerja dengan cara "menunjuk" elemen HTML mana yang ingin diberi style, lalu menentukan aturan tampilannya:

selector {
  property: value;
}

/* Contoh: */
h1 {
  color: blue;
  font-size: 32px;
}

🎯 Selector = elemen yang ditunjuk (h1, p, body) · Property = apa yang diubah (color, font-size) · Value = nilainya (blue, 32px)

B. Mengubah Warna

Property	Fungsi	Contoh
color	Warna teks	color: #0D9488;
background-color	Warna latar elemen	background-color: #FCD34D;

Warna bisa ditulis dengan nama (red, blue), kode HEX (#FF0000), atau RGB (rgb(255,0,0)).

C. Mengatur Font

Property	Fungsi	Contoh
font-size	Ukuran teks	font-size: 18px;
font-family	Jenis huruf	font-family: Arial, sans-serif;
font-weight	Ketebalan huruf	font-weight: bold;

D. Tiga Cara Menulis CSS

1. Inline — langsung di dalam tag HTML

<p style="color:red;">Teks merah</p>

2. Internal — di dalam tag <style> pada <head>

<head>
  <style>
    p { color: red; }
  </style>
</head>

3. External — file .css terpisah ⭐

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

⭐ Cara External paling disarankan karena memisahkan struktur (HTML) dan tampilan (CSS) — kode lebih rapi dan mudah dirawat!

📝 Jawab pertanyaan berikut berdasarkan materi CSS Dasar. Pilih kelas dan namamu, lalu isi jawaban.

Kelas

Nama

Soal 1

Jelaskan apa itu CSS dan apa fungsinya dalam pembuatan halaman web!

Soal 2

Apa perbedaan antara color dan background-color? Berikan contoh penulisannya!

Soal 3

Sebutkan dan jelaskan tiga cara menulis CSS (inline, internal, external)! Cara mana yang paling disarankan dan mengapa?

Soal 4

Tuliskan kode CSS untuk membuat semua paragraf (<p>) memiliki warna abu-abu tua dan ukuran font 14px!

Soal 5

Buka tab Playground, buat tema warna favoritmu, lalu copy kode CSS yang dihasilkan dan paste di sini!