 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study lesson-37.
In our previous lesson we have learned to display elements inline using CSS float property. We have learned how to make vertical and horizontal menus using CSS float property in that lesson.
Today we will further study CSS float property. We will see how to design a web page layout using CSS float property.
CSS float property - web page layout
We will design a web page using CSS float property. In our web page we will display a vertical menu on right side. We will display a header and a footer for the page. We will also display an image in the left side. We will define divisions for displaying all these.Let us begin. Open a new Notepad file. Write the style as follows:
<style>
div.heading1 {
text-align: center;
color:red;
}
ol.a {
float: right;
margin: 0.2vw;
list-style-type: none;
}
ol li {
width: 15vw;
padding: 1vw;
letter-spacing: 0.5vw;
word-spacing: 1vw;
font-weight: bold;
background: #FFD700;
}
a:hover {
background-color:red;
}
We have already studied all these CSS properties. Now using these CSS properties we will design layout of our web page.
Read the above code carefully. First we have defined style for heading. Then we have defined style for an ordered list. We have defined background color for this list. This will be used to display vertical menu. Note that we have floated menu on the right. Also we have defined style to be displayed for menu items when we hover the mouse on every option of the vertical menu.
Now we will define style for the main text to be displayed in our web page as follows:
div.main {
color:blue;
text-indent: 10vw;
font-family: "Arial", Sans-serif;
font-weight: bold;
text-align: justify;
}
We will float an image in the left side. Style for this is as follows:
#img1 {
float:left;
margin-right:1rem;
}
Style for the footer is as follows:
div.footer1 {
text-align: center;
color:white;
background-color: gray;
}
</style>
This completes our style.
Now let us define these elements in body.
Following code is written for heading.
<div class="heading1">
<h1>Earth - My planet</h1>
</div>
Similarly another division is defined for displaying the image.
<div>
<img id="img1" src="Image for Lesson-34.jpg" alt="Image 2" style=“width:200px;height:170px;">
</div>
These are very simple to understand. In the similar manner, we will define a division for every element like footer, vertical menu and so on. Refer the PDF file of this source code. Our code is shown in the following figure.
 |
| Figure 37-1 Using CSS float property to design a page layout |
Save this file as "Lesson-37" and "Lesson-37.html". Double click on Lesson-37.html and see the output. Our web page is displayed.
 |
| Figure 37-2. Designing web page layout using CSS float property |
Notice that we have used divisions to display elements appropriately. Now elements are displayed as per our layout.
Important Points
1. CSS float property is used to design layout of a web page.2. Once again note that we can float elements on left side or right side.
3. We create divisions in the web page to manage layout appropriately.
Lesson-36 Lesson-38
