Step - 1
At first you open Notepad++ or if you don't have this software please search at Google and download it first because I have edit this project with it.
Step - 2
Here, Notepad++ will look like this -
Then you will choose language preference to HTML .
Full Code for this application is shown below -
File name: sample.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Sample Website </title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome User!</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home </li>
<li>Tutorials</li>
<li>About</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of the Article1</h1>
<h2>SubTitle of the Article1 !</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>--- Written by ABC</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of the Article2</h1>
<h2>SubTitle of the Article2 !</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>--- Written by ABCD</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
ABC has a new dog !.</h4>
</aside>
<footer id="the_footer">
Copyright © Sample 2015
</footer>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Sample Website </title>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<h1>Welcome User!</h1>
</header>
<nav id="top_menu">
<ul>
<li>Home </li>
<li>Tutorials</li>
<li>About</li>
</ul>
</nav>
<section id="main_section">
<article>
<header>
<hgroup>
<h1>Title of the Article1</h1>
<h2>SubTitle of the Article1 !</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>--- Written by ABC</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Title of the Article2</h1>
<h2>SubTitle of the Article2 !</h2>
</hgroup>
</header>
<p>This is the best article eva!</p>
<footer>
<p>--- Written by ABCD</p>
</footer>
</article>
</section>
<aside id="side_news">
<h4>News</h4>
ABC has a new dog !.</h4>
</aside>
<footer id="the_footer">
Copyright © Sample 2015
</footer>
</div>
</body>
</html>
File name: main.css
*{
margin:0px;
padding:0px;
}
margin:0px;
padding:0px;
}
h1{
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header, section, footer, aside,nav,article,hgroup{
display:block;
}
body{
text-align:center;
}
#big_wrapper{
border:1px solid black;
width:1000px;
margin: 20px auto;
text-align:left;
}
#top_header{
background:yellow;
border:1px solid blue;
padding:20px;
}
#top_menu{
background:blue;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}
font:bold 20px Tahoma;
}
h2{
font:bold 14px Tahoma;
}
header, section, footer, aside,nav,article,hgroup{
display:block;
}
body{
text-align:center;
}
#big_wrapper{
border:1px solid black;
width:1000px;
margin: 20px auto;
text-align:left;
}
#top_header{
background:yellow;
border:1px solid blue;
padding:20px;
}
#top_menu{
background:blue;
color:white;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font: bold 14px Tahoma;
}
#main_section{
float:left;
width:660px;
margin:30px; /* 720px , 280 left */
}
article{
background:#FFFBCC;
border:1px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer{
text-align:right;
}
#side_news{
float:left;
width:220px;
margin:20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
clear:both;
text-align:center;
padding:20px;
border-top:2px solid green;
}
float:left;
width:660px;
margin:30px; /* 720px , 280 left */
}
article{
background:#FFFBCC;
border:1px solid red;
padding: 20px;
margin-bottom: 15px;
}
article footer{
text-align:right;
}
#side_news{
float:left;
width:220px;
margin:20px 0px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
clear:both;
text-align:center;
padding:20px;
border-top:2px solid green;
}
Step - 3
Finally, it will look like this .
CSS Property :
CSS property is access by html id property and it will show in below .
Now, thank you for opening this link and I hope you enjoy with this Tutorial.
