In the previous article, we got accustomed to some basic CSS properties that are widely used in styling web pages, such as borders, backgrounds, margins, etc. It's time to use those properties to style the webpage we created in the HTML tutorial.
In this article, we will style the page's header and hero section. To do so, open the index.html and style.css files side by side for convenience.
Linking the External CSS
First, go to the <head> section in your HTML file and add a link to the stylesheet as follows:
<head>
<title>Bellylicious</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
Styling the Container
Now, we will define the styling for our container div in which all the other divs reside. We'll set its width as 100% width of the user screen, height as auto, and margins as 0px.
.container{
width: 100%;
height: auto;
margin-top: 0;
}
In the above syntax, the 100% represents the 100% view width. You can also use 100vh for the height property if you want an element to cover the screen's height.
Styling the Header
Let's start styling the header. First, we need to define its width as 100% to stretch it throughout the screen width, and set height as per our preferences.
.header{
width: 100%;
height: 100px;
background-color: rgba(0,0,0,0.8);
margin: 0px;
color: white;
}
The following height seems OK to me.
Styling the Logo and Navigation
Now, let's set the logo's position on the left and navigation on the right. To do so, we will first set the width and height of the logo and navigation divs and use the float property to set their positions:
.logo{
width: 200px;
height: 80px;
float: left;
background-color: red;
}
.nav{
width: 500px;
height: 80px;
float: right;
background-color: red;
}
float Property
The float property is used to set the position of the elements on the screen. The values for this property are left and right.
Tip: I have temporarily used the background color property to see the divs' position.
Now, let's add margins to the divs. We'll set the margin-top of both divs as 10px to make it vertically centered, margin-left for the logo div, and margin-right for the nav div.
.logo{
width: 200px;
height: 80px;
margin-top: 10px;
margin-left: 50px;
float: left;
background-color: red;
}
.nav{
width: 500px;
height: 80px;
margin-top: 10px;
margin-right: 50px;
float: right;
background-color: red;
}
Here's how our header looks yet:
Once we are satisfied with the positions of the logo and nav divs, we are good to continue styling the content of both divs. First, let's style our logo. I have moved the logo text to the center of the div:
.heading{
margin-left: 20px;
}
Now, it's time to set the navigation buttons. First, we'll set the button width, height, background color, borders, and margins. Also, set the text size and style.
.nav_btn{
width: 19%;
height: 70px;
margin-top: 5px;
margin-left: 2px;
background-color: rgba(0,0,0,0.3);
border: 1px solid white;
border-radius: 5px;
color: white;
font-size: 16px;
}
This is what our header looks like:
We are all set to remove the red background color from the logo and nav divs. It is a good practice to comment out the unwanted code rather than remove it since you may need it sometime in the future.
.logo{
width: 200px;
height: 80px;
margin-top: 10px;
margin-left: 50px;
float: left;
/*background-color: red; */
}
.nav{
width: 600px;
height: 80px;
margin-top: 10px;
margin-right: 50px;
float: right;
/*background-color: red;*/
}
Let's now make our buttons more interactive by adding a hover effect:
.nav_btn:hover{
background-color: white;
color: black;
font-weight: bold;
border-color: black;
transition: 1s;
}
I just inversed the font, border, and background colors, increased font size a bit, and added the transition property in the hover effect.
The transition property is used to delay an action for a specified number of seconds.
Our header is ready. If you want, you can add links with anchor <a> </a> tags in our navigation as follows:
<a href="#"><button class="nav_btn">Home</button></a>
Styling the Hero
Now that our header is ready, it's time to style our hero section. It is going to be simple. We'll first set the hero section's width, height, and position. Later, we will remove the tag for the background image from HTML and set it with CSS.
Setting Width, Height, and Position
.hero{
width: 100%;
height: 88vh;
background-color: red;
margin-top:0;
float: left;
}
Once the dimensions are set, we'll comment out the tag in the hero section in HTML:
<div class="hero">
<!--<img src="images/background_image.jpg" width="1350" height="300" alt="Background image for hero section"/>-->
<h1>Bellylicious - Delicious Food Delivered!</h1>
</div>
And use the background-image property to set the background of the hero:
.hero{
width: 100%;
height: 88vh;
background-color: red;
margin-top:0;
float: left;
background-image: url("images/background_image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
This is how your hero section should look.
Styling Hero Text
Now, style the hero text. We'll apply all the formatting directly on the "hero_text" class.
.hero_text{
color: white;
margin-top: 200px;
margin-left: 280px;
float: left;
}
I like the current formatting of the hero text. You can make changes to it according to your preferences.
Somehow, the hero seems empty to me. So, let's add 2 buttons to it.
Adding and Styling Buttons in Hero
Go to index.html and replace the hero div with the following code:
<div class="hero">
<!--<img src="images/background_image.jpg" width="1350" height="300" alt="Background image for hero section"/>-->
<h1 class="hero_text">Bellylicious - Delicious Food Delivered!</h1>
<button class="nav_btn">Menu</button>
<button class="nav_btn">Order Now</button>
</div>
Currently, our buttons appear as follows:
Let's use inline CSS to set these buttons by changing the properties according to our need:
<button class="nav_btn" style="width: 150px; height:80px; margin-top: 50px; margin-left:300px; float: left;">Menu</button>
<button class="nav_btn" style="width: 150px; height:80px; margin-top: 50px; margin-left: 5px; float: left;">Order Now</button>
Perfect! Here's how our final header and hero section looks like:
Here's the complete CSS code for the above section:
body{
margin:0;
padding:0;
}
.container{
width: 100%;
height: auto;
margin-top:0;
}
.header{
width: 100%;
height: 100px;
background-color: rgba(0,0,0,0.8);
margin: 0px;
color: white;
}
.logo{
width: 200px;
height: 80px;
margin-top: 10px;
margin-left: 50px;
float: left;
/*background-color:red; */
}
.nav{
width: 600px;
height: 80px;
margin-top: 10px;
margin-right: 50px;
float: right;
/*background-color: red; */
}
.heading{
margin-left: 20px;
}
.nav_btn{
width: 19%;
height: 70px;
margin-top: 5px;
margin-left: 2px;
background-color: rgba(0,0,0,0.3);
border: 1px solid white;
border-radius: 5px;
color: white;
font-size: 16px;
}
.nav_btn:hover{
background-color: white;
color: black;
font-weight: bold;
border-color: black;
transition: 1s;
}
.hero{
width: 100%;
height: 88vh;
/*background-color: red;*/
margin-top:0;
float: left;
background-image: url("images/background_image.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.hero_text{
color: white;
margin-top: 200px;
margin-left: 200px;
}
We also made some changes to the HTML and added inline CSS, so here's the final hero section code:
<!--Hero-->
<div class="hero">
<!--<img src="images/background_image.jpg" width="1350" height="300" alt="Background image for hero section"/>-->
<h1 class="hero_text">Bellylicious - Delicious Food Delivered!</h1>
<button class="nav_btn" style="width: 150px; height:80px; margin-top: 50px; margin-left:300px; float: left;">Menu</button>
<button class="nav_btn" style="width: 150px; height:80px; margin-top: 50px; margin-left: 5px; float: left;">Order Now</button>
</div>
You are doing a great job with this tutorial. Please note that you may need to set the dimensions and positions of different elements according to your screen size.
In the next article, we will continue with styling the body sections.
