Create a Simple Banner in CSS

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn2

 

This post will help you learn how to create a simple banner for your website. You should know very basic HTML and CSS syntax in order to complete this task. We are going to be creating a banner like the one below:

 

See the Pen Banner by Rajarajan Thangarasu (@rajarajan) on CodePen.

Now that we know what we are going to build, let’s explore HTML and CSS code step by step. If you already know the basic syntax of HTML and CSS I would recommend that you skip the HTML and CSS sections below and jump right into .banner.

HTML Code:

We have an outer div with the class “banner” and then we have inner wrapper section element nested inside the banner class. There are two block levels (h1, p) and one inline (a) element nested inside section. The reason we need section is to wrap its nested elements together so that it is easy to position as a unit later using CSS.

CSS Code:

There are a few ways to import google font into your project. I chose to import inside the CSS file, however, this step is optional.

* is a wildcard selector and it applies the properties to all elements. The box-sizing property helps the outer width or height to not be affected when you give margin or padding to an element and I would recommend using this within all of your projects. Resetting margin padding to 0 and applying the new font to those elements.

 

.banner

  • Width (100%) makes the div go full screen.
  • The height needs to be specified and it is 300px and you can play around with it.
  • The display is set to table which enables the div to make its nested children div easily centred vertically. Text-align:center is making all the element content centre of the screen horizontally.
  • Adding background color to blue and text color to white are pretty straight forward.

Section

  • Display:table-cell and vertical-align:middle enable to align section block vertically middle without Javascript

.btn-bgstroke

  • Properties of this class are pretty straight forward and hover pseudo class help to style the element when you move your cursor to it

There you have it! I hope you enjoy! I know there are different ways to achieve this so leave us a comment if you did it any other way. Feel free to check out our online HTML&CSS course. Contact us for one FREE virtual online class from Anywhere.

 

Leave a comment if you have any questions or suggestions. If you like it, don’t forget to share it with your friends. Thanks for reading!

 

 

Share on Facebook0Tweet about this on Twitter0Share on LinkedIn2

About the author
Raja Thangarasu

Raja loves building Web and iOS Applications. He is always curious to explore latest technologies and concepts. He's working as a UI Developer and he is teaching various technologies at SoftAuthor. He likes to write blogs and create youtube videos when he has time to share his knowledge to the world. Visit his website for more information about him.

Sign up for our blog updates and newsletters!


100 % privacy. I hate spam as much as you do!