Hi.  This is my crappy guide to css.  I pray this doesn't screw you up even more. :p


--------------------------------
The Beginnings
--------------------------------

Of course, there's always the beginnings.  


You can use CSS in two ways.  1:  You can have it as a seperate file and link it to the file you want it to affect.  2:  You can have the CSS directly in the file it affects.

Since this is pitas...well...you COULD link it from an outside source, which would be your site (I dunno if it would let you link .css files though).  That would make it neater and more organized, however, putting it all in one file saves on uploading time.  But I'll let you decide on what you want to do.



If you want to link the .css file to the file it affects, this is what you do.  Between the <head> tags in your html file, put this:


<link href="nameofyourfile.css" rel="stylesheet" type="text/css">



But if you want to stick it all in your html file, put this between the <head> tags:



<style type="text/css">

</style>



We'll get to what goes between those tags in just a moment.


--------------------------------
Body attributes
--------------------------------

Okay, now we'll get to start on the actual css part.

You always start with the stuff for your body.  This can include background color, scroll bar colors and whatnot.

First, you need to give it a name.  Well, for body, you don't have to name it.  

If you're doing a separate file, just open up notepad, and put this:

BODY

That's right.  Just body.  Save it as a .css file, and when you want to open it, use notepad.  It'll come up looking like an ordinary textfile.  Unless you'd rather use something else...but the filename HAS to end with ".css".  Otherwise it won't work.

If you're putting your css into your html, just put it between the tags. :D 

