CSS
Topperworld.in
Website Layout
• A website can be divided into various sections comprising of header,
menus, content, and footer based on which there are many different layout
designs available for developers.
• Different layouts can be created by using a div tag and using CSS property
to style it.
• The most common structure of website layout is given below:
Notice: Header section contains a website logo, a search bar and profile of
user. The navigation menu contains link to various categories of articles
available and content section is divided into 3 parts(columns) with left and
right sidebar containing links to other articles and advertisements whereas the
main content section is the one containing this article, then at the bottom
there is a footer section which contains address, links, contacts etc.
❖ Header Section
The header section is generally placed either at the top of the Website or
just below a top navigation menu.
It often comprises of the name of the Website or the logo of the Website.
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Website Layouts
</title>
<style>
.header {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h2 style="color:white;">
Topper World
</h2>
</div>
<br>
<center style="font-size:200%;">
Remaining Section
</center>
</body>
</html>
©Topperworld
CSS
Output:
❖ Navigation Menu
A Navigation Bar/Menu is basically a list of links that allows visitor to
navigate through the website comfortably with easy access.
❖ Content Section
The content section is the main body of the website. The user can divide
the content section in an n-column layout.
The most common layouts are:
➢ 1-Column Layout: It is mostly used for mobile layout.
➢ 2-Column Layout: This website layout is mostly used for tablets or
laptops.
©Topperworld
CSS
➢ 3-Column Layout: This website layout is mostly used for desktops.
The user can also create a responsive layout where the layout will get changed
as per screen size. Consider the below example where if the idth of the screen
is more than 600px then there will be a 3-column layout and if the width of the
screen is between 400px to 600px then there will be a 2-column layout and if
the screen size is less than 400px then the 1-column layout will display.
❖ Footer Section
A footer section is placed at the bottom of the webpage and it generally
consists of information like contact info, copyrights, About us etc.
©Topperworld
CSS
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Website Layout
</title>
<style>
/* Style for footer section */
.footer {
background-color: green;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<center style="font-size:200%;">
Upper section
</center>
<!-- footer Section -->
©Topperworld
CSS
<div class="footer">
<a href="#">About</a><br>
<a href="#">Career</a><br>
<a href="#">Contact Us</a>
</div>
</body>
</html>
Output:
©Topperworld
