Welcome

Welcome to my slice of Neopets! :D I have two different guides for you to enjoy: CSS Basics and How to Make a Petpage Layout! I have also added links within each petpage to help you navigate you way through! I hope you enjoy the guides and that they help!

You must read the whole petpage! The code for a whole page is not at the end. This page is for learning, so you have to read it to do it. Sorry to dissapoint!

navigate

this layout

Unfortunately because Internet Explorer loves giving me a hard time, this layout looks best in Firefox. There isn't too much of a difference, but there is enough that it makes me go "arrrg!" So, please, view this page in Firefox, you should be using that browser over IE anyways. :P

link back

I hope you enjoyed my guide and I would love it if you would please link back to it and tell all your friends! Go on, use the button below, you know you want to!



Visitors

Since 1/8/06:

places you should go






CSS Basics and Shorthand

This guide has two parts: CSS Basics and CSS Shorthand. The navigation splits them up for you, so you can find youe way through each one. Enjoy!

How to read the guide

This guide isn't super confusing, but I thought I'd give you a few quick tips on how to read it as well as some general tips, so you aren't confused. :)

CSS Basics

In this tutorial, I will go over some basic functions of CSS used on Neopets.com. Such as changing fonts, colors, backgrounds, etc. Make sure to read the next part, it's super important!

Basics

Changing the font-face, size, and color of your text

One of the main things that CSS is used for is to change the font-face, size, and color of the text in your lookup. This is quite simple. You want to change all of the text, so you place this information in the part of your CSS. Here is what the code is:

body { font: 8pt tahoma; color: #000000; }

Notice that we combined the font-face and size of our font into one attribute. This is helpful because it allows us to use less characters. Also, you do not NEED the spaces between each attribute or between the beginning of the style and the attribute. I only put those because I find it is easier to edit my style later on. If you need to, you can have no spaces between them, it will not matter. *Note: This is not for the spaces between the words, just the linebreaks.

Links, Links, Links, and More Links!

These are things that we really want to change, huh? :P Lets get away from that oogly blue! Frst, lets talk about each pseudo class we use to change them. Don't worry about the technical term for them, let's just know what they do. :)

Each of these pseudo classes are appled to the HTML tag, with the use of CSS, meaning we don't have to directly do anything to the HTML tag. Moving on, each of these psuedo classes are their own different CLASSES. Don't worry about understanding this, just put these. :P Below are the basics are your links.