Now, you use { and } in css to close attributes just like you use < and > in ordinary html. The next step is to put a { next to body; like this (doesn't matter if your css is a separate file or not):

BODY {   

It's time to add your attributes!  Here are some basic things you could do:

background-color: black;
scrollbar-DarkShadow-Color: transparent;
scrollbar-Track-Color: transparent;
scrollbar-Face-Color: transparent;
scrollbar-Shadow-Color: #FF0000;
scrollbar-3dLight-Color: #FF0000;
scrollbar-Highlight-Color: #FF0000;
scrollbar-Arrow-Color: #FF0000;  
background-image: url(bg.jpg);  <--if you have a background you wanna use, just change "bg.jpg" to whatever the name of your background file is, or the link to your bg.  
background-repeat: repeat-y;  <---to put into English:  "repeat the background vertically, from top to bottom". you would use x if you wanted it to repeat from left to right, obviously. :D  
background-position: left top;  <--if you need it centered, replace left top with "center".  Or right.  Or whatever. :D
background-attachment: fixed;  <--I know you know what that means :p

Please note that you spell out everything, and after each attribute you wanna add there's a colon ( : ) and after the color/position/whatever there is a semi-colon ( ; ).  THEY ARE IMPORTANT.  If you're missing them, the attribute WON'T work.

So, let's say I just want a red background.  it would look something like this:



BODY {

background-color: red;   <--note the colon and semi-colon, and where they are located.



After I do that, I need to close the body attributes.  You do that by putting a } after you list your attributes!  So, to finish things with my red background, I'd do this:



BODY {

background-color: red;  }



Congratulations!  You have finished the body section!


--------------------------------
Content attributes
--------------------------------

Of course, what kind of page would you have without content!  This is basically the same thing as the body section, but there are a few changes you should know.

First of all, you can name this whatever the hell you want.  It can be content, or entries (if you're using the html for a blog), or bigp33n, whatever you want.  But please note this is case-sensitive (this will be explained later on) and that before you name it, you need to add a period.  No period, no workies.  Just like this:


.content

Place ".content" right under the body section of your css. Or whatever you named it. :D

Now this is a repeat.  Put { after ".content".  Now, attribute time!  Remember, this is what your font is going to look like. So you'll need to have attributes like:


	font-family: verdana;
	font-size: 9px;
	background-color: 330000;  <--if you want your text to have a different color than the normal background
	color: 9F687B;  <--font color
	line-height: 15px;  <--the bigger you make it, the more spaced the lines will be.  Like...double spacing for a school report...or triple spacing...etc.  
	text-align: justify;  <--you can put "center", "right", or "left".  whatever you want.
	border-left: 1px solid #5C0101;  <--borders can go around your content if you want.  You can all all the content boxed it, or just use what you want.  If you want a thicker border, make 1px 5px or however much you want.  Various borders include "dashed", "dotted", "double", "ridge", and "groove".  You can find more on the internet.  You would only use border-left if you wanted the left side of your content to have a border.
	border-right: 1px solid #5C0101;  <--to put a border on the right side of your content.
	border-top: 1px solid #5C0101; <--the top
	border-bottom: 1px solid #5C0101; <--the bottom
	border: 1 px solid red;  <--if you don't want all of the sides to have a border but you don't want to have to type out four separate attributes.
	cursor:  not-allowed;  <--other cursors include "crosshair", "help", "n-resize", "nw-resize", "sw-resize", "move", "hand".  I think they are more, which you can find on the net.


So after you list all the attributes you want, close it with }.  Congrats, you have finished the content attributes!


--------------------------------
Links
--------------------------------

Links is the easiest.  Now this is another section that has it's own name already, so you don't have to name it or put a period before it.  It's:


a {



Simple, neh?  Now, add your attributes, which could be:



text-decoration: none;  <--this can be "overline" or "underline" or none if you don't want your links marked 
font-weight: bold;  <--make it bold, italics, whatever
filter: Glow(color=white, strength=3); height: 0;  <--Lordy there's so many filters you can do, but I'm too lazy to list them.  You can find more on the web.  If you use it, make sure you include the height stuff. 
color: D21E1E; 
cursor: nw-resize;  



So, after you list them, close them!




If you want to do a section for what happens when you put your mouse on a link, start a new section.  It's:

a:hover {
Add your attributes, and close.  



Want attributes for a link you've clicked on?:


a:visited {
Add your attributes, and close.  You're done! :D



--------------------------------
More stuff
--------------------------------


Now, if you want more to work with (like maybe you have an input button, or you want headers to separate your stats on your blog) you can simply add more sections.  Name them how you want (don't forget the period before the name!) and add your attributes.  (Input areas would be font and the stuff involved with that, scroll bar colors, and background colors.  Headers would be a border and font stuff.)  Feel free to experiment!  


When you're finished with your css, and you have a separate file, just make sure your last section is closed with a } and save it.  No need to do anything else.  If your css is in the html file with everything else, just make sure all your css is between the <style> tags and you'll be fine. :D

That ends my css guide.  MOVING ON~~ :D



--------------------------------
Div positioning and how to link to your css sections
--------------------------------

To break it down, it doesn't matter if you have a separate css file or not.  It really doesn't matter.  

We'll start with linking to ".content".  Let's say I have this in my html file:


"Hi my name is Usi and I like to play with div layers. It is so much fun and actually pretty easy to do!  Weeeeeeeeeeeeeee!"


If you don't care about the positioning of the sentence, just add this before the sentence:


<div id="content or whatever you named it", class="content or whatever you named it">


And put this after the sentence:

</div>  <--not closing the div layer will result in you being unable to do any other div layers





However, if you want to position the text elsewhere, put this before the sentence:


<div id="content" style="position:absolute; width: 300px; left: 200px; top: 500px;" class="content">


width = how big you want the div layer to be.  If you want your content area to be big, make it at least 300px/400px.
left = how far from the left you want the div layer to be.  Basically, it pushes the div layer to the right.  If you don't want to push it, change it to 0px.
top = how far down you want the layer to be.  Basically, it pushes the div layer down from the top.  If you don't want to push it, change it to 0px.



And put this after the sentence:

</div>



You can do this for images or whatever you desire.  Just make sure to change the id and class name to fit the name of the attributes you want, and adjust the pixels to what you need.  



--------------------------------
Using headers
--------------------------------

You wanna section off your info, and have a header section?  No problem.  Let's start with this example:


<div id="content" style="position:absolute; width: 300px; left: 200px; top: 500px;" class="content">
Welcome to my page!  This is filled with great stuff.  Please use the links on the left to navigate!

Update:  I added new images to my gallery!  Please check them out!!

Do you need to contact me?  You can email me at this address! Or you can sign my guestbook!  Or pm me in the forum!
</div>


Now, wouldn't that be more organized with headers?  Let's change it a bit:  


<div id="content" style="position:absolute; width: 300px; left: 200px; top: 500px;" class="content">

<p align="right" class="header name">Welcome!</p>

This is filled with great stuff.  Please use the links on the left to navigate!

<p align="right" class="header name">Updates</p>

I added new images to my gallery!  Please check them out!!

<p align="right" class="header name">Get a hold of me!</p>

Do you need to contact me?  You can email me at this address! Or you can sign my guestbook!  Or pm me in the forum!

</div>


All you need to do is change whatever you want, and there you have it.

p align = where the font lines up.  If you want it to the left, put left.  Or right.  Or center.  Whatever you want.
class =  the name of your header section needs to go between the " and ".  This way you get your attributes added to the headers.
</p>  <---you NEED this after you do the text you want as a header.  Otherwise all your information won't be sectioned off the way you want!  



Oh I hope that helps. ~_~  I hope I didn't confuse you anymore.