Converting a PSD to XHTML/CSS

In this tutorial we are going to create a XHTML/CSS webiste by slicing a PSD, the PSD we will be using is the one from a previous tutorial we did on here called Creating A Nighttime Layout. I would suggest you get yourself a cup of tea as this tutorial can take over an hour to get through.
Finished

Folder Setup

Ok first things first I set up my folders and my standard CSS setup.
First I created a folder for the site.
folder

I then created two sub-folders called img and CSS, to contain the images and CSS files respectively.
folder

Next I created 3 CSS files, called style.css, reset.css and master.css.

Here is what I inserted into all of this CSS files.

Style

@import url('reset.css');
@import url('master.css');

What this does is imports the other two css files in.

 

Reset

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

This resets all of the CSS, giving us a level playing field to start from.

The master.css file for now is empty.

Index
Now that we have a file structure set-up and the starting point for the CSS taken of, we will create our index.html

This code creates a XHTML 1.0 Strict page, and sets up the initial HTML, head and body tags as well as adding a title to the page and linking the page up to the css file’s in the head section.

Slicing the PSD

Now we are going slice the PSD up and get it ready for use on the web. The PSD we are using is a one we recently created in a tutorial on this site. If you haven’t already we recommend you check that tutorial(link to tut) out, but if you want you can just download the PSD from the one we made earlier.

The first thing we are going to slice up is the background, to do this we just cropped down the PSD like shown below.
crop1

We then saved this for the web (save into the img folder we created earlier) and undo what we did so we had the original PSD back.
background

The next we are going to slice is the header, again just cropped down the PSD, how we cropped it is shown below.
crop2

We then saved this for the web (save into the img folder we created earlier) and closed the PSD.
header

This was a very quick way of the slicing the image, we could of removed the logo from the header and saved that as a separate image but for this tutorial we decided to keep it as simple as possible.

The CSS

I am now going to walk you through how I created the CSS.

body
{
background: url(../img/bg.jpg) repeat-x #156cd5;
}

This is the body tag, I have the set the background the image I sliced earlier, I then set it to repeat-x so that goes all the way across the screen horizontally finally I added the colour from the bottom of the image so that once the image ran out the colour would continue down.

 

img {border: solid 3px #b0aeae;}
 
p {
padding-bottom: 5px;
}

The img tag adds a 3px solid border to all images, this could be changed to a class tag and then added to specific photos if you had some photos you didn’t want to have a border or have a different colour border etc.

The p tag adds 5px padding to the bottom of all paragraphs.

#wrap {
width: 738px;
height: 100%;
margin: 0 auto;
}

This id is the wrap which contains all of the site and is used to center the site, the width is 738px, the height is 100% therefore it stretchs to whatever the content is, the margin is set to 0 auto which automatically centres the site by splitting up the space left on either side of the wreap evenly.

#header {
width: 738px;
height: 151px;
background:url(../img/header.jpg)
}

This stes the width of the header to 738px the same as the wrap, the height is 151px as this is the height of the background image wee are using for this section, which is the header we took from the PSD.

#contentwrap {
width: 738px;
height: auto;
background: #e8e6e6;
}

This is the content wrap which will contain the navigation and page content. Again the width is 738px, this height is set to auto so it stretches dependent on what content you put in. The background colour is a light gray.

#navcontainer{
width:738px;
height: auto;
padding: 15px 0 5px 13px;
font-family: "Arial Black";
font-size: 14px;}
 
ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
 
#navlist li
{
display: inline;
list-style-type: none;
}
 
#navlist a { padding: 3px 10px; }
 
#navlist a:link, #navlist a:visited
{
color: #000;
background-color: none;
text-decoration: none;
}
 
#navlist a:hover, #active
{
color: #fff;
background-color: #000;
text-decoration: none;
}

This is the css for the navigation div, the nav ul (Unordered List), nav li (List Items) and any link states. The main things to take not of here is the display: inline; which make the li items display horizontally instead of vertically.

#content {
width: 738px;
padding: 10px 5px 3px 23px;
font-family: Helvetica, Arial;
font-size: 11px;
}
 
