This is going to teach you how to create the basic structure of a layout. If you have any questions please feel free to email me [email protected] You will first need to open up some type of text editing program. Note Pad is a standard text program that comes on most computers.
First we will 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 will start of with the body section
• background-color: this is the background color of your website
• background-image: this is the url of your background
• 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
• font-color: this is the color of the font
• background-repeat: repeat : This means the background image will be repeated.
• background-attachment: fixed : The background is fixed. It will NOT scroll.
The next step is the header. The header is the main image of your layout.
•width: this is the width of your header
•height: this is how tall your header is
•margin: 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.
The next step we will doing is the sidebar. The sidebar is where you put your links, tagboard, affies, etc..
•position absolute: positioning that allows you to literally place any page element exactly where you want it.
•left: This just means your sidebar is on the left
•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.
•background-color: This is the background color of the sidebar.
The next step is to create the content section
Last but not least we need to create the footer section.
•clear: this means it will go straight across the content section.
•text-align :this will align your text to the center of the footer area.
Thats the basic part of the style sheet. You can add more coding to the style sheet such as custom headers, blockquotes, links and much more.
Now that your style.css has been created, we are going to move onto the next part of the tutorial. Now you are going to create a new text file and name it header.php
put this on your header.php