Cara Menambahkan CSS Internal untuk Halaman Web Pernikahan Online
Dipublikasikan oleh ZE COME Training Center
Review Part 1: Membuat Struktur HTML Dasar
Pada Part 1, kita telah membuat halaman undangan pernikahan sederhana dengan HTML dasar. Selanjutnya, kita akan menambahkan CSS internal agar tampilan halaman lebih cantik dan elegan.
Langkah 1: Buka File HTML
Buka file index.html yang sudah dibuat di Part 1 menggunakan Notepad atau Visual Studio Code (VSCode).
Langkah 2: Tambahkan CSS Internal
CSS internal ditulis di dalam tag <style> yang diletakkan di bagian <head>. Tambahkan kode berikut:
<style>
/* === CSS Internal === */
body {
font-family: 'Segoe UI', Arial, sans-serif;
background-color: #fef9f4; /* Warna krem lembut */
color: #333;
text-align: center;
margin: 0;
padding: 0;
}
h1 {
color: #b56576; /* Warna merah muda elegan */
margin-top: 50px;
font-size: 36px;
}
p {
font-size: 20px;
margin: 20px 0;
}
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-top: 30px;
}
</style>
Kode di atas menambahkan CSS internal untuk membuat halaman lebih menarik dengan warna, font, dan layout rapi.
Langkah 3: Simpan dan Lihat Hasilnya
Simpan file dengan Ctrl + S, lalu buka di browser. Kini undangan terlihat lebih cantik dengan background lembut, kotak putih di tengah, serta font elegan.
Penjelasan Kode CSS
body: Mengatur font, warna latar, teks rata tengah, margin dan padding.h1: Mengatur warna merah muda elegan dan ukuran judul.p: Memberi ukuran font paragraf..container: Membuat kotak putih di tengah dengan radius dan bayangan agar elegan.
Kesimpulan
Pada Part 2 ini, kita telah berhasil menambahkan CSS internal untuk mempercantik tampilan halaman undangan pernikahan. Di Part 3, kita akan menambahkan foto pasangan dan detail acara agar undangan semakin lengkap.