body{background:#66CC00} a {color:#99CC00;} a:visited {color: #99FF66;} .content {top: 15px; left: 350px; width: 500px; height: 600px; overflow:auto; background-color: #FFFFFF} body{scrollbar-face-color:#99CC66; scrollbar-track-color:#99CC33;scrollbar-arrow-color:#000000} h1 {background-color: #CCCCCC; border-bottom: #33CC33 dashed 10px; font-family: georgia; font-size: 40px; color: #33CC33; width: 100%; line-height: 100px; margin:0px;} h2 {background-color: #CCCCCC; border-bottom: #33CC33 dashed 5px; font-family: georgia; font-size: 15px; color: #33CC33; width: 100%; line-height: 20px; text-align: right; margin:0px;} TEXTAREA{color:#339900;font:8pt century gothic;border:1px solid #99CC00;height:100px;width:200px;} td,p,body{color:#339900;font:8pt century gothic} />

How to Code a Petpage

DEAR VALUED GUESTS: Please refrain from neomailing me on this account, Hotpink_guitar. I want you to neomail me on my MAIN account, SHAYDZ. I will no longer reply to neomails to this account

Update: I never really pay much attention to this guide. While I am keeping it up, you can expect a much better guide on my main account before the end of summer, hopefully (: OH and I'm fixing this madness with the positioning.

Where do we go, where do we go now?

Back to the top! Welcome and About! The entire code! What? Remove DIVS Ingredients Naming the Chicken Headers Decoration Transition Eat! Credits Banner Assistant Chefs

Welcome and About

Back to the top!
Welcome to my newly edited and revised guide entitled "How to Code a Petpage". Petpages are relatively easy to code, if you have to proper codes. SO, I am going to give you these codes, in hopes that you will go out and de-noob many of the guilds whose webbies are horrible. This guide isn't hard, and it doesn't take a lot of time. To make it easy for you, I'm simply going to relate EVERYTHING to a plate of chicken. Chicken is easy to visualize.

THE ENTIRE CODE

Back to the top!
I've gotten a lot of neomails asking "where does this go where doest that go" so here is the ENTIRE CODE. Please please please read the rest of the guide before asking questions on it.

STEP ONE: WHAT?

Back to the top!
In order to make a chicken, you have to know you're making a chicken. The same goes for a computer making CSS come to life. It must KNOW what it's reading, the same as you must know the difference between a novel and a recipe book. With that stated, here's how we tell a computer that we're writing CSS:

PLEASE REMEMBER TO PUT EVERY CODE INSIDE THE STYLE TAGS UNLESS SPECIFIED NOT TO!
So, with all of that out of the way, we're moving on to REMOVERS.

STEP TWO: REMOVE

Back to the top!
If you don't want things to be too crazy in the kitchen, you have to clean off the counters and table and such. In CSS, it's taking the stupid neopets header and text off of the page. SO, here's how we do that (in between the style tags, and at the BEGINING of them):

STEP THREE: DIVS

Back to the top!
Before we can make a chicken, we have to have something to put it on. DIVS are the way I prefer to code things, because it's easy to memorize the codes. DIVS are like the plate. I can move a plate around, position it how I like, but it's going to be relatively useless until I put something on it. Same with CSS, I can move a DIV around, but before I put my content in it, it's a box on a page. Don't do that to someone D; it pains them. Remember that this code goes in between the style tags above (as we must know that we're putting chicken on the plate, and that we're using CSS to make the DIV appear :o): The next part goes after the style tags, it tells the computer to SHOW the DIV and all of the text in it. It MUST be outside the style tags :)

<div class="text" style="position: absolute;">
<h2>This is my header</h2>
This is my text.

<br>
I know, I know, why did we move the position:absolute thing?  Well, that's because Neopets has some really annoying filters.  In normal CSS, it would be in the first code, not the second.
<h2>
<a name="Ingredients"></a> STEP FOUR: INGREDIENTS</h2>

This is just an important tidbit of information.  When you use colors, it's always best to use the true HTML colors.  That means #FFFF00 means yellow.  You can google them to find out more colors in different shades.  It's really better than typing "red" as you may not WANT bright red.  That and certain browsers can't see RED but they can see #FF3333.  And always use a # sign.  However, if you're against google, use <a>this page</a>
<h2>
<a name="Title"></a> STEP FIVE: NAMING THE CHICKEN!</h2>

Here's how you make a big header, like the one that says "How to Code a Petpage" up there.  It's just a really big header.  Very easy.  Perfect for those who don't know graphics.<br><center>
<textarea>
 h1
{background-color: #33CCCC;
 border-bottom: #336666 solid 10px;
 font-family: georgia;
 font-size: 40px;
 color: #003399;
 width: 100%;
 line-height: 100px;
 text-align: left;
 margin:0px;}

STEP SIX: HEADERS

Back to the top!
Now that we've decided, cleaned, and found placement for our chicken (or told, removed, and placed our CSS) we're going to START making it. We're going to code a header :D. Notice the GREEN bars with GREEN letters and GREEN dashes you keep seeing? Those are called headers, and they're cool. People like creative headers. Headers consist of some things I'm going to explain below to save you some "OMG WHUTT?".

background-color: this is where you say what color the backgorund for your header is.
border: You can add a "-bottom" "-left" "-right" "-top" to any of those, changing where your border is. THEN after your colon you say the color and the type. The un-gawdy types are solid, dashed, and dotten (which are all pretty self-explanitory).
font-family: This is how your letters look. Common legible ones are Century Gothic (what I'm using), Arial, and Georgia (like in my headers ^.^).
font-size: This is how big the font is. Notice it's PT instead of PX. Point instead of Pixel.
color: Font color, need I say more?
width: how long does your header continue for. I recommend saying 100% and making it cover the span of the DIV.
line-height: how tall the header is.
text-align: center, left, or right, where is the text going?

STEP SEVEN: DECORATION

Back to the top!
Remember when you were a little person, and you would see green flakes on the chicken and your mom would call it decoration (or at least, mind did) because she didn't want you to know that it was actually some herb/leaf that was tasteless. Well, it made the chicken not look so boring. Well, if I went around typing in black with gray sidebars, blue links, and a white background people would be like "you didn't work very hard" so we're now going to tell the computer that we want different colored things. I'll add the code now for background, sidebar, links, and text.

and as little as I think you'll need this, here's the code to manipulate text boxes (like my white boxes with green borders where all of the code is)

In case you didn't know, here's how you make text bold underline italicand

bulleted.
THESE DON'T GO IN STYLE TAGS!

TRANSITION

Back to the top!
Now, who sits down at the table and eats /all/ of their chicken first, then all of the rice, then all of the mashed potatoes? No one. You have a bit of chicken here, then maybe a couple bites of potatoes, then more chicken. Well, in CSS if you want to link to another section on the page, you can use something we call Page Anchors. Do you see where I have "back to the top"? That's a page anchor, and when you click it, you get MORE PAGE ANCHORS that take you places. Here's what you do:

That little bugger goes where you want to have people click to see a different part of your page! In the "WORDHERE" part, put in a code word. That way you know if you're eating rice or potatoes or chicken. Now you have to tell the computer where to take you.

For this, I recommend sticking it right up there in a header, so that your viewer is instantly taken where they want to go. Use this code:

Please note that none of these anchors are in the the "entire code" section! You'll have to do this on your own, and they DO NOT go into style tags.

EAT!

Back to the top!
Now you need to click the 'preview changes' button. You'll notice something, when you go to save changes, the button will be covered up. This is where it gets tricky. If for some unknown reason you have links or text boxes, you need to press 'tab' until you're sure it's tabbed over every link/textbox on the ENTIRE page, then press enter. Good luck!

Credits

Back to the top!
YOU MADE IT! I do now require a credit when you use this guide. Simply writing Tutorial by: Maybememphis will be fine. Only pages that resemble the CSS codes on this page need a credit. Thanks! CSS made by: Shay (stadium__x) neomail me if you want help or something added.
Some codes from csshelp's petpage. Special thanks to Mickey for getting me started on CSS a last summer, 2007.

Banner

Back to the top!
If you're kind enough, put my ad everywhere:

Assistant Chefs :o

Otherwise known as affies.
Back to the top!

-invalid_words-