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.
Top comments (0)