Belajar CSS Bagian 12 : Add Styling to Header and Landing

Setelah struktur HTML sebuah website selesai dibuat, langkah berikutnya yang tidak kalah penting adalah menambahkan styling menggunakan CSS. Pada tahap ini, fokus utama bukan lagi apa isinya, tetapi bagaimana tampilannya terlihat rapi, seimbang, dan nyaman dilihat.

Pada artikel ini, kita membahas secara khusus styling bagian Header dan Landing Page, karena dua bagian inilah yang pertama kali dilihat oleh pengguna.

---

Tujuan Styling Header dan Landing

Styling dilakukan untuk:

• Membuat tampilan website lebih profesional

• Menyeimbangkan teks dan gambar

• Memberikan spasi yang cukup agar tidak terlihat sempit

• Meningkatkan keterbacaan konten

• Membantu pengguna fokus ke informasi penting

💡 Prinsip utama

Website yang bagus bukan yang paling banyak efek,
tapi yang rapi, seimbang, dan nyaman dilihat.

---

Analogi Sederhana: Menata Furnitur

Mendesain website mirip seperti menata furnitur di ruangan:

• Jika terlalu rapat → sesak

• Jika terlalu jauh → kosong

• Jika seimbang → nyaman

Teks, gambar, tombol, dan navigasi harus punya jarak yang jelas.

---

1. Mengecek Tampilan Awal Website

Setelah HTML selesai:

• Website biasanya masih terlihat berantakan

• Semua elemen sudah ada, tetapi belum tertata

Ini normal.
CSS-lah yang bertugas merapikan tampilan tersebut.

---

2. Mengatur Font dan Ketebalan Teks

Mengganti Font Weight

Agar judul terlihat lebih menonjol:

h1 {
  font-weight: 500; /* medium */
}

📌 Font medium atau bold membantu:

• Menarik perhatian

• Memberi hierarki visual

---

Mengatur Ukuran Font

Ukuran font sangat berpengaruh pada kenyamanan membaca.

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

📌 Prinsip umum:

• Judul → besar & tegas

• Paragraf → cukup besar, mudah dibaca

Jika ada <a> (link) di bagian landing, pastikan juga:

a {
  font-size: 24px;
}

---

3. Styling Header dengan Flexbox

Header biasanya berisi:

• Logo / judul website

• Navigasi menu

Agar logo dan navigasi sejajar:

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

📌 Hasil:

• Logo di kiri

• Navigasi di kanan

• Sejajar secara vertikal

---

Menghapus Margin Default Heading

Secara default, <h1> memiliki margin bawaan browser.

header h1 {
  margin: 0;
}

📌 Ini penting agar posisi header benar-benar sejajar secara visual.

---

4. Memberi Jarak Navigasi (Spacing)

Navigasi tidak boleh terlalu rapat.

nav {
  display: flex;
  gap: 16px;
}

📌 gap:

• Memberi jarak antar item

• Lebih rapi dibanding margin manual

---

5. Menggunakan Padding pada Header

Padding digunakan untuk:

• Memberi jarak dari tepi layar

• Membuat header “bernapas”

header {
  padding: 16px 128px;
}

📌 Kenapa pakai padding?

• Jarak luar ke dalam lebih konsisten

• Aman jika nanti ada elemen tambahan

---

6. Styling Landing Page dengan ID (Spesifik)

Landing page biasanya hanya satu, jadi lebih tepat pakai id.

<section id="landing"> 

#landing {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

📌 Hasil:

• Gambar dan teks sejajar

• Tampilan kiri–kanan rapi

---

7. Memberi Padding ke Semua Section

Agar semua section konsisten:

section {
  padding: 64px 128px;
}

📌 Manfaat:

• Jarak atas & bawah seimbang

• Tampilan profesional

• Struktur visual konsisten

---

8. Mengatur Jarak Antar Elemen di Landing

Jika teks dan gambar terlalu rapat:

#landing {
  gap: 16px;
}

📌 gap bekerja sangat baik pada:

• display: flex

• display: grid

Hasilnya:

• Konten lebih lega

• Tidak terlihat “menempel”

---

9. Kenapa Menggunakan Padding, Bukan Margin?

Padding	Margin
Spasi dari dalam	Spasi dari luar
Aman untuk layout	Bisa bentrok antar elemen
Cocok untuk section	Cocok antar komponen

📌 Untuk layout utama → padding lebih disarankan.

---

Prinsip Desain yang Dipakai

Dalam styling Header & Landing, prinsip yang digunakan:

• ✔ Konsistensi jarak

• ✔ Keseimbangan teks & gambar

• ✔ Hirarki visual

• ✔ Spasi yang cukup

• ✔ Tidak berlebihan

---

Ringkasan Styling Header & Landing

1. Atur font & ukuran teks

2. Gunakan Flexbox untuk header

3. Hilangkan margin bawaan

4. Tambahkan gap antar item

5. Gunakan padding untuk jarak luar

6. Gunakan ID untuk section khusus

7. Buat layout bernapas

---

Penutup

Styling Header dan Landing adalah pondasi visual website.
Jika dua bagian ini rapi:

➡️ Website terlihat profesional
➡️ Konten mudah dibaca
➡️ Pengunjung betah

Struktur HTML adalah kerangka,
CSS adalah jiwa dari tampilan website.