Learn CSS and xHTML

add to

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>
 
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 -->
 
</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 1191 times)

Have some feedback? Leave a comment

What Now?

Digg this

Save to Del.ico.us

Stumble This
Subscribe to Stylized Web

More?

Posted on 16. 02. 2008
Filed as CSS, Design
By Dejan Cancarevic

Talk of the town

Renea: Earning an extra commission check help put my kids through private school! No doubt it
South West Balloon Flights: Thanks for the script. Looks nice.
Tony: How about WP Super Cache. Google now takes into account a site’s loading time and what better way to...
Emek Elektrik: Thanks Adminstrator For Dar Gelirli Users…
Nelly: That is a good article for css thank you admin

Amigos

What do you think?

13 Responses so far

By Danh ba web 2.0
on August 31, 2008

Thanks for share. It’s useful for me !

By london
on July 10, 2008

Thanks for sharing!

By Lindenshade
on May 22, 2008

I’m only just learning this stuff, and I have to say that starting with a basic template is the best way to learn. Books are helpful, but seeing case studies of layout is missing from most every publication on the subject.

Thanks.

-your 600th download.

By preety
on April 9, 2008

its is really stunning it,s nice.

By Reggie
on April 7, 2008

Thanks for sharing !

By 区区- -！！
on March 7, 2008

^_^“Thanks for sharing!

By Dejan
on February 18, 2008

@ 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

By Jermayn Parker
on February 18, 2008

Do you think that for beginners this is still a little too complicated?

By dk
on February 18, 2008

thanks!

By Dejan
on February 16, 2008

You are welcome

By ZEFF
on February 16, 2008

Cool! thanks for sharing

By MAJDA
on February 16, 2008

thanks!

Aug 27, 2008: StylizedWeb, web trends and tutorials | blog.bouctoubou.com - path ton chemin / Graphiste - Intégrateur XHTML / CSS

You might be interested in...

StylizedWeb is a web design trends and tutorials blog, maintained by Ross Johnson who also runs a web design company and design blog.

Popular Posts

Advertisement