PREPPY LAYOUT CODING TUTORIAL

This is a tutorial for a preppy layout. This is NOT for collage layouts.

In this tutorial, you'll be not only coding a layout, but splitting it into header, footer, style.css, and index pages for using php includes. This is how stylesheets are split too. This will save you time in the end.

CLICK HERE to learn more about php includes (it's a php includes tutorial of mine) if you don't already know about them than it might confuse you at first. They are amazing.

This tutorial should all make sense by the end. Try not to give up cause this sh!t isn't easy at first and it takes time and patience.

CLICK HERE for the finished layout. You can use this as a visual reference as you go.

THE STEPS: STYLE.CSS

1. Create a file called style.css This page will have the styling (like h1, affies, elites, so on) of your coding in it and the placement of your sections (header, content section, sidebar, footer, so on)

Start putting in each piece of coding I give you below. I will explain each piece too!

----------- We will start out with the main body of your layout. -------------------

body {
background:url(URLGOESHERE);
background-color: #;
font-family: arial;
font-size: 9px;
color: #747373;
background-repeat: repeat !important;
background-attachment: fixed;
}

background:url () : This is the background image of the layout. If you're going to use a background and not a color than replace the "URLGOESHERE" with the direct link to your background. example: mine looks like this - http://www.loveblush.net/tutorials/codingstylesheetv1/bg.png

background-color : This is the background color of the layout. You need a background color only if you don't have a background image.

font-family : This is the main font for your layout. Do not use a pixel font for this, ever! You can google different fonts (like arial and verdana)

font-size : This is the size of the font you chose.

color : This is the color of the font you chose.

background-repeat: repeat : This means the background image will be repeated both vertically and horizontally.

background-attachment: fixed : The background is fixed. It will NOT scroll with the container of the layout.

------------- This is the container of your layout. This is the ENTIRE layout section, not just the individual pieces like the content and sidebar sections. { click here for example of container } ------------

#container{
position: relative;
margin: 5px auto 5px auto;
width: 699px;
padding: 3px;
background-color:#e9e9e9;
border: 1px solid #ddd;
overflow: hidden;
}

position: relative: The element is positioned relative to its normal position. If you don't understand this than it's ok. I'm keeping everything simple, but this part I can't explain simply.

margin : Area on the outside of an element.

top margin: the first number is the space around the top (mine is 5px)
right margin: the second number is the space around the right. Mine is set to auto so that it automatically calculates the space for all computers since all computer screens are different sizes. I suggest keeping yours at auto too.
bottom margin: the third number is the space around the bottom (mine is 5px, same as my top)
left margin: the last number is the space around the left. Again, mine is set to auto.

width : This is the width of the container. Please keep in mind that the width of your header is NOT the same as the width of your container. Header is a totally different piece of coding.

padding : Area inside an element (around the inside of it's border). If you noticed, my padding has ONE number unlike my margin. If you make your margin one number than every side will be that size.

background-color : This is the background color of your container.

border : This is the border around your container.

overflow: hidden : Don't worry about me explaining this. It's hard to explain, but you can google about it if you want.

-------------- Now we're on to the header part of the coding. { click here for example of header } ---------

#header {
margin: 2px;
background-image: url(URLGOESHERE) ;
border:1px solid #d3d3d3;
width: 690px;
height: 200px;
}

margin : Area outside of the header.

background-image : Where it says "URLGOESHERE", this is where you put your headers image url at. For example, mine looks like this - http://www.loveblush.net/tutorials/codingstylesheetv1/codingstylesheetv1header.png

border : This is honestly optional, but I like to use them. You can delete this part or put a border around your header. If you're keeping it than change where you see #d3d3d3 to the color that matches your layout.

width : This is the width of your header. Make this the same width as your background image.

height : This is the height of your header. Make this the same height as your background image.

---------- Now we're on to the sidebar section of the layout { click here for example of sidebar } -----------

#sidebar{
float: left;
width: 190px;
padding:5px;
margin:4px 0px;
background-color:#f0f0f0;
}

float: left : This just makes sure the sidebar is on the left.

width : This is the width of the sidebar.

padding : This was explained already

margin : This was explained already

background-color : This is the background color of the sidebar.

---------- Now we're on to the content section of the layout { click here for example of content section } -----------

#content{
float: right;
width: 475px;
padding:5px;
margin:4px;
background-color:#f0f0f0;
}

I shouldn't need to explain any of this. If you've been following this tutorial than you should understand the pieces to this section.

---------- Now we're on to the footer section of the layout { click here for example of footer section } -----------

#footer{
clear:both;
background-color:#e9e9e9;
border-top:1px solid #d3d3d3;
text-align:center;
padding:5px;
}

clear: both : This basically just means it wont float on the left or both, it goes straight across.

background-color : This was explained already

border-top : This is a border around the top of the footer section.

text-align : This is where your text will line up at. Example, left or right or center.

padding : This was explained already

♥------------------------------------------------------♥

CLICK HERE for PART TWO of this tutorial

♥------------------------------------------------------♥