Sunday, 24 July 2016

Blog Design with CSS and HTML

Blog Design with CSS and HTML

In this post I will show you how to design blog template frame with CSS and HTML step by step . CSS helps you to design better and flexible webpage layouts. This is very basic CSS + HTML tutorial, CSS just awesome it adds flavor to the web page.
Blog design CSS and SEO

Step 1
Web layout divided into four horizontal parts are Hearder, Nav, Main and Footer. Here Container is the parent div.

HTML Code
<div id="container">

<div id="header">1 Header</div>
<div id="nav">2 Nav</div>
<div id="main">3 Main</div>
<div id="footer">4 Footer</div>

</div>

Blog design CSS and SEO

CSS Code
margin:0 auto; centers a div
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
height:30px;
}
#main
{
overflow:auto;
}
#footer
{
height:40px;
}

Step 2
main (content part) div dividing into two vertical parts are main_left(article part) and main_right(sidebar part)
<div id="main">

<div id="main_left">Article</div>

<div id="main_right">Sidebar</div>

</div>

Blog design CSS and SEO

CSS code
#main
{
overflow:auto;
}
#main_left
{
float:left;
width:600px;
}
#main_right
{
float:left;
width:300px;
}

Step 3
Now working with an unorder list <ul> tag.
<div id="nav">

<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>

</div>

Blog design CSS and SEO

#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}

Home Page
This page should be with multiple article title links with little description, so that reader can quickly find more information. W3C standards specifying <h1> tag use for top-level heading.
Blog design CSS and SEO

Article Page
Here article title is the most important and top level, so title should be in <h1> tag.
Blog design CSS and SEO

Final Code
Take a look at this demo link
HTML Code
<div id="container">

<div id="header">
Header
</div>

<div id="nav">

<ul>
<li>HOME</li>
<li>PROJECT</li>
<li>TUTORIALS</li>
<li>FACEBOOK</li>
<li>JQUERY</li>
</ul>

</div>

<div id="main">

<div id="main_left">Article</div>
<div id="main_right">Sidebar</div>

</div>

<div id="footer">Footer</div>
</div>

CSS Code
<style type="text/css">
#container
{
width:900px;
margin:0 auto;
overflow:auto;
}
#header
{
height:90px;
}
#nav
{
overflow:auto;
}
#nav ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li
{
float:left;
margin:10px;
}
#main
{
overflow:auto;
margin-top:3px;
}
#main_left
{
float:left;
width:600px;
min-height:400px;
}
#main_right
{
float:left;
width:300px;
min-height:400px;
}
#footer
{
height:40px;
}
</style>

AddToAny