Learn Basic Css and Div

Heres a short tutorial on learning basic CSS and Divs.
I have just recently learned, so some things may not be exactly correct. Feel free to correct me of any errors I may have made.

Alright. Let’s start off with a basic style page. I personally think that it is better to link to a separate style.css page only because if you want to make further changes to the css code, you don’t have to edit every single page. So let’s start off with a style.css. You can use notepad, dreamweaver, any program that allows you to put text in and save as many different formats. Your page should be blank now, nothing in it.

Now every css code that you make, starts with a “#”, the variable after that, and then curvy brackets. An example code would be:

#example {
content;
}

There are different ways of doing css work, either doing it like what I just showed you, or like this:

#example { content; }

Either way is fine, but if you want to be kept organized, I suggest the first one. Now, every line you add, must be ended with “;” or else it will run off to the other line.

Correct:

#wrapper {
background: url(images/file.jpg);
}

Wrong:

#wrapper {
background: url(images/file.jpg)
}

If you are familiar with php, than that part should be easy for you.

Now, what I am going to do is make a simple “wrapper” file. I use wrappers simply to hold all the other divs. It makes it easier to center your page and do many other things with basic alignment. The wrapper should contain how wide the whole thing will be.

Here is an example code:
#wrapper {
width: XXpx;
margin: auto;
}

Yours can vary with what you want inside the wrapper.

We will now move on to the body. The body is basically what is in the background. It is useful when having gradients as backgrounds and you need the gradient image, and a certain color. When having a gradient, you want the background to only repeat either over the “X” axis, or the “Y” axis. Think of it as math, the “Y” axis would run up and down while the “X” axis will run left and right. You would mainly use the “X” axis.
Here is an example code:
body {
background: url(image/background.jpg) repeat-x;
background-color: #fff;
}

Your background image and color will vary. We aren’t using the “#” behind the body because our index.html will automatically detect is as the body tag.

Now for coding the css which will be used in divs.
There are many different settings, but I will only explain a few.

background: url(images/file.jpg); – This will be used as the image. Example: The header, maybe the content box, etc.

height: XXpx; – This is used if your image has a set height. The only way you wouldn’t want to use this is if your image is going to expand up and down. Otherwise, this should be a set number.

width: XXpx; – This is used if your image has a set width. The only way you wouldn’t want to use this is if your image is going to expand left and right. Otherwise, this should be a set number.

float: left, right, none, inherit; – You would use one of these if you wanted to align a number of divs on the same line. This is really useful. It’s pretty self explanatory. Left would align the image all the way to the left, and right would align the image to the far right.

margin-top, bottom, left, right: XXpx – You would use this if you wanted to make a set amount of pixels from the left or right side of the screen, or the top or bottom of the screen. This is commonly used for alignment. It is not common to get the pixels exact the first time so you would have to play around with those settings.

padding: XXpx – This can be left just as padding, or padding-left, or right. This is meant to be used so that text does not start at the side of an image. Makes it look better.

These are only some of the settings used, I will add more as I learn.
An example code using some of these settings would be:
div#header {
background: url(images/header.jpg);
height: 62px;
width: 217px;
float: left;
margin-top: 17px;
}

HTML + Divs part

Now, you have coded your css page (I hope). Now let’s start our html page. I am hoping you know basic html already since I am not explaining everything about html.

As you should already know, the most common way to start an html page is


<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Everything we will add will be in the body section. But first, we need to include our CSS file. My css file will be named style.css as that is the most common name, but yours can be stylesheet.css, or whatever you want it to be. Anyways, the code you will add is

<link href=”style.css” rel=”stylesheet” media=”screen” />

You will add this right under the <title></title> tags.
Alright, now for divs. These are easy, and pretty self explanatory.
First what you would want to make, is your wrapper div.

<div id=”wrapper></div>

You will add all your divs inside this div. I like to organize it with tabs. Here is an example code of all the divs inside the div wrapper:

<div id=”wrapper”>
<div id=”header”></div>
<div id=”div”></div>
<div id=”div”></div>
<div id=”div”></div>
<div id=”div”></div>
<div id=”div”></div>
<div id=”div”></div>
<div id=”div”></div>
</div>

This will all be added under the <body> tags. but  remember that just basic u can add right col or left col or some footer