.itemleft {
width: 318px;
height: 183px;
padding-right: 10px;
float:left;
}
 
.itemright {
width: 352px;
float: left;
margin-left: 5px;
padding: 0 0 10px 10px;
}
 
.bottomcontent {
width: 692px;
clear: left;
margin-left: 5px;
padding-top: 10px;
}
 
.footer {
padding-top: 5px;
font-size: 9px;
}

This chunk of CSS is for the content area, it has a main ID to hold everything, it has has 4 classes two for the top area to hold the image on the left and the text on the right and one for the text and then one for the footer. The main thing to take note of is the clear: left in the bottom content, this means that no floating elements allowed on the left side of this class therefore this class will be position below the two above.

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
	<head>
		<title>PSD to XHTML/CSS</title>
               <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	</head>
	<body>
	<div id="wrap">
 
	<div id="header">
	</div>
 
	<div id="contentwrap">
 
	<div id="navcontainer">
	<ul id="navlist">
	<li><a href="#" id="current">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Contact Us</a></li>
	</ul>
	</div>
 
	<div id="content">
	<div class="itemleft">
	<img src="img/landscape.jpg" alt="landscape" />
	</div>
	<div class="itemright"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper. Aenean arcu risus, imperdiet et, tempus in, interdum quis, massa. Donec magna elit, tincidunt gravida, egestas ut, vestibulum quis, lectus. Nullam porttitor. Nullam egestas mi eget mi malesuada condimentum. Fusce gravida libero non leo. Pellentesque nunc. Sed non augue. Nunc non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis. Donec eget libero et magna ultricies euismod. Vivamus mi. Mauris dui arcu, facilisis vel, fringilla sollicitudin, sagittis eu, dui.</p>
	</div>
 
	<div class="bottomcontent">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper. Aenean arcu risus, imperdiet et, tempus in, interdum quis, massa. Donec magna elit, tincidunt gravida, egestas ut, vestibulum quis, lectus. Nullam porttitor. Nullam egestas mi eget mi malesuada condimentum. Fusce gravida libero non leo. Pellentesque nunc. Sed non augue. Nunc non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis. Donec eget libero et magna ultricies euismod. Vivamus mi. Mauris dui arcu, facilisis vel, fringilla sollicitudin, sagittis eu, dui. Vestibulum quis orci vitae nulla mattis tempor. Fusce ullamcorper.</p>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus semper. Aenean arcu risus, imperdiet et, tempus in, interdum quis, massa. Donec magna elit, tincidunt gravida, egestas ut, vestibulum quis, lectus. Nullam porttitor. Nullam egestas mi eget mi malesuada condimentum. Fusce gravida libero non leo. Pellentesque nunc. Sed non augue. Nunc non risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis.</p>
 
<p>Donec vestibulum quam id purus. Ut dui est, vulputate quis, sollicitudin vel, sodales id, mauris. Praesent placerat, felis at hendrerit interdum, mauris odio malesuada mi, sit amet ullamcorper orci massa eu odio. Proin eros felis, pharetra vel, elementum et, egestas vitae, felis.</p>
 
<p class="footer">Made by WebDesignerHelp</p>
	</div>
 
	</div>		
	</div>	
	</div>
	</body>
 
</html>

The HTML is pretty simple, you just place the divs in the correct order (as shown below) then add the content to the appropriate divs.
Div Setup

If you have followed the tutorial correctly you should now have a site which looks the one created as shown here in this demo.

25 Comments to “Converting a PSD to XHTML/CSS”

#1 Posted by Tim Inman (25.03.09 at 02:56 )

Great simple tutorial. A great way to great a nice looking site.

#2 Posted by Franky (25.03.09 at 03:03 )

So thats what the reset.css is for. Hmm Interesting.

#3 Posted by Nguyen Ngo (25.03.09 at 03:43 )

Your tutorial just for your specific layout, it’s something useless for the others because of their complexity or property.
E.g
- Must have a background that can be loop
- Must have a full-width banner
- Must have enough, no more element
- blah blah

