CSS Layouts: The CSS is used to design the website Layout. A general website is divided into headers, menus, content and a footer.
Header
A header is the top of the website or just below the navigation bar menu. It mostly contains a logo or the website name
Header Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* Style the header */
.header {
background-color:#eca1a6 ;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
</body>
</html>
Header Example Output
Navigation Bar
A navigation bar helps to navigate through your website with the list of links.
Navigation Bar Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #eca1a6;
padding: 30px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: blue;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">HOME</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</div>
</body>
</html>
Navigation Bar Example Output
Content
The content layout depends on the target users, mostly used one layout or combining them together.
- 1-column ( for mobile browsers)
- 2-column ( for tablets and laptops)
- 3-column layout ( for desktops)
Content Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #eca1a6;
padding: 30px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: blue;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 15px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="topnav">
<a href="#">HOME</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</div>
<div class="row">
<div class="column">
<h2>HOME</h2>
<p>FreshersNow.Com is one of the best job sites in India for freshers. In this website, we provide latest job updates for freshers and experienced professionals.</p>
</div>
<div class="column">
<h2>HTML</h2>
<p>HTML stands for Hyper Text markup language. It is used for designing web pages using the markup language. HTML is a combination of Hypertext and markup language. </p>
</div>
<div class="column">
<h2>CSS</h2>
<p>Cascading Style Sheets is a style sheet language used to add styles to the HyperText Markup Language (HTML) document. This implies that it is used for rendering the presentation of web pages.</p>
</div>
</div>
</body>
</html>
Content Example Output
UnEqual Columns
The main content is most important for your site.most of the common unequal column width provides space to the main content. The site content is mostly used for alternative navigation or information regarding the main content.
UnEqual Columns Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #eca1a6;
padding: 30px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: blue;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="topnav">
<a href="#">HOME</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</div>
<div class="row">
<div class="column side">
<h2>HOME</h2>
<p>FreshersNow.Com is one of the best job sites in India for freshers. In this website, we provide latest job updates for freshers and experienced professionals.</p>
</div>
<div class="column middle">
<h2>HTML</h2>
<p>HTML stands for Hyper Text markup language. It is used for designing web pages using the markup language. HTML is a combination of Hypertext and markup language. </p>
</div>
<div class="column side">
<h2>CSS</h2>
<p>Cascading Style Sheets is a style sheet language used to add styles to the HyperText Markup Language (HTML) document. This implies that it is used for rendering the presentation of web pages.</p>
</div>
</div>
</body>
</html>
UnEqual Columns Example Output
Now type the entire source code in notepad and save with the .html extension then you can create a webpage with unequal columns.
Footer
The footer is the last one of your web page which contains copyright information or contact details.
Footer Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
/* Style the header */
.header {
background-color: #eca1a6;
padding: 30px;
text-align: center;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Header</h1>
<p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="topnav">
<a href="#">Home</a>
<a href="#">HTML</a>
<a href="#">CSS</a>
</div>
<div class="row">
<div class="column side">
<h2>HOME</h2>
<p>FreshersNow.Com is one of the best job sites in India for freshers. In this website, we provide latest job updates for freshers and experienced professionals.</p>
</div>
<div class="column middle">
<h2>HTML</h2>
<p>HTML stands for Hyper Text markup language. It is used for designing web pages using the markup language. HTML is a combination of Hypertext and markup language.</p>
</div>
<div class="column side">
<h2>CSS</h2>
<p>Cascading Style Sheets is a style sheet language used to add styles to the HyperText Markup Language (HTML) document. This implies that it is used for rendering the presentation of web pages.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
Footer Example Output
The output of Footer is the same above program with an additional Footer layout.
Responsive Website Layout
The Responsible Website Layout is varied between two columns and full-width columns regarding the size of the screen.
Responsible Website Layout Example
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #bdcebe;
}
/* Header/Blog Title */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Style the topnav links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>FreshersNow.Com is one of the best job sites in India for freshers. In this website, we provide latest job updates for freshers and experienced professionals.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>FreshersNow.Com is one of the best job sites in India for freshers. In this website, we provide latest job updates for freshers and experienced professionals.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text.... </p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text....</p>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
Responsible Website Layout Example Output
Now type the entire source code in notepad and save with the .html extension then you can create your own Website Layout.