Pengenalan CSS & Cara Menghubungkannya ke HTML

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Memahami apa itu CSS dan fungsinya
Menghubungkan file CSS ke HTML dengan tiga cara berbeda
Memahami struktur dasar aturan CSS (selector, property, value)

Materi Singkat

Di Modul HTML kamu sudah membangun "kerangka rumah". Sekarang di Modul CSS, saatnya mengecat dinding, memasang wallpaper, dan mendekorasi ruangan. CSS adalah bahasa yang mengontrol tampilan visual halaman web.

CSS singkatan dari Cascading Style Sheets. Kata "Cascading" (air terjun) merujuk pada cara aturan CSS diterapkan berlapis-lapis dari atas ke bawah — aturan yang lebih spesifik akan "menang" atas aturan yang lebih umum.

Struktur Aturan CSS

Satu aturan CSS terdiri dari:

selector {
  property: value;
}

Selector — elemen mana yang ingin kamu ubah (contoh: p, h1, body)
Property — aspek apa yang ingin diubah (contoh: color, font-size, background-color)
Value — nilai yang diberikan (contoh: red, 16px, #ffffff)

Contoh nyata:

p {
  color: blue;
  font-size: 18px;
}

Artinya: "Semua <p> harus berwarna biru dengan ukuran font 18 pixel."

Tiga Cara Menghubungkan CSS ke HTML

1. External CSS (disarankan) File CSS terpisah, dihubungkan dengan <link> di <head>:

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

Ini cara terbaik — satu file CSS bisa dipakai untuk banyak halaman.

2. Internal CSS CSS ditulis langsung di <head> menggunakan tag <style>:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

Cocok untuk eksperimen cepat, tapi tidak efisien untuk proyek besar.

3. Inline CSS CSS ditulis langsung di elemen menggunakan atribut style:

<p style="color: green; font-size: 20px;">Teks ini hijau.</p>

Hindari sebisa mungkin — sulit di-maintain dan tidak bisa di-reuse.

Contoh Kode

Buat dua file: index.html dan style.css.

index.html:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf pertama. Warnanya berubah karena CSS!</p>
    <p>Ini adalah paragraf kedua.</p>
  </body>
</html>

style.css:

body {
  background-color: #f5f5f5;
}
 
h1 {
  color: #2563eb;
  font-size: 32px;
}
 
p {
  color: #333333;
  font-size: 16px;
}

Tugas Kecil

Buat folder baru bernama belajar-css
Di dalamnya, buat index.html dengan struktur HTML5 lengkap yang berisi: <h1>, <h2>, dan 2 <p>
Buat file style.css di folder yang sama
Hubungkan keduanya dengan <link> di <head>
Di style.css, tulis aturan yang mengubah:
- Warna latar halaman (body) menjadi warna pilihanmu (cari kode hex warna di coolors.co)
- Warna teks h1 menjadi warna accent (contoh: #2563eb)
- Ukuran font p menjadi 18px
Buka index.html di browser — apakah CSS-nya berhasil?

Tujuan Belajar

Setelah pelajaran ini, kamu akan bisa:

Memahami apa itu CSS dan fungsinya
Menghubungkan file CSS ke HTML dengan tiga cara berbeda
Memahami struktur dasar aturan CSS (selector, property, value)

Materi Singkat

Struktur Aturan CSS

Satu aturan CSS terdiri dari:

selector {
  property: value;
}

Selector — elemen mana yang ingin kamu ubah (contoh: p, h1, body)
Property — aspek apa yang ingin diubah (contoh: color, font-size, background-color)
Value — nilai yang diberikan (contoh: red, 16px, #ffffff)

Contoh nyata:

p {
  color: blue;
  font-size: 18px;
}

Artinya: "Semua <p> harus berwarna biru dengan ukuran font 18 pixel."

Tiga Cara Menghubungkan CSS ke HTML

1. External CSS (disarankan) File CSS terpisah, dihubungkan dengan <link> di <head>:

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

Ini cara terbaik — satu file CSS bisa dipakai untuk banyak halaman.

2. Internal CSS CSS ditulis langsung di <head> menggunakan tag <style>:

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

Cocok untuk eksperimen cepat, tapi tidak efisien untuk proyek besar.

3. Inline CSS CSS ditulis langsung di elemen menggunakan atribut style:

<p style="color: green; font-size: 20px;">Teks ini hijau.</p>

Hindari sebisa mungkin — sulit di-maintain dan tidak bisa di-reuse.

Contoh Kode

Buat dua file: index.html dan style.css.

index.html:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Belajar CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Judul Halaman</h1>
    <p>Ini adalah paragraf pertama. Warnanya berubah karena CSS!</p>
    <p>Ini adalah paragraf kedua.</p>
  </body>
</html>

style.css:

body {
  background-color: #f5f5f5;
}
 
h1 {
  color: #2563eb;
  font-size: 32px;
}
 
p {
  color: #333333;
  font-size: 16px;
}

Tugas Kecil

Buat folder baru bernama belajar-css
Di dalamnya, buat index.html dengan struktur HTML5 lengkap yang berisi: <h1>, <h2>, dan 2 <p>
Buat file style.css di folder yang sama
Hubungkan keduanya dengan <link> di <head>
Di style.css, tulis aturan yang mengubah:
- Warna latar halaman (body) menjadi warna pilihanmu (cari kode hex warna di coolors.co)
- Warna teks h1 menjadi warna accent (contoh: #2563eb)
- Ukuran font p menjadi 18px
Buka index.html di browser — apakah CSS-nya berhasil?

1. Pengenalan CSS & Cara Menghubungkannya ke HTML

Tujuan Belajar

Materi Singkat

Struktur Aturan CSS

Tiga Cara Menghubungkan CSS ke HTML

Contoh Kode

Tugas Kecil

1. Pengenalan CSS & Cara Menghubungkannya ke HTML

Tujuan Belajar

Materi Singkat

Struktur Aturan CSS

Tiga Cara Menghubungkan CSS ke HTML

Contoh Kode

Tugas Kecil