#4 Posted by Peter (25.03.09 at 06:45 )

Great tutorial! However I would like recommend to all busy coders/graphics designers to look after PSD to HTML coding services like http://youweyoucoding.com or any other. They can do all this “long stuff” professionally and in a short time manner.

#5 Posted by d0odx (25.03.09 at 07:03 )

This was a very straight forward and just good tutorial. I will bookmark your site and def check out your updates.

thanks a lot for publishing this.

#6 Posted by klausy (25.03.09 at 07:41 )

Awsome tutorial, very handy during the conceptual stages of a website, i am am trying to get my head around XHTML 1.0 Strict pages, previously i was using tables instead of divs’ and its kinda hard to re-adjust, i hope with time things will get better. Thanks

Regards
Klausy
http://www.twitter.com/klausy ( follow me)

#7 Posted by alexx (25.03.09 at 10:15 )

This was a very straight forward and just good tutorial. I will bookmark your site and def check out your updates.

thanks a lot for publishing this..

#8 Posted by Ryan (25.03.09 at 14:51 )

Very nice and to the point tutorial, this will definitely help me save a few bucks to pay my coder.

#9 Posted by Steve (25.03.09 at 16:59 )

Instead of listing all the components to reset, try just putting an asterisk, *. That will select all components.

#10 Posted by Honour Chick (26.03.09 at 02:19 )

great tutorial… thxs! ;)

#11 Posted by manikandan (27.03.09 at 11:39 )

Very great tips.

Thanks for the informations.

#12 Posted by Cindy (30.03.09 at 07:20 )

why should reset so many tags? I think you dont use some of them at all. I think it make the speed slow. but after all good tutorial for the beginner coders.

Thanks share.

#13 Posted by devit1104 (30.03.09 at 18:13 )

Thanx 4 Sharing Your Information….

#14 Posted by Muhammad Babsail (01.04.09 at 09:24 )

thanks, great article…

#15 Posted by leena (12.04.09 at 14:16 )

Good to get started. But for complex designs you really need to pull your hair:)

#16 Posted by dave (23.04.09 at 16:53 )

Hey That is so far one of the best and simpliest Converting a PSD to XHTML/CSS tutorial I have read.

Nice work!

#17 Posted by xhtml conversion (10.09.09 at 21:47 )

You did a great job, one by one every step are very simple and all steps are very useful for newbie thanks for sharing

#18 Posted by Shaun (05.10.09 at 14:44 )

Excellent tutorial. Clean and simple – a fantastic starting point. I like the inclusion of a reset too. So many people don’t do that, and then when something looks different on 2 or 3 different browsers they go crazy trying to fix it.

Another quick way to get started is with an automated service. They’ll take the PSD file, and generate almost all of the code for you. This one generates tons of comments so you can pick up where it left off (if you need it): http://psd2cssonline.com

Thanks.

#19 Posted by visit now (09.10.09 at 15:28 )

I love this site, there is so much information to be found. Thank you.

#20 Posted by leena (28.10.09 at 19:20 )

Good information and explained in good way. keep it up

#21 Posted by PSD to HTML (30.10.09 at 07:29 )

I cam across this tutorial on digg. This is good information for converting slicing PSDs.

#22 Posted by tip (17.11.09 at 07:26 )

perfect site !!!!!!!! Perfect piece of work fellows !!!!!!!

#23 Posted by John Rossi (19.11.09 at 18:58 )

This tutorial is very well done. It’s hard to find people that can communicate these concepts so clearly. Keep up the good work.

#24 Posted by R Aflec (26.11.09 at 09:58 )

“Another great article to read while coding web layouts:

http://www.xhtml-css-code.com/html/things-to-remember-while-coding-a-website-to-make-it-search-engine-friendly

Though, not exactly a psd to html conversion article, but one must keep these tips in mind while coding a PSD into search engine as well as user friendly web layout.

#25 Posted by PSD to xHTML (02.12.09 at 21:28 )

If you’re not up to coding yourself, you could just go with an xHTML/CSS coding service.