April 8th 2017 03 Easter Rare Cutouts April 1st 2017 03 Easter Background PSDS01 Easter Brush Pack05 Easter Color Schemes03 Easter Phone Wallpapers03 Easter Cutouts March 19th 2017 03 Easter Cutouts01 Easter Color Scheme Template March 17th 2017 20 Site Names 10 Font Previews Easter + Spring Content 04 Sign Decos 20 Color Schemes 04 Vector Masks 03 Border PSDS 03 Tiff Montesco Cutouts 06 Avatars 02 Brush Packs Installing WordPress Using FTP Installing WordPress Themes Using FTP Defining Patterns Individual Letter Coloring Patterned Text Preppy Text Version One Simple Text Version One Simple Text Version Two March 14th 2017 01 St. Patrick's Cutout March 8th 2017 01 St. Patrick's Cutout 01 Cara Daley Cutout 02 Miranda Seto Cutouts 02 Rare Zoe Monroe Cutouts 02 Zoe Monroe Cutouts Double Box Navigation Tutorial March 1st 2017 15 Color Schemes 10 Avatars 01 Pattern PSDs 02 Brush Packs 02 Alva Jay Cutouts 03 Alva Jay Rare Cutouts 03 St Patricks Color Schemes 03 St Patricks Background PSDs Creating ABR File Tutorial Installing ABR File Tutorial Kerning Text Tutorial Creating Circle Brushes Tutorial Feb 16th 2017 Circle Navigation Tutorial Defining Brushes Tutorial Feb 14th 2017 10 Color Schemes Coding A College Layout Feb 8th 2017 2 textures 3 site model singles 10 avatars 2 Laura Delagarza cutouts 2 Zoe Monroe cutouts
- - - Previous Updates - - -
a b c d e

Coding A Collage Layout

Information

Difficulty: Medium
Class: HTML Coding

Date Posted: February 20th 2016
Revamped: February 8th 2017

Comments: Please don’t forget to credit everaft3r.net,
please do not redistribute my tutorial.


Part One Part Two Part Three Final Product

This tutorial is going to teach you how to create the basic structure of a layout. If you have any questions about this tutorial, please feel free to email me, admin@everaft3r.net. You will first need to open up some type of text editing program. Note Pad is a standard text program that comes as a factory application on most computers.

Step One

Create a text file and name it style.css. This file will contain all the main coding of your layout. Once you’ve created it, you will start adding your coding to it.

We are going to start with the body.

body {
background: #ededed
background-image: url(‘BACKGROUND IMAGE URL HERE’);
font-family: verdana;
font-size: 10px;
color: #666;
}

background-color: this is the background color of your website (change the color that best fits with your layout
background-image: this code is if you want to have a image as your background of your website (if your using an image as your background replace BACKGROUND IMAGE URL HERE with the URL of the image you are wanting to use, if your not using an image you can leave it blank or remove the line)
font-family: this is the font for your entire layout, you can change it to any universal fonts (example: verdana, arial, georgia and many more)
font-size: this determines the size of the font for your layout
font-color: this is the color of the font

Step Two



The next step is the header. The header is the main image of your layout.
Click here to see an example of a header

#header {
width : 750px;
height : 260px;
margin : 0 auto;
background-image: url(‘HEADER IMAGE URL HERE’);
}

width:this is how wide your image is
height:this is how tall your image is
magrin: this will center your layout to the middle of the screen .
background-image:this is your header image, simply replace HEADER IMAGE URL HERE with the link (URL) of the your image.

Step Three



The next step is the sidebar. The side bar is where you hold all your additional information
Click here to see an example of a sidebar

#sidebar {
position: absolute;
left:305px;
top: 265px;

width:230px;
padding:3px;
background-color:#cdcbcb;
}

position absolute: positioning that allows you to literally place any page element exactly where you want it.
left: this is the position of your sidebar from the left your screen.
top: this is the position of your sidebar from top of your screen. Play around with the numbers to set it where you want it to
width: this is how wide you want your sidebar to be
padding: This is the area inside the element. For right now you won’t need to worry about this in your layout, so you can leave it the way it is
background-color: this is the background color of the base of your side bar, you can keep it the same color as your background, or change it to a different color.

Step Four

The next step is to create the content section Click here to see an example of a content

#content {
position: absolute;

left: 536px;
top: 265px;
width:507px;
background-color:#cdcbcb;
padding:2px;
margin-bottom:5px;
margin-left:10px;
}

Most of this coding is pretty much the same as the sidebar, so I won’t be repeating myself.
margin-bottom: this is the area outside of the header, on the bottom.
margin-top: this is the area outside the header on the top.

Step Five


Now we are going to create the footer section Click here to see an example of a footer

#footer {
clear: both;
padding : 17px;
text-align : center;
}

clear: this means it will go straight across the content section.
text-algin:this will align your text to the center of the footer area.

Now the basic part of the style sheet is finished, you can add more coding to the style sheet such as custom headers, blockquotes, links and much more. I will be making separate tutorials for those soon

Continue To Part Two