How to Convert a Slick PSD Design to XHTML/CSS

Styling the Page

Remember how we have two different CSS files? A reset.css and a global.css, well we are going to work on the reset.css file first. In this file we are going to just use the ready made availble YUI Reset 2. This will reset all of our elements in each browser to look the same.

Reset.css

The reset.css is as follows…..

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

Base Styling

The first part of the site we want to cover is the font & base structure of the site. We are going to set a font and background for the main body of the site, eliminate the underline on link element by using text-decoration: none; and user a basic container limiting the width to 1024px and centering it horizontally.

body {
	background: #F2F2F2;
	font: 10px Verdana;
}

a {
	text-decoration: none;
}

p, span {
	line-height: 20px;
}

#header, #featured, #content, #footer {
	overflow: hidden;
}

.container {
	margin: 0 auto;
	width: 1024px;
}

.clear {
	clear: both;
}

Checkpoint

Your page should now look like this.

checkpoint 1

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

Live demo View it online Download Take the source files

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

    Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

    Very good tutorial, It covered a lot of things, thanks

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

    i’m going to have to take time on this one.thanks for sharing

    Reply to this comment