Di bawah ini kita akan mempelajari cara mengatur gaya pada header dengan CSS.
Big Header
<!DOCTYPE html> <html lang="en"> <head> <title>Page Title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* Style untuk body */ body { font-family: Arial; margin: 0; } /* Header/Logo Title */ .header { padding: 60px; text-align: center; background: #8FBC8F; color: white; font-size: 30px; } /* Page Content */ .content {padding:20px;} </style> </head> <body> <div class="header"> <h1>Header</h1> <p>Contoh Style Header</p> </div> <div class="content"> <h1>Content</h1> <p>Ada kontent di sini..............</p> <p>Ada kontent di sini..............</p> <p>Ada kontent di sini..............</p> <p>Ada kontent di sini..............</p> <p>Ada kontent di sini..............</p> </div> </body> </html>
Buat Header
Langkah 1) Tambahkan HTML:
Contoh
<div class="header"> <h1>Header</h1> <p>Contoh Style Header</p> </div>
Langkah 2) Tambahkan CSS:
Style header dengan padding besar, teks tengah, warna latar belakang tertentu dan teks berukuran besar:
Contoh
/* Header/Logo Title */
.header {
padding: 60px;
text-align: center;
background: #8FBC8F;
color: white;
font-size: 30px;
}