Level 6
Pertemuan 4

Cover

Melanjutkan pembelajaran tentang teknologi web dan pengembangan website.

Gallery

What is CSS?

🎨 Apa itu CSS?

  • CSS = Cascading Style Sheets
  • Bahasa untuk styling & presentation
  • Mengontrol warna, font, spacing, layout
  • Membuat website terlihat cantik & profesional
Analogi: HTML = Kerangka rumah, CSS = Cat, furniture, dekorasi

CSS Basics

📐 CSS Syntax

h1 {
   color : #333 ;
   font-size : 36px ;
   text-align : center ;
}
Struktur:
• h1 = Selector (elemen yang di-style)
• color = Property
• #333 = Value

Colors

🌈 Warna di CSS

Color Names: red, blue, green
color: blue;
Hex Codes: #FF5733, #667eea
color: #667eea;
RGB: rgb(255,87,51)
color: rgb(102, 126, 234);

Pro Tip: Gunakan coolors.co untuk menemukan kombinasi warna yang bagus!

Fonts

✏️ Font & Typography

font-family: Pilih jenis huruf
font-family: Arial, sans-serif;
font-size: Ukuran huruf
font-size: 16px; (atau 1em, 1.5rem)
line-height: Jarak antar baris (readability)
line-height: 1.6;
Populer fonts: Arial, Helvetica, Georgia, Courier, Verdana

Full Example

💻 Complete CSS Example

body {
   background-color : #f0f0f0 ;
   font-family : Arial, sans-serif ;
   font-size : 16px ;
   line-height : 1.6 ;
}

h1 {
   color : #333 ;
   font-size : 36px ;
   text-align : center ;
}

.artwork h3 {
   color : #667eea ;
}

Activity

🎯 Your Activity

  1. Buat file CSS baru atau update existing stylesheet
    Save sebagai styles.css dalam folder project
  2. Style body dan headings
    Pilih background color, font, ukuran text
  3. Buat color palette
    Pilih 3 warna yang harmonis untuk website
  4. Link CSS ke HTML
    <link rel="stylesheet" href="styles.css"> di head tag
  5. Test & Celebrate!
    Open di browser → Website kalian mulai cantik! ✨