How To

Cara Mengatur Header Pada Website Degnan CSS

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

Hanifah Nurbaeti

Share
Tags: CSSHow To