Web Development
Psd to CSS conversion code sample
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;
}
You must be logged in to post a comment Login