CSS pertama kamu: halaman mendapat warna

Temui bahasa CSS, dan lihat situs web kamu tidak lagi terlihat seperti tahun 1995.

Tunjukkan pada saya: apa itu CSS

HTML adalah kerangka halaman. CSS adalah pakaiannya: warna, font, ukuran, spasi. Itu ditulis dalam file terpisah dan terlihat seperti ini:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Bacalah dengan lantang seperti ini: “Setiap judul h1, warnai dengan biru tua. Setiap paragraf p, jadikan 18 piksel dan abu-abu tua.”

Setiap aturan memiliki tiga bagian:

pemilih (h1) – apa aturan yang berlaku,
properti (warna) – apa yang kami ubah,
a value (darkblue) – apa yang kami ubah.

Titik dua memisahkan properti dan nilai, dan setiap baris diakhiri dengan titik koma. Hati-hati dengan titik koma tersebut – titik koma yang terlupakan adalah kesalahan CSS yang paling umum di dunia.

Menghubungkannya: beri tahu halaman kamu tentang CSS kamu

Di dalam folder situs web saya kamu, buat file baru bernama style.css.
Tambahkan baris ini di dalam <head> dari setiap halaman HTML kamu:
```
<link rel="stylesheet" href="style.css">
```
Bunyinya: “kamu akan menemukan tampilan halaman ini di file style.css.”
Uji apakah berhasil – letakkan sesuatu yang mustahil untuk dilewatkan di style.css:
```
body {
  background-color: yellow;
}
```
Simpan, segarkan halaman. Apakah semuanya berwarna kuning? Itu berhasil! (Jangan ragu untuk menghapus yang kuning sekarang.)

Warna dalam CSS

kamu dapat menulis warna sebagai kata dalam bahasa Inggris (red, darkblue, lightgray, tomato, gold…) atau lebih tepatnya sebagai kode yang dimulai dengan tanda pagar: #1d4ed8 berwarna biru, #16a34a berwarna hijau. Campurkan kode warna apa pun yang kamu suka di htmlcolorcodes.com.

Giliran kamu 💪

Dandani situs web kamu dengan warna pertamanya. Di style.css, atur:

warna latar belakang seluruh halaman (body),
warna judul kamu (h1, h2),
ukuran dan warna paragraf kamu (p).

Solusi – tentu saja, silakan mengubah warnanya:

🏫 Situs web sekolah – solusi

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Biru sangat cocok untuk situs web sekolah – rasanya dapat dipercaya (itulah sebabnya bank juga menggunakannya!).

🙋 Situs web pribadi – solusi

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Situs web pribadi bisa lebih berani – warna oranye hangat menyatakan “tempat ini hidup”.

🌍 Jurnal perjalanan – solusi

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Hijau seperti hutan dan padang rumput – cocok untuk jurnal perjalanan.

⚽ Situs web klub – solusi

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Pilihan terbaik adalah warna klub kamu – bermain dengan warna merah? Lalu warnanya merah!

⚠️

Aturan keterbacaan: teks gelap dengan latar belakang terang (atau sebaliknya). Kuning muda di atas putih tidak terbaca. Jika kamu tidak yakin, tanyakan pada seseorang: “Bisakah kamu membaca ini dengan nyaman?”

✅

Periksa diri kamu: Situs web kamu memiliki warnanya sendiri – dan karena CSS kamu ada dalam satu file yang tertaut ke setiap halaman, semua halaman kamu diwarnai sekaligus. Cukup pintar, bukan?

Apa yang bisa diambil dari pelajaran ini

CSS = tampilan. Itu ditulis dalam file style.css, dihubungkan dengan tag <link> di <head>.
Aturannya: selector { property: value; } – dan jangan lupa titik koma.
Satu file CSS menghiasi seluruh situs web kamu sekaligus.