Quick note before you continue, this article is just for beginners and people who would like to start learning CSS and xHTML. As i was reading blogs and other people comments i realized that many of them don't know much about CSS and xHTML coding, just regular blog readers but they would like to learn it.

So to learn CSS and xHTML you would need something to start with and i would like to give you master CSS and strict xHTML code instead of plain long texts of explanations.

xHTML

 
 
<!--
/*<![CDATA[*/
@import url(/css/style.css) all;
/*]]>
*/
-->
<div id="container">
<div id="header">
<h1>Title of page goes here</h1>
<h2>Subtitle of page goes here</h2>
<h3>Skip to content</h3>
</div>
 
<!-- end header div -->
<div id="nav">
<ul>
<li><a href="#">Link #1</a></li>
<li><a href="#">Link #2</a></li>
<li><a href="#">Link #3</a></li>
</ul>
<ul id="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">sub directory</a></li>
<li><a href="#">current page</a></li>
</ul>
</div>
 
<!-- end nav div -->
<div id="main">
<h3>Title of article goes here?</h3>
 
Begin article here
<ul id="sidebar">
<li><a href="#">Sidebar Link #1</a></li>
<li><a href="#">Sidebar Link #2</a></li>
<li><a href="#">Sidebar Link #3</a></li>
</ul>
</div>
 
<!-- end main div -->
<div id="footer">
 
©2XXX company name here. Creative Commons link/ your own link</div>
 
<!-- end footer div --></div>
 
<!-- end container div -->
 

CSS

 
/***** Global Settings *****/
 
html, body {
border:0;
margin:0;
padding:0;
}
 
body {
font:100%/1.25 Arial, Helvetica, sans-serif;
}
 
/***** Headings *****/
 
h1, h2, h3, h4, h5, h6 {
margin:0;
padding:0;
font-weight:normal;
}
 
h1 {
padding:30px 0 25px 0;
letter-spacing:-1px;
font-size:2em;
}
 
h2 {
padding:20px 0;
letter-spacing:-1px;
font-size:1.5em;
}
 
h3 {
font-size:1em;
font-weight:bold;
}
 
/***** Common Formatting *****/
 
p, ul, ol {
margin:0;
padding:0 0 1.25em 0;
}
 
ul, ol {
padding:0 0 1.25em 2.5em;
}
 
blockquote {
margin:1.25em;
padding:1.25em 1.25em 0 1.25em;
}
 
small {
font-size:0.85em;
}
 
img {
border:0;
}
 
sup {
position:relative;
bottom:0.3em;
vertical-align:baseline;
}
 
sub {
position:relative;
bottom:-0.2em;
vertical-align:baseline;
}
 
acronym, abbr {
cursor:help;
letter-spacing:1px;
border-bottom:1px dashed;
}
 
/***** Links *****/
 
a,
a:link,
a:visited,
a:hover {
text-decoration:underline;
}
 
/***** Forms *****/
 
form {
margin:0;
padding:0;
display:inline;
}
 
input, select, textarea {
font:1em Arial, Helvetica, sans-serif;
}
 
textarea {
width:100%;
line-height:1.25;
}
 
label {
cursor:pointer;
}
 
/***** Tables *****/
 
table {
border:0;
margin:0 0 1.25em 0;
padding:0;
}
 
table tr td {
padding:2px;
}
 
/***** Wrapper *****/
 
#wrap {
width:960px;
margin:0 auto;
}
 
/***** Global Classes *****/
 
.clear         { clear:both; }
.float-left    { float:left; }
.float-right   { float:right; }
 
.text-left     { text-align:left; }
.text-right    { text-align:right; }
.text-center   { text-align:center; }
.text-justify  { text-align:justify; }
 
.bold          { font-weight:bold; }
.italic        { font-style:italic; }
.underline     { border-bottom:1px solid; }
.highlight     { background:#ffc; }
 
.wrap          { width:960px;margin:0 auto; }
 
.img-left      { float:left;margin:4px 10px 4px 0; }
.img-right     { float:right;margin:4px 0 4px 10px; }
 
.nopadding     { padding:0; }
.noindent      { margin-left:0;padding-left:0; }
.nobullet      { list-style:none;list-style-image:none; }
 

Example

And here is one really good example of simple template, designed by Six Shooter Media named Basic

Demo
View demo page

Download
Download Basic example (Downloaded 1427 times)

If this post was helpful contribute to StylizedWeb by registering domains

Have some feedback? Leave a comment