HTML & CSS Tutorials

How To Create A Header / Banner in HTML & CSS

Last modified on June 13th, 2022
Raja Tamil

In this article, you’re going to learn how to design a simple header in CSS for your website using the traditional approach as well as the flexbox approach.


<section class="header">
    <h1>Company Name</h1>
    <p>Company Mission Statement goes here</p>
    <a class="btn-bgstroke">Call To Action</a>

The HTML code above has a section container with a class name header and it has three children that are h1, p and a respectively.

Pretty straight forward!


@import url(,300,100,700,900);

  margin: 0;
  padding: 0;
  font-family: 'Lato';

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;

p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;

.header {
  width: 100%;
  padding:60px 0;
  text-align: center;
  background: #33cccc;
  color: white;

.btn-bgstroke {
  font-size: 20px;
  display: inline-block;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 

.btn-bgstroke:hover {
  background-color: white;
  color: #33cccc;

As you can see the CSS is pretty straight forward.

I used text-align: center rule to the .header class to make the inner elements center horizontally.

To center the elements vertically, I gave top and bottom paddings to the .header class as well.

This is better than giving a fixed height so that the outer container can grow vertically as the content of the inner elements grow.