Scribd
Unggah
9 tayangan3 halaman

Modul Pemrograman Website Bab3

Modul ini membahas dasar-dasar CSS, termasuk fungsi, cara menyisipkan, dan sintaks dasar. Peserta didik diharapkan dapat menggunakan CSS untuk memperindah tampilan halaman web. Terdapat juga latihan dan tugas praktik untuk mengaplikasikan pengetahuan yang diperoleh.

Diunggah oleh

Nur Aeni
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
9 tayangan3 halaman

Modul Pemrograman Website Bab3

Modul ini membahas dasar-dasar CSS, termasuk fungsi, cara menyisipkan, dan sintaks dasar. Peserta didik diharapkan dapat menggunakan CSS untuk memperindah tampilan halaman web. Terdapat juga latihan dan tugas praktik untuk mengaplikasikan pengetahuan yang diperoleh.

Diunggah oleh

Nur Aeni
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

MODUL PEMROGRAMAN WEBSITE

BAB 3 – CSS Dasar

A. Tujuan Pembelajaran
Setelah mempelajari bab ini, peserta didik diharapkan mampu:
1. Menjelaskan fungsi CSS dalam pembuatan website.
2. Menuliskan sintaks dasar CSS.
3. Menggunakan CSS untuk memperindah tampilan halaman web.

B. Uraian Materi

1. Pengertian CSS
CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan
layout dari elemen HTML di halaman web.

2. Cara Menyisipkan CSS


1) Inline CSS: di dalam tag HTML, contoh:
<p style="color:blue;">Teks Biru</p>

2) Internal CSS: di dalam tag <style> di bagian <head>:


<style>
p { color: green; }
</style>

3) External CSS: file terpisah dengan ekstensi .css:


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

3. Sintaks Dasar CSS


CSS terdiri dari selektor dan deklarasi:
Selektor { properti: nilai; }
Contoh:
body { background-color: lightblue; }
h1 { color: navy; font-size: 30px; }

4. Properti Umum dalam CSS


- Warna: color, background-color
- Font: font-family, font-size
- Border: border, border-radius
- Spasi: margin, padding
- Ukuran: width, height
5. Contoh Penggunaan CSS
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: #f0f0f0; }
h1 { color: darkblue; }
p { font-size: 18px; }
</style>
</head>
<body>
<h1>Profil</h1>
<p>Ini adalah halaman profil saya dengan CSS.</p>
</body>
</html>

C. Latihan
1. Pilihan Ganda

1) Fungsi dari properti "background-color" adalah...


a. Mengubah warna teks
b. Mengubah warna latar
c. Mengubah jenis font
d. Mengubah ukuran teks

2) Cara penulisan selektor CSS yang benar adalah...


a. color: red { h1; }
b. h1: color = red;
c. h1 { color: red; }
d. red: color { h1 }

2. Essay Singkat

1) Jelaskan perbedaan antara inline, internal, dan external CSS!


2) Tulis kode CSS untuk membuat teks berwarna merah, ukuran 20px, dan rata tengah.

3. Tugas Praktik

- Tambahkan desain menggunakan CSS pada halaman profil HTML yang sudah dibuat di
BAB 2, seperti:
• Warna latar belakang
• Warna teks
• Ukuran dan jenis font
• Spasi (margin dan padding)
D. Penilaian
Aspek yang Dinilai Skor Maksimum
Pemahaman sintaks CSS 30
Jawaban latihan benar 40
Tugas praktik lengkap 30
Total 100

E. Catatan Guru
- Gunakan perbandingan visual antara HTML tanpa CSS dan dengan CSS agar siswa paham
manfaatnya.
- Dorong siswa untuk mengeksplor warna dan kombinasi font agar lebih kreatif.
- Ajarkan debugging CSS jika tidak muncul sesuai harapan.

Anda mungkin juga menyukai