Coding Guide

This is a complete coding guide that you can use to learn how code yourself, just copy and paste to make simple layouts, or use to edit premade css layouts.

HTML Basics

HTML stands for Hyper Text Markup Language. First off, everything goes between two triangular brackets called tags.

To add something to a page, you need an opening tag and a closing tag. The closing tag looks exactly the same as the opening tag, except with a / after the first triangular bracket, and tells the command where to stop. For example:
This tag begins to make all the text bold - <b>Bold Text</b> - This tag makes the bold font stop.

After you have this much down, html is very simple and easy to grasp.

Changing Font

Determine font size, style and color

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Font size 7

Other Font Effects

<b>text</b>	bold
<i>text</i>	italics
text	underline
<strike>text</strike>	~~strike~~
text	marquee
Line One <br>Line Two	Line Break Line Break
<p>Line One</p> <p>Line Two</p>	New Paragraph New Paragraph

Links

A link takes you to another page, or in some cases, to a specific spot on the same page.

<a href="/">Click Here</a>	Makes a link
<a href="/">Click Here</a>	Open link in a new window
<a href="/"><img src="-blocked-" border="0"></a>	Link an image

Page Anchors

The page anchor essentially marks a spot on the page, then you add a link that takes you to that spot. An example can be found on this page under Navigation.

Adding Images

<img src="-blocked-">	Put up an image
<img src="-blocked-" width="300" height="200">	Resize up an image (If you change only the height or only the width, the size of the image will automatically adjust.)
<img src="-blocked-" border="2">	Add a border

Backgrounds

	Change the background color of the page
	Add a background image to the page

Tables

Cell one	Cell two
Cell three	Cell four

Code:

<table border="2"><tr><td>Cell one</td> <td>Cell two</td> </tr><tr><td>Cell three</td> <td>Cell four</td> </tr></table>

CSS Basics

CSS stands for Cascading Style Sheets. CSS can be used to change the appearance of the entire page. To start your coding, you need an opening tag at the very beginning, and a closing tag at the end. All of your coding goes between the style tags.

How to Bypass the filters

Due to Neopet's coding filters, 'position' is no longer allowed inside the style sheets, so in order to position anything on the page, you must use inline coding. All the properties outside of 'position:absolute;' can still be placed inside the style sheet.

Basic codes

