How to Design a simple Webpage using CSS and HTML

Share It
-----------------------

Now we are going to discussed how to make a HTML Webpage using CSS Coding for making a well design Page. CSS are used in two different way for fixed width and fluid width of header, content, sidebar and footer positions.

In fixed width CSS Coding width are fixed they doesn't depend on the resolution of the screen. Whatever the screen resolution Webpage must be in its width.

In fluid width CSS Coding the width of header, content, sidebar and footer are having fluid width according to the screen resolution. This is the good way for making a Webpage which compatible with all type of device having different screen resolution.

ALSO SEE: How to make a Mac OS X Lion USB stick

For a simple Web Design basically two type of files are must there, these are .html and .css
e.g-
webpage.html - This is a webpage format file
style.css - This is a stylesheet file, which used for graphics of webpage, determining width of div section and many more.

Fixed width CSS stylesheet code

body {
background: #ffffff;
margin: 0;
font-family: arial, verdana, helvetica, sans-serif;
}

#container {
width: 960px;
margin: 0 auto;
}

#header {
width: 960px;
height: 100px;
margin-bottom: 20px;
background: #eee;
}

.content {
width: 520px;
margin-right: 20px;
float: left;
background: #eee;
}

.sidebar1 {
width: 200px;
margin-right: 20px;
float: left;
background: #eee;
}

.sidebar2 {
width: 200px;
float: left;
background: #eee;
}

#footer {
float: left;
width: 960px;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
background: #eee;
}

ALSO SEE: iPad 3 (The new iPad) Statistics based on iPad 2 USA user

Fluid width CSS stylesheet code

body {
background: #ffffff;
margin: 0;
font-family: arial, verdana, helvetica, sans-serif;
}

#container {
width: 90%;
margin: 0 auto;
}

#header {
width: 90%;
height: 100px;
margin-bottom: 20px;
background: #eee;
}

.content {
width: 50%px;
margin-right: 5%;
float: left;
background: #eee;
}

.sidebar1 {
width: 20%;
margin-right: 5%;
float: left;
background: #eee;
}

.sidebar2 {
width: 20%;
float: left;
background: #eee;
}

#footer {
float: left;
width: 90%;
height: 100px;
margin-top: 20px;
margin-bottom: 20px;
background: #eee;
}

From the above two type of code copy any one as your choice into text editor and save it as 'style.css'.

HTML webpage code

<!doctype html>
<html lang="en" class="no-js">
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta charset="utf-8">
<title>Webpage Title</title>
</head>
<body>
<div id="container">
<header>Webpage Header</header>
<div class="content">
<p>Webpage main Content</p>
</div>
<div class="sidebar1">1st Sidebar</div>
<div class="sidebar2">2nd Sidebar</div>
<div id="footer">Footer of Webpage</div>
</div>
</body>
</html>

Copy the above code into text editor and save it as 'webpage.html', before saving must replace the source url which is in red color in the bracket (href="style.css") with your style.css file url in <link> section of <head> section of the above HTML code.