a:link { font:8pt tahoma; text-decoration: none; color:#000000; } a:active { font:8pt tahoma; text-decoration: none; color:#000000; } a:visited { font:8pt tahoma; text-decoration: none; color:#000000; } a:hover { font:9pt tahoma; text-decoration: none; color:#000000; }

Usually, when I am doing my links, I usually make the a:link, a:visited, and a:active links all the same color and the a:hover link to a different color. Since I do this, I can shorten my code to this:

a { font: 8pt tahoma; text-decoration: none; color:#000000; } a:hover { font: 8pt tahoma; text-decoration: none; color:#FF0000; }

Here is a list of the other effects you can use by just adding them into the code above. Each is separated by a semi colon (;) and you can use as many as you want (but use caution as it may get too busy):

Adding background properties

Adding background a image and color is another thing that CSS is popular for. By using CSS to add this these, we can define many different properties. The basic code for adding these is this:

body{ background-color: #HEXCOLOR; background-image: url('URL OF IMAGE'); background-position: POSITION YOU WANT *property property*; background-repeat: REPITION YOU WANT IF ANY; }

Here is an example of the code with some properties in it:

body { background-color: #00FFFF; background-image: url('http://www.neopets.com/image.gif'); background-repeat: repeat-x; background-position: bottom center; }

Now, all of those above codes are great and work. But there is also a short-hand way of doing the same things which will make you use less character space. It goes as follows:

body{ background: color image repeat position; }

See how all of the codes we had above are now easily placed in one line of code? Here it is in action:

body{ background: #00FFFF url('http://www.neopets.com/image.gif') repeat-x bottom center; }

Cool, huh? ;)

Classes and IDs

These are my favorite! They help to seperate our style from our content. This is a very good thing because it keeps things organized. (Also, if you were creating an actual website, not just a lookup or petpage, they help you edit your website scheme much faster, along with the rest of the CSS we are using.) I would recommend uses classes or IDs any time you use CSS.

Note: This is more advanced.

As I said before, by using classes or IDs we are getting rid of the inline styles ( the stuff in the HTML that's like: ). We want this! :P

Right now, you are probably wondering what a class and a ID is. Well, I am about to tell you. :P

Here is an example of a page with a lot of inline styles:

body { background-color: #FFFFFF; } Hello! How are you doing? Yay!

Here is that SAME code, but with classes and IDs applied to it. See how much better the coding looks and how much more organized?

#ID{ position:absolute; left:50px; top:40px; width:450px; border:1px solid black; } .CLASS{ font:8pt verdana; color:blue; } .CLASS2{ color:red; } Hello! How are you doing? Yay!

Absolute Positioning

Absolute positioning is a great feature. With this, you can place images, divs, etc absolutely (meaning they won't move) anywhere on a page. Usually, I don't like these for websites or petpages, but I find it great for lookups! To set these to be positioned, you would add an ID, as talked about above, to the item.

You position an image, div, etc starting from the left of the screen (in PIXELS). So, when using this feature, you really only need three things in your CSS and that is what type of positioning you are using (absolute), how far away from the LEFT of the browser screen the item will be, and how far away from the TOP of the browser screen the item will be.

Absolute positioning is a lot of trial and error. You basically keep guessing, unless you use Paint to measure the pixel distances or Adobe Photoshop, but I am not sure about Paint Shop Pro. Here is the very simple coding:

ID { position:absolute; left: # OF PIXELS FROM THE LEFT OF THE SCREEN; top: # OF PIXELS FROM THE TOP OF THE SCREEN; } ID2 { position:absolute; left: # OF PIXELS FROM THE LEFT OF THE SCREEN; top: # OF PIXELS FROM THE TOP OF THE SCREEN; } TEXT

Easy, right? :)

CSS Shorthand

When creating an actual website, a big advantage of CSS is that it cuts down on the webpage download time. Without CSS, you would have to change colors of fonts using the tag over and over again. But, with CSS, all that can be done in one CSS file. Cool, huh?

But, why stop there? By using CSS shorthand, we can cut down on the document size even more! Also, if you are using CSS on Neopets, using CSS shorthand will cut down your coding character space and allow you to add more text to your lookup/petpage/shop.gallery/etc!

Below is a list of all the basic shorthand properties. :)

Fonts

Instead of:

font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 11px; line-height: 2px; font-family: verdana;

use:

font: italic small-caps bold 11px/2px verdana;

So, your guideline for this would be:

font: style variant weight size/line-height family;

This shorthand only works if the font-size and font-family are specified. It can work without all the other properties, but those two must be present. Also, remmeber, if you leave out the other properties, they will automatically default to the value of normal.

Backgrounds

Instead of:

background-color: #fff; background-image: url('image.gif'); background-repeat: no-repeat; background-position: top left;

use:

background: #fff url('image.gif') no-repeat top left;

So, your guideline for this would be:

background: color image repeat position;

There is not set value that needs to be used in this code. So, if you leave something out, it just goes back to default.

Lists

Instead of:

list-style-type: circle; list-style-position: outside; list-style-image: url(image.gif);

use:

list-style: circle outside url('image.gif');

So, your guideline for this would be:

list-style: type position image;

Margin and Padding

Four Different Values

Instead of:

margin-top: 3px; margin-right: 4px; margin-bottom: 5px; margin-left: 6px;

use:

margin: 3px 4px 5px 6px;

So, your guideline for this would be:

margin: top right bottom left

Three Different Values

Instead of:

margin-top: 3px; margin-right: 4px; margin-bottom: 5px; margin-left: 4px;

use:

margin: 3px 4px 5px;

So, your guideline for this would be:

margin: top right&left bottom;

Two Different Values

Instead of:

margin-top: 3px; margin-right: 4px; margin-bottom: 3px; margin-left: 4px;

use:

margin: 3px 4px;

So, your guideline for this would be:

margin: top&bottom right&left;

One Value

Instead of:

margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;

use:

margin: 10px;

So, your guideline for this would be:

margin: top&bottom&right&left;

All of the rules above are the same for both padding and margins! :)

Borders

Instead of:

border-width: 1px; border-style: solid; border-color: black;

use:

border: 1px solid black;

So, your guideline for this would be:

border: width style color;

More tips

Thanks!

Thank you for using and visiting my petpage! I hope that everything was helpful to you and that it was all explained well; I try my best. If you feel that I did not add something on this page that should have been added, please feel free to neomail me and I will let you know if it would be good to add it (I am only adding basic things, sorry).

Or, if you have any comments about the page, neomail me for that too! :) However, I most likely will not help you directly with your coding unless I am in a good mood or see you around the boards needing help, I'm sorry, I just do not have the time to help with every question.

Thanks again, and please, tell all your friends!




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions