Mempercantik Web dengan CSS 🎨
Website-mu sudah ada kerangkanya. Sekarang saatnya beri warna, font keren, dan layout yang rapi! CSS adalah "cat dan dekorasi" untuk rumah web-mu.
CSS Itu Apa?
CSS (Cascading Style Sheets) adalah bahasa untuk mengatur tampilan elemen HTML — warna, ukuran font, spasi, layout, animasi, dan masih banyak lagi. Tanpa CSS, semua website terlihat seperti dokumen teks hitam-putih biasa!
Cara Menulis CSS
Ada 3 cara menyisipkan CSS ke HTML:
<p style="color:red">
Langsung di dalam tag. Hindari untuk proyek besar.
<style> di dalam <head>
Tulis CSS di dalam tag <style> di bagian head.
<link href="style.css">
File CSS terpisah. Cara terbaik untuk proyek nyata!
Struktur Penulisan CSS
/* Selector { property: value; } */
h1 {
color: #6366f1; /* warna teks */
font-size: 2rem; /* ukuran huruf */
text-align: center; /* rata tengah */
}
p {
color: #475569; /* abu-abu sedang */
line-height: 1.7; /* jarak antar baris */
margin-bottom: 1rem; /* jarak bawah */
}
.kartu {
background: white; /* warna latar */
padding: 20px; /* jarak dalam */
border-radius: 12px; /* sudut membulat */
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
Properti CSS yang Paling Sering Dipakai
color
color: #333
Warna teks
background
background: #f0f9ff
Warna/gambar latar belakang
font-size
font-size: 1.2rem
Ukuran huruf
font-family
font-family: 'Poppins'
Jenis font
padding
padding: 16px
Jarak antara konten dan tepi elemen
margin
margin: 0 auto
Jarak antara elemen dengan elemen lain
border-radius
border-radius: 8px
Membuat sudut elemen membulat
display
display: flex
Cara elemen ditampilkan (flex/block/grid)
Proyek: Percantik Halaman Profil
Lanjutkan proyek profil dari materi sebelumnya! Tambahkan file style.css di folder yang sama:
/* style.css */
body {
font-family: 'Segoe UI', sans-serif;
background: #f8fafc;
color: #334155;
max-width: 700px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: #6366f1;
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
h2 {
color: #334155;
border-bottom: 3px solid #6366f1;
padding-bottom: 0.5rem;
margin-top: 2rem;
}
img {
border-radius: 50%; /* foto jadi lingkaran */
border: 4px solid #6366f1;
width: 150px;
height: 150px;
object-fit: cover;
}
ul {
background: white;
padding: 1rem 1rem 1rem 2rem;
border-radius: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
Sambungkan ke HTML dengan menambahkan di bagian <head>:
<link rel="stylesheet" href="style.css">
🌈 Sumber Warna Gratis
Bingung pilih warna yang cocok? Coba coolors.co untuk membuat palet warna harmonis, atau color.adobe.com untuk eksplorasi kombinasi warna!
Ringkasan 📝
- CSS mengatur tampilan visual: warna, ukuran, spasi, layout
- Struktur CSS:
selector { property: value; } - Gunakan file CSS eksternal (
style.css) untuk proyek yang rapi - Properti terpenting: color, background, font-size, padding, margin, border-radius