In this tutorial we will use most of the important codes that helps us to build a complete front page layout. Follow the steps provided in this tutorial to create a complete front page layout with CSS.
Steps to create a complete front page layout with CSS
1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available on any Windows PC. Open notepad any type following code:
<html>
<head>
<title>CSS tutorial – 20</title>
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
</div>
<ul id=”nav”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Gallery</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
<div id=”content”>
<p>In this section we will put content….</p>
</div>
<div id=”footer”>© 2014 JITMC Family Swasthya Pack…
</div>
</div>
</body>
</html>
And then save the file as .html (eg: tut20.html).
Here,
<link rel=”stylesheet” type=”text/css” href=”css/style.css” /> will link the stylesheet that we are going to create.
<div id=”header”> is for creating header. We will link background image from stylesheet.
<ul> tag is used to create list item and <li> lists each item
In <div id=”content”> section we are putting content and in <div id=”footer”> small footer message is shown.
2. Next, in the same folder where your html file is located, save the header image which you want to use. You can also create another folder and put images inside it. But wherever you keep your image, you need to specify full path in stylesheet (CSS file).
3. Next, in the same directory (folder), create another folder named css and create new css file named as style.css. To do that, open notepad and save it as style.css
4. Next, open the file style.css and type following code:
body{
font-family:verdana;
}
#wrapper{
width:980px;
margin: 0 auto;
}
#header{
background:url(‘../header.jpg’);
height:200px;
margin:0px;
}
#nav{
list-style: none;
height:20px;
display:block;
background-color:red;
border:1px solid 0000;
text-align:center;
}
#nav li{
margin-right:5px;
width:200px;
text-align:center;
float:left;
background:#c0c0c0;
}
#content{
width:980px;
height:500px;
border:1px solid 0000;
background:orange;
}
#footer{
color:#ffffff;
text-align:center;
width:980px;
height:20px;
border:1px solid 0000;
background:#000000;
}
Here,
margin: 0 auto; will align the whole page to center.
font-family:verdana; in body tag will set whole font in webpage to verdana.
background:url(‘../header.jpg’); will set a header image.
height: 200px; is the height of the header image
float: left; will floats column to left.
This completes our tutorial to create a complete front page layout with CSS.
The post How to Create a Complete Front Page Layout with CSS appeared first on Web Design Blog | Magazine for Designers.
via http://ift.tt/1sR9jC2
No comments:
Post a Comment