How To Create A Header / Banner in HTML & CSS

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.

HTML

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

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!

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);

h1,
p,
a{
  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.