body{ background:#f11994;}	Change the background color of the whole page
body{ background:url(URL_HERE);}	Add a background to the whole page
body{ cursor:crosshair;}	Change the page's cursor. Other options: default, crosshair, not-allowed, re-size, help, wait
body{ font-size:8pt; font-family:Georgia; color:#a6f120;}	Change the font size, style and color of the whole page
a{ color:#f19410;}	Edit the color of the links
a{ text-decoration:none;}	Remove the line underneath the links
a:hover{ color:#adfe21;}	Edit the color of the links when you hover over them
b{ color:#faa021;}	Edit any bold font
i{ color:#faa021;}	Edit any italicized font
textarea{ border:2px solid #cccccc; font:7pt georgia; color:#f19410; background:#efefef;}	Edit the textareas

Divs

A div is basically a box where all of your page's content goes. You can give it a background, a width, and position it at a certain point on the page. Unless you're using inline coding, a div requires both css and html to work.
Basic div code:

Userlookup Codes

#header, #footer{display:none;}	Remove the header and footer
#userneohome{ display:none;}	Hide neomhome box
#usershop{ display:none;}	Hide shop and gallery box
#main{border:none;}	Get rid of the border around the main section
#main, #content{ background:#444444; width:700px;}	Change the background and width of the main section
body, .medText{ font:7pt verdana; color:#888888;}	Change the font of the whole page
.contentModule, .contentModuleContent, .contentModuleTable{ border:none; background:white;}	Change all the stats boxes
#userinfo{ background:#000000; border:none;}	Change user info box
#usercollections{ background:#000000; border:none;}	Change collections box
#usershop{ background:#000000; border:none;}	Change shop and gallery box
#userneopets{ background:#000000; border:none;}	Change neopets box
#userneohome{ background:#000000; border:none;}	Change neohome box
#usertrophies{ background:#000000; border:none;}	Change trophies box
.contentModuleHeader,.contentModuleHeaderAlt{ background:#ff1493; text-align:right; color:#0000000; font:normal 12pt century gothic;}	Code to change all the stats headers
#userneopets img{ width:80px; height:80px;}	Resize neopet's images

Properties

This is a complete list of the properties that you can add to your coding, next to each is a description of what it does.

font-family:Verdana;	Changes the font style.
font-size:10px;	Chages the size of the font.
font-weight:bold;	Changes the weight of the font. Other options: bold, normal
color:#888888;	Changes the color of the font.
text-align:left;	Changes the alignment of the font. Other options: left, right, center
text-transform:uppercase;	Makes all the font uppercase/lowercase. Other options: uppercase, lowercase, capitalize
text-decoration:underline;	Makes all the font underlined. Other options: underline, line-through, blink, none
letter-spacing:3px;	Changes the amount of space between each letter.
word-spacing:5px;	Changes the amount of space between each word.
line-height:18px;	Changes the amount of space between each line of text.
border:1px solid #39cd04;	Adds a border. Border can be changed to border-top, border-bottom, border-right, or border-left. Solid can be changed to dotted, dashed, or double.
background:#48fg65;	Adds a plain color background background.
background:url(URL);	Adds a background image.
background-attachment:fixed;	Keeps the background from scrolling with the page. Other options: scroll, fixed
background-repeat:repeat-y;	Makes the background only repeat vertically. Other options: repeat, no-repeat, repeat-y, repeat-x,
display:block;	Changes whether items will line up next to eachother or stacked on top of each other. Other options: inline, block
margin:2px;	Changes how much space will be put between items.
padding:3px;	Changes how much space there will be between the text and the border.
position:absolute;	Changes how an item is positioned, must be used with top/bottom and left/right codes. Other options: relative, fixed
top:20px;	Changes the amount of space from the top of the page.
left:50px;	Changes the amount of space from the left side of the page.
right:40px;	Changes the amount of space from the right side of the page.
bottom:20px;	Changes the amount of space from the bottom of the page.

Multiple Blog Codes

If you want to alter the size, make sure the width and height are the same for both #box and #container.

If you aren't sure what a multiple blog is, here's an example:
One - Two - Three

First section.

Second section.

Third section.

Cursors

cursor:default;

cursor:crosshair;

cursor:not-allowed;

cursor:move;

cursor:se-resize;

cursor:col-resize;

cursor:help;

cursor:wait;

cursor:text;

Border Types

There are four different types of borders: solid, dashed, dotted, and double. The larger the number, the thicker the border will be.

border:2px solid red;

border:4px dashed purple;

border:6px dotted green;

border:3px double blue;

Font Faces

Georgia

Verdana

Arial

Tahoma

Courier New

Mistral

Century Gothic

Copperplate Gothic Light

Vivaldi

AR Bonnie

Maiandra gd

Color Chart

#000000

#222222

#444444

#666666

#888888

#aaaaaa

#cccccc

#ffffff

#110000

#221100

#331100

#551100

#772200

#993300

#aa4411

#cc6633

#ee8855

#ff11bb

#ff33bb

#ff55bb

#ff77bb

#ff99bb

#ff1199

#ff3399

#ff5599

#ff7799

#ff9999

#ff1177

#ff3377

#ff5577

#ff7777

#ff9977

#220000

#330000

#550000

#770000

#990000

#bb0000

#dd0000

#ff2200

#ff4400

#ff6600

#ff8800

#ffaa00

#ffcc00

#557700

#669900

#99cc00

#aff00

#001100

#003300

#005500

#007700

#009900

#00bb00

#00dd00

#44dd33

#77dd55

#99dd66

#000011

#000033

#000055

#000077

#000099

#0000dd

#3333dd

#5555dd

#7777dd

#9999dd

#220044

#330055

#440066

#770099

#9933bb

#110011

#220022

#330033

#550055

#770077

#990099

#bb00bb

#bb33bb

#cc55cc

#dd66dd

#ff88ff

#330011

#440022

#550033

#770055

#990077