Cara Mengatur Warna, Font dan Background di CSS | Belajar CSS Dasar + Job Sheet
Pelajari cara mengatur warna, font, dan background di CSS dengan mudah. Cocok untuk pemula yang ingin memahami tampilan website melalui CSS.
Cara Mengatur Warna, Font dan Background di CSS | Belajar CSS Dasar
Cara Mengatur Warna, Font dan Background di CSS
CSS (Cascading Style Sheets) memungkinkan kita untuk mengatur tampilan halaman web — seperti warna teks, jenis huruf, dan warna latar belakang. Ini membantu membuat website terlihat menarik dan mudah dibaca.
🎨 Apa yang Bisa Diatur?
color – untuk warna teks
font-family – untuk jenis huruf
font-size – untuk ukuran huruf
background-color – untuk warna latar belakang
📦 Contoh CSS: Warna, Font, dan Background
Kode di bawah ini akan mengubah warna teks, font, dan latar belakang sebuah paragraf:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: white;
background-color: #007bff;
font-family: 'Segoe UI', sans-serif;
font-size: 18px;
padding: 10px;
}
</style>
</head>
<body>
<p>Teks ini memiliki warna putih, background biru, dan font modern.</p>
</body>
</html>
🔄 Coba Jalankan:
🎯 Kesimpulan
color mengatur warna teks
background-color mengatur warna latar belakang
font-family dan font-size menentukan gaya dan ukuran huruf
Semua ini membuat tampilan website jadi lebih menarik dan enak dibaca
🧪 Latihan Interaktif
Edit kode di bawah untuk mencoba warna, font, dan background favorit kamu!
📝 Tugas Praktik Mandiri
Buat file HTML baru dan tambahkan tag <style> di dalamnya
Gunakan color, background-color, dan font-family
Ubah tampilan teks dan latar belakang sesuai kreativitas kamu
Simpan dan buka di browser untuk melihat hasilnya
Bonus: Tambahkan lebih dari 1 elemen (misalnya: heading, paragraf, dan daftar) dan beri gaya berbeda pada masing-masing!
---
Contoh HTML + Inline CSS
Keterangan Fungsi
<p style="color: red;">Teks ini berwarna merah</p>
➤ Job Sheet 3: Membuat Halaman Profil dengan HTML dan CSS (Inline & Internal CSS)
Tujuan Pembelajaran
Memahami perbedaan dan penggunaan CSS Inline dan Internal
Mengatur tampilan halaman HTML menggunakan CSS
Mendesain halaman profil yang lebih menarik
Deskripsi Tugas
Buat sebuah halaman profil pribadi menggunakan kombinasi HTML dan CSS (Inline dan Internal). Halaman harus menampilkan informasi pribadi dan diatur dengan tampilan warna dan layout yang rapi.
Gunakan internal CSS di bagian <style> dalam tag <head>
Gunakan inline CSS pada elemen tertentu seperti gambar atau teks
File diberi nama: profil-css.html
Langkah Pengerjaan
Buka text editor dan buat file bernama profil-css.html
Tambahkan struktur dasar HTML
Tambahkan CSS internal di dalam tag <style>
Terapkan CSS inline untuk elemen gambar atau teks tertentu
Simpan dan lihat hasil di browser
Checklist Penilaian
No
Kriteria
✔/✘
1
File bernama profil-css.html
2
Menggunakan internal CSS di dalam <style>
3
Menggunakan inline CSS minimal 1 elemen
4
Teks judul ditata dengan warna dan ukuran
5
Gambar diatur ukuran dan posisi
6
Daftar hobi ditata dengan CSS
7
Tampilan halaman rapi dan mudah dibaca
Contoh Hasil Akhir
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil dengan CSS</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
padding: 20px;
}
h1 {
color: #007bff;
}
ul {
background-color: #e7f0ff;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Nur Yono</h1>
<p style="font-size: 16px;">Saya adalah pelajar yang sedang belajar HTML dan CSS.</p>
<img src="https://via.placeholder.com/150" alt="Foto Profil" style="border-radius: 10px; width: 150px;">
<h2>Hobi Saya</h2>
<ul>
<li>Ngoding</li>
<li>Desain Grafis</li>
<li>Menonton Film</li>
</ul>
</body>
</html>
➤ Job Sheet 4: Mendesain Halaman Tentang Saya dengan HTML dan CSS (Internal CSS)
Tujuan Pembelajaran
Memahami penggunaan internal CSS untuk mendesain halaman
Mengenal properti CSS seperti background, padding, margin, border, font
Membuat halaman “Tentang Saya” yang tertata rapi dan menarik
Deskripsi Tugas
Buat sebuah halaman "Tentang Saya" menggunakan HTML dan internal CSS untuk mengatur tampilan. Halaman berisi informasi pribadi dan disusun dengan layout sederhana yang estetik.
Gunakan internal CSS di bagian <style> dalam tag <head>
Tambahkan gaya visual: warna latar, font, padding, margin, border, dan pengaturan teks
File diberi nama: tentang-saya.html
Langkah Pengerjaan
Buka text editor dan buat file tentang-saya.html
Buat struktur dasar HTML dengan elemen: div, h1, h2, p, ul, li, img
Tambahkan CSS internal untuk mengatur tampilan halaman
Simpan dan buka di browser untuk melihat hasilnya
Checklist Penilaian
No
Kriteria
✔/✘
1
File bernama tentang-saya.html
2
Menggunakan internal CSS dalam tag <style>
3
Latar belakang halaman diatur dengan CSS
4
Teks judul ditata dengan CSS
5
Gambar ditampilkan dan ditata
6
Layout menggunakan padding dan margin
7
Font diatur dengan CSS
8
Tampilan rapi dan informatif
Contoh Hasil Akhir
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Tentang Saya</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
color: #333;
padding: 30px;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
max-width: 600px;
margin: auto;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #007bff;
}
p {
line-height: 1.6;
}
img {
display: block;
margin: 10px auto;
border-radius: 8px;
}
ul {
padding-left: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Tentang Saya</h1>
<p><strong>Nama:</strong> Nur Yono</p>
<p><strong>Asal Sekolah:</strong> SMK Negeri 1 Ambarawa</p>
<p><strong>Deskripsi:</strong> Saya suka belajar hal baru, terutama dalam bidang desain dan teknologi.</p>
<img src="https://via.placeholder.com/200" alt="Foto Profil" width="200">
<h2>Hobi</h2>
<ul>
<li>Membuat desain grafis</li>
<li>Menulis blog</li>
<li>Membaca buku teknologi</li>
</ul>
</div>
</body>
</html>
