top
16
02
2008
15:46 pm
filed as: CSS, Design
author: Dejan Cancarevic
comments: Subscribe
9 Responses

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

Basic

Demo
View demo page

Download
download Basic example Download Basic example (Downloaded 576 times)

Subscribe full RSS RSS
  • del.icio.us del.icio.us (0)
  • StumbleUpon StumbleUpon
  • Digg Digg
  • Mister Wong Wong it
9 Responses, Leave a Reply
9
preety
April 9th
2008
7:27 am

its is really stunning it,s nice.

8
Reggie
April 7th
2008
22:00 pm

Thanks for sharing !

7
区区- -!!
March 7th
2008
2:22 am

^_^“Thanks for sharing!

6
Dejan
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

5
Jermayn Parker
February 18th
2008
4:47 am

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

4
dk
February 18th
2008
2:24 am

thanks!

3
Dejan
February 16th
2008
20:05 pm

You are welcome ;)

2
ZEFF
February 16th
2008
19:32 pm

Cool! thanks for sharing

1
MAJDA
February 16th
2008
15:51 pm

:) thanks!

What do you think?

Name (required)

Email (will not be published) (required)

Website

About

StylizedWeb is blog about web trends and tutorials and KnowHow community forum designed and maintained by Dejan Cancarevic.

Six Shooter Media
logo and web site design

Search