Home » How To » Cara Mengatur Header Pada Website Degnan CSS

Cara Mengatur Header Pada Website Degnan CSS

by Hanifah Nurbaeti
by Hanifah Nurbaeti

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;
}

You may also like