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 straightforward!

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…