Create a Simple Banner in CSS
July 5, 2016 4:47 pm by Raja Thangarasu
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:
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.
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.
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.
- ➊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.
- ➊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!