Styling the Html 5 structure
I already told that html 5 comes to give web page a logical structure.These means the new tags have no power to make style themself.As usual we have to use css to style them.
We can style them as we did before.We may use tag,class,id selector to select and style them.
Here is example code snippets,
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>Html 5 document</title>
<style type="text/css">
/****************Main Header Stylish Start********/
#mainHeader{
width:900px;
height:100px;
background-color:#CCC;
}
#mainHeader h1{
margin:0px;
}
#mainHeader menu{
margin:0px;
float:left;
width:150px;
background-color:#8080C0;
border:2px solid #FFF;
}
/****************End of the Main Header Stylish ********/
#sidebar{
width:150px;
height:600px;
background-color:#99F;
float:left;
}
#content{
width:900px;
height:600px;
background:#FFB9B9;
}
#content h2{
margin:0px;
}
#footer{
width:900px;
height:80px;
background-color:#C5C5C5;
}
#footer h4{
margin:0px;
}
/**************For Older Browser***************/
article,section,aside,header,footer,hgroup,figure,figcaption,embed
{
display:block;
}
</style>
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header id="mainHeader">
<h1>Welcome to Learn html 5 today blog site.</h1>
<nav>
<menu>Home</menu>
<menu>Tags</menu>
<menu>API</menu>
<menu>Related Technology</menu>
</nav>
</header>
<aside id="sidebar">
<h3>Html 5 Features</h3>
<ul>
<li>Audio</li>
<li>Video</li>
<li>Canvas</li>
<li>Web storage</li>
<li>Drag and Drop</li>
<li>And many more</li>
</ul>
</aside>
<section id="content">
<h2>Dive into HTML 5</h2>
<article>
<h2>What is the HTML 5</h2>
<p>HTML 5 is the update version of html 4.And its brigs many new features for web developer.</p>
</article>
</section>
<footer id="footer">
<h4>Copyright</h4>
<p>This site is copy right to MR.Tuhin Bepari.</p>
</footer>
</div>
</body>
</html>
 |
| HTML 5 Basic Structure After using CSS |
Demonstration:
We style as usuall we did.We done our old styling in a new skelten of markup.For Older Browser:
Most of the modern Browser treat html 5 semantic tag as block level element.But in old browser like internetexplorer 6-8 and mozilla firefox below 4.For those old browser we need to add some extra styling and make them know that these html 5 tags are block level element.
For IE below 9:
Internet Explorer version less than 9 does not recognize the html5 new tags even we told that they should betreated as a block level element. One person solve the problem.
We have to do
Step-1:Go to http://code.google.com/p/html5shiv/
Step-2: Copy these code from that page
 |
| for IE <9 code snippet. |
Step-3:paste these code to your head tag.
In these code there have a link to a javascript page.On that page there have a clear instruction for IE version
less than 9 browser how to treat html5 new tag.Thats all.
Enjoy Coding.
