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)