Belajar CSS Lengkap untuk Pemula
Penjelasan Setiap Bagian Kode HTML dan CSS + Latihan Tugas Kelas
1. Apa Itu CSS?
CSS adalah singkatan dari Cascading Style Sheets. CSS digunakan untuk mengatur tampilan elemen-elemen dalam halaman HTML. Kalau HTML itu seperti kerangka tubuh manusia, maka CSS adalah bajunya — membuat tampilan lebih indah, rapi, dan menarik.
2. Hubungan HTML dan CSS
HTML membuat struktur halaman, sedangkan CSS mengatur bagaimana tampilan struktur itu di layar. Contohnya, HTML membuat teks paragraf, CSS yang menentukan warna, ukuran, dan posisi teks tersebut.
3. Struktur Dasar CSS
selector {
property: value;
}
- Selector: elemen HTML yang ingin diubah gayanya (misal:
h1,p). - Property: jenis gaya yang diatur (misal:
color,font-size). - Value: nilai dari properti tersebut (misal:
red,20px).
4. Contoh Kode CSS
p {
color: blue;
font-size: 18px;
}
Artinya: semua teks di dalam tag <p> akan berwarna biru dan berukuran huruf 18 piksel.
5. Tiga Cara Menulis CSS
a. Inline CSS
<p style="color: red;">Ini teks berwarna merah</p>
CSS ditulis langsung di dalam tag HTML menggunakan atribut style.
Kelebihannya cepat, tapi tidak efisien kalau banyak elemen.
b. Internal CSS
<style>
h1 {
color: blue;
}
</style>
CSS ditulis di bagian <head> dalam dokumen HTML.
Cocok untuk halaman kecil dengan satu desain.
c. External CSS
<link rel="stylesheet" href="style.css">
CSS disimpan di file terpisah bernama style.css.
Metode ini paling umum digunakan untuk website besar.
6. Penjelasan Lengkap Struktur HTML + CSS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
text-align: center;
}
p {
color: yellow;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Halo Dunia CSS!</h1>
<p>Belajar CSS itu menyenangkan.</p>
</body>
</html>
Penjelasan Setiap Bagiannya:
<!DOCTYPE html>: Memberi tahu browser bahwa dokumen ini menggunakan HTML5.<html>: Awal dari halaman HTML.<head>: Bagian kepala dokumen, berisi informasi seperti judul dan CSS.<style>: Tempat menulis kode CSS internal.h1 { color: green; }: Mengubah warna teksh1menjadi hijau.p { color: yellow; }: Mengubah warna teks paragraf menjadi kuning.<body>: Bagian isi halaman yang tampil di layar.<h1>...</h1>: Menampilkan teks besar sebagai judul.<p>...</p>: Menampilkan teks paragraf.
7. Tips Menentukan Warna CSS
Kamu bisa menggunakan nama warna (seperti green, yellow), atau kode warna seperti #00FF00 (hijau) dan #FFFF00 (kuning).
Untuk melihat semua daftar warna dan kodenya, kamu bisa kunjungi:
- HTMLColorCodes.com – lengkap dengan contoh warna dan nilai HEX/RGB.
- Color Hunt – kumpulan palet warna estetik.
- Coolors.co – generator kombinasi warna profesional.
8. 💻 Latihan Tugas Kelas
Sekarang saatnya kamu praktik membuat halaman HTML dan CSS sederhana!
Tugas:
- Buka teks editor (Code Studio, Acode, Visual Code, dll).
- Buat file baru dengan nama tugas-css.html.
- Ubah dan tulis kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Tugas CSS Kelas</title>
<style>
h1 {
color: green; /* Judul berwarna hijau */
text-align: center;
}
p {
color: yellow; /* Paragraf berwarna kuning */
background-color: black; /* Latar belakang hitam agar teks terlihat jelas */
padding: 10px;
}
</style>
</head>
<body>
<h1>Latihan CSS Saya</h1>
<p>Ini adalah tugas latihan membuat warna hijau dan kuning.</p>
</body>
</html>
Langkah Penilaian:
- Buka file tersebut di browser.
- Pastikan judul (h1) berwarna biru.
- Pastikan paragraf (p) berwarna ungu.
- Screenshot hasil tampilan dan kirim ke grup sebagai bukti tugas.
- Tampilan website boleh melanjutkan hasil portofolio Website yang telah dibuat sebelumnya, tinggal tambahkan css dan ubah kodenya
9. Kesimpulan
CSS membantu kita membuat halaman web yang lebih menarik dan profesional. Dengan memahami setiap bagian kodenya — mulai dari selector, property, hingga value kamu bisa mengubah tampilan apa pun di halaman web. Teruslah berlatih, karena semakin sering kamu mencoba, semakin mahir kamu dalam mendesain website dengan CSS!
Selamat belajar dan selamat berkarya! 🎨💻
0 Comments