Enteries RSS (1017) 02
2008
15:46 pm
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
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>title goes here</title>
<base href=”base url goes here” />
<meta name=”Author” content=”#” />
<meta name=”Robots” content=”#” />
<meta name=”Generator” content=”#” />
<meta name=”Keywords” content=”#” />
<meta http-equiv=”Expires” content=”#” />
<meta name=”Description” content=”#” />
<meta name=”Copyright” content=”#” />
<meta http-equiv=”Cache-Control” content=”#” />
<link rel=”Shortcut Icon” href=”/favicon.ico” type=”image/x-icon” />
<link href=”/script/javascript.js” type=”text/javascript” />
<style type=”text/css” xml:space=”preserve”>
/*<![CDATA[*/
@import url(/css/style.css) all;
/*]]>*/
</style>
<link rel=”stylesheet” href=”/css/screen.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”/css/print.css” type=”text/css” media=”print” />
</head>
<body>
<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>
<p>Begin article here</p>
<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”>
<p>©2XXX company name here. Creative Commons link/ your own link</p>
</div><!– end footer div –>
</div><!– end container div –>
</body>
</html>
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 576 times)
del.icio.us (
StumbleUpon
Digg
Wong it
9 Responses, April 7th
2008
22:00 pm
Thanks for sharing !
March 7th
2008
2:22 am
^_^“Thanks for sharing!
February 18th
2008
9:30 am
@ Jermayn Parker
I’m not sure, that’s why i need your opinion.
I was thinking it would be good if beginners have basic structure to always start with, and some basic example they can look up with.
There are plenty of recourses online for all tags etc, so i didn’t want to duplicate that content
Do you think that for beginners this is still a little too complicated?
February 16th
2008
20:05 pm
You are welcome 
February 16th
2008
15:51 pm
thanks!
Hvymajkl:
April 9th
2008
7:27 am
its is really stunning it,s nice.