Psd to CSS conversion code sample

by | posted: July 13, 2011 4 comments

 PSD To CSS Conversion

Today we give a basic concept and code sample to all of you, that how to convert psd to css. Css is abbreviation of  Cascading Style Sheet. In this tutorial we just give the overview that how looks the HTML code and How we write a CSS file for a website.

In 1st part we set our basic html for a psd. The detail tutorial on slicing of Psd for a web will be published in next working days.  Today we just go through with HTML and CSS. In this Part we divide our website page into different division called div’s. The No of div is depend upon your design of psd. Normally we have a main div and in between  main div we have multiple divs like content, Logo/Menu, Feature Content, Content, Footer etc. Look down the basic HTML code for PSD to CSS conversion.

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Junkaria</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />

</head>

<body>
<div id=”main”>

<div>

<div id=”header”>

Logo / Menu

</div>

<div id=”block_feature”>

Featured Content

</div>

<div id=”block_content”>

Content

</div>

</div>

</div>

<div id=”footer”>

<div>

Footer

</div>

</div>
</body>
</html>

 

The 2nd part is CSS in which we defines the attributes of all the divs. Attributes of div means that how the div contents looks like in web browser. What are the Font size, family, text alignment, padding etc.  Look down the sample CSS code for a webpage.

body {
margin:0px; padding:0px;
background-color:#FFFFFF;
}

#main {
background-color:#06458e;
}
#footer {
color:white;
}
.container {
width:996px;
margin:0 auto;
border:1px solid blue;
}

www.junkaria.com

Related Posts Plugin for WordPress, Blogger...

Related Search Terms:

Muhammad Fahd Altaf

Related Posts

4 Responses to “Psd to CSS conversion code sample”

  1. Reply
    DESIGN STUDIO
    July 23, 2011 at 10:59 am #

    Appreciate your time on that. Thanks for posting it.

  2. Reply
    KRZYSZTOF 'RACZUS' RACZEK
    September 15, 2011 at 6:38 pm #

    Thanks for sharing

Trackbacks/Pingbacks

  1. XHTML CSS TEMPLATES – PSD TO CSS CONVERSION CODE SAMPLE | XHTML CSS - STYLE SHEET AND HTML PROGRAMMING TUTORIAL AND GUIDES - July 14, 2011

    [...] from: Psd to CSS conversion code sample Share and [...]
  2. CSS EDITOR :TOP 5 BEST AND FREE ONLINE EDITORS FOR WEB DESIGNERS - July 17, 2011

    [...] any website or blog. Some days before we post How to Convert PSD to CSS?. We web designers face some problems on remote area [...]

Leave a Comment