HTML/CSS Guide
-The Basics-

Font Tricks

Make text bold
<b>TYPE YOUR TEXT HERE</b>

Make text italics
<i>TYPE YOUR TEXT HERE</i>

Make text underlined
<u>TYPE YOUR TEXT HERE</u>

Make text have a line through it
<strike>TYPE YOUR TEXT HERE</strike>

Make text scroll.
Example:
Scroll

<marquee>TYPE YOUR TEXT HERE</marquee>

Make text bounce off the sides of a page.
Example:
Bounce

<marquee behavior="alternate">TYPE YOUR TEXT HERE</marquee>

Change the size
Replace # with 8-20 and so forth.
<font size=#>TYPE YOUR TEXT HERE</font>

Change the color
Replace COLOR with any color.
<font color=COLOR>TYPE YOUR TEXT HERE</font>

Change the color using hexidecimal chart.
Replace 000000 with any six numbers or letters.
DO NOT REMOVE the # sign or the code will not work.
<font color=#000000>TYPE YOUR TEXT HERE</font></marquee>

Change font type
Replace FONT with any one of these fonts:
Arial
Verdana
Georgia
Impact
Modern
Ravie
Papyrus
Chiller
Terminal
Cursive (More commonly known as ComicSansMS)
Garamond
Castellar
Forte
Fantasy
<font-family: FONT>TYPE YOUR TEXT HERE</font>

Alignment

Make text centered.
<center>TYPE YOUR TEXT HERE</center>

Breaks

Skip down a line.
Example:
Text here
More text here
TYPE YOUR TEXT HERE<br>TYPE YOUR TEXT HERE

Skip down two lines.
Example:
Text here

More text here
TYPE YOUR TEXT HERE<p>TYPE YOUR TEXT HERE

Make a line to separate
Example:
Text here

Inserting an image

Image code
Replace URL HERE with your images url.
(For more details, see our FINDING AN IMAGES URL page)
<img src=URL HERE>

Link codes and tricks

Normal link code
Replace WEB URL HERE with the web page address
(For more details, see our MAKING A LINK page)
<a href="WEB URL HERE">Clickable word here</a>

Image link code
Replace URL HERE with the picture’s URL and replace WEB URL HERE with the web page address
(For more details, see our MAKING A LINK page)
<a href="WEB URL HERE"><img src=URL HERE></a>

Make link pop up in a new window
Replace WEB URL HERE with the web page address.
<a href="WEB URL HERE" target="new">TYPE YOUR TEXT HERE</a>

Textarea

For those of you who make graphics or other pages, textareas will be very important.

Normal textarea
<textarea>CODE OR TEXT HERE

Textarea for petpages
<text_area>CODE OR TEXT HERE</text_area>

Change size of textarea
Replace # with any number.
<textarea rows="#" cols="#" name="Code">TYPE YOUR TEXT HERE

Image tricks

Make a border around an image.
Example:

Replace # with 1-6. Replace URL HERE with your image URL/address.
<img src=URL HERE border="#">

Marquee Advanced

Make a border around your marquee.
Example:
marquee

Replace COLOR with any color and replace # with 1-6. You can also replace SOLID with dotted, dashed, and more.
<marquee style="border:COLOR #px SOLID">TYPE YOUR TEXT HERE</marquee>

Make a background color for your marquee.
Example:
marquee

Replace COLOR with any color
<marquee bgcolor=COLOR>TYPE YOUR TEXT HERE</marquee>

Make your marquee float up.
Example:
Look how it scrolls up

<marquee behavior="scroll" direction="up">TYPE YOUR TEXT HERE</marquee>

Background

Note: The new neopet layout has two backgrounds now, an 'inner' white one and an 'outer' gray one. Use code #1 for shops, galleries, and userlookups. Use code #2 for userlookups and petpages.

CODE #1
Replaces the 'inner' background with a picture of your choice.
Simple replace 'PICTURE URL HERE' with your picture's url.
<style>#main {background:url(PICTURE URL HERE);}</style>

CODE #2
Replaces the 'outer' background with a picture of your choice.
Simple replace 'PICTURE URL HERE' with your picture's url.
<style>body {background:url(PICTURE URL HERE);}</style>

Change background to a solid color:
Simple replace COLOR with any color of your choice.
CODE #1
<style>#main {background-color: COLOR;}</style>

CODE #2
<style>body {background-color: COLOR;}</style>

MORE COMING SOON!