introduction

This page is free to use. You are not required to give credit back at any point. Feel free to use this guide for anything you choose. If you are searching for something in particular but are unsure of what its called please consult me via neomail.
This guide was written entirely by whisp_will with the use of various guide for the neopets coding and reference from w3schools. Feel free to book mark this page if it helped you and also feel free to send me a neomail with requests on what you would like to see in the future, or anything you need help with. I'm on daily so don't be shy. Also I have plenty of talented guild members willing to help, so check us out at MBT.

f.a.q

How do I bypass the css filter?

How do I create a div that shows raw codes?

How do I change my cursor on neopets?

What do you mean by custom properties?

How do I create anchor links?

How do I remove the border around a linked image?

What are hex codes?

Where do I edit my user lookup?

Where do I edit my pets lookup?

Where do I edit my pets pet page?

Coming Soon

• Layout update (done)
• More detailed Lookup Help (done)
• More detailed Petpage Help
• More detailed Shop Help
• More detailed Pet Lookup Help
• How to code a layout
• Advanced Hyperlinks and Images (done)
• Filter Help Update (done)
• Roll Over Images (done)
• Layouts that always stay centered
• Banners that span the page and stay put
• Side by Side divs without use of a table
• Drag and Drop codes on neo ((oh yes it is possible, I shall show you))

Link In

<a href="/~whispywill"><img src="http://www.melonberrytea.com/images/cssbanner3.png" border="0" alt="whispywill css"></a>

Neopets and Filters

Neopets has some very strong coding filters running throughout the site. This makes using normal codes relatively difficult, especially with its newest filter blocking position, margin, and various other necessary properties. However like a bucket with too many leaks, clever people have discovered ways around said filters. Now our worst fears as coders is that TNT will come up with a perfect filter. Though, lets hope they don't. Now onto the meat of this topic, what's blocked, why, and how to get around some of the filters.

Topic 1, What's blocked on Neo:
• Curse words of any kinds
• Any talk over a pg rating
• Request or discussion of the "cough" word (hint for you special people: *********)
• Outside links (though I don't see the point, their site is already polluted with advertisements leading to various sites with who knows what virus's)
• Various tid bits of coding including css, java, php, forms, anything other then the basics (yet another pondering...)

Topic 2, Loop holes:
No, I'm not going to tell you how to bypass banned things #1-4, but I will help you bypass annoying #5. That is the coding filters. Now all of the following loop holes are allowed and you wont get your account iced for using them. Anything not here, well your on your own.

Positioning Filters
Main problem filters is the blocking of the word "position" in your style tags.
Now this makes things very annoying for coders because this is one of the main tags we use to position things. Without it, well... things would get interesting. However there are are simple solutions:

<style> #name { top: 0px; left: 0px; } </style> <div id="name" style="position: absolute;"> test </div>

In order to get positioning tags to work on neopets simply move the position tag to the element itself rather than in the style.

Font Filters
The usage of tags [u][/u] and [s][/s] are no longer in use and no longer function you can replace them with:

<font style="text-decoration: underline;">underlined text</font><strike>striked text</strike>

It's all rather wordy now, thankfully bold and italic are still fully functional.

Music Filters
In the Distant past people were allowed to put up music and sounds on their pages, however neopets no long allows this. As of right now there is no working bypass to play music. Both bgsound and audio no long work as functioning tags. Why were they removed? For one they proved annoying in most cases, and secondly music only played on IE.

defining tags

All of the following tags are where you place your CSS and other information. Your CSS refers to your coding. You cannot place codes where ever you wish on a page, it just doesn't work like that. It has to be within the following tags. The main one you will be using is the style tag, the other 2 you can simply ignore for now until you become a more proficient coder.
*tip: when coding anything, whether it be very simple and short, or very long and complex, save it to notepad or something on your computer. That way if you mess it up, or your internet decides to die and delete all your hard work, you can relax knowing you had a backup file*

<style> </style>	defines style information for a web page
(body) (/body) replace "(paras)" with	Contains elements such as text, hyperlinks, images, tables, lists, etc
(head) (/head) replace "(paras)" with	Defines information about the document, use to place scripts and meta information

basic tags

These define basic aspects of text such as bold, italic, or underlines. They can be used with or without a custom tag.
•The first line defines what can be placed within style tags and applies to the whole document
•The second line can be used without defining tags, though using custom tags can add a new property to the element These are independent tags
•Properties of the element will not appear in the text, with or without custom properties, unless in between independent tags

b {custom properties} <b> text here </b>	example of text: bold
i {custom properties} <i> text here </i>	example of text: italic
font.u {custom properties} <font class="u">text here</font>	example of text: underline
p {custom properties} <p> text here </p>	defines a paragraph, applies space around the element
<br> text here	starts or adds a new line

hyperlinks

Hyperlinks or links is a way of "linking" one page to another via url. They can be used to link to anything with an address on the internet.
EX: web pages, pictures, videos, etc

Hyperlinks are highly customizable, though to get the more substantial effects some skill is needed.

a {custom properties}	basic tag for a hyperlink, belongs within style tags and applies to all links on a page.
<a href="/">text here</a>	standard html to display a hyperlink EX: whisp_will
<a href="#namegoeshere">text here</a> <a name="namegoeshere">text here</a>	names an element, useful for anchoring •view anchor link section
a:link {custom properties}	defines custom properties for a regular hyperlink
a:visited {custom properties}	changes the properties of a hyperlink that has been clicked
a:hover {custom properties}	defines custom properties when a hyperlink is hovered over, or moused over
a:active {custom properties}	changes the properties of a hyperlink that is currently being used

images

The following codes are for displaying images, along with adding effects such as links or hover effects.
Images are also highly customizable.

img {custom properties}	this alters all images on a page
<img src="http://www.url.com/here.png">	standard html for displaying and image, ex:
<img src="http://www.url.com/here.png" alt="text here">	if an image doesn't load it provides alternative text, ex: broken image to →
<img src="http://www.url.com/here.png" title="text here">	easy way to add a description to an image, hover for ex:
img:hover {custom properties}	changes the properties of an image when hovered over (please note this may not work with all browsers, much like various other image filters I decided not to list)

*tip: you can string together links and images to create a crackable image! However it will leave a border around your picture. But removing it is simple, just add border=0 like I did below*

Code:
<a href="/~whispywill"> <img src="http://www.url.com/here.png" border="0"></a>

div

A div is a text box, its where you place your text if you want it visible and orderly. Div can be confsing to use unless you understand CSS well. In the hands of someone who truely understands, div's become a corner stone of coding.

div {custom properties};	style tag for a div, this applies to every div on your page
<div> text here </div>	standard code for placing a div on your page
<textarea>code here	This is a div that shows the raw coding of whatever you write in it. Treat it just like a div. (this one works on neopets ONLY)
<div style=""> text here </div>	allows the customization of a single div, this will apply only to one div
#namehere {custom properties};	a naming property, will only alter divs claiming the same name (you may only use a name once! more then one element in the page can claim a name, but you cannot have two of the same name's in your style tags. That means you cannot have two #name1's, its has to be #name1 and #name2)
<div id="namehere"> text here </div>	a div claiming a name, note the id=
div.name {custom properties}	shows a classification, only applies to div's claiming the same class (not as effective as id)
<div class="name"> text here </div>	a div claiming the class of an element

This is an example of a div, with a few custom properties.

this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div this is a div

Code:
<div style="height: 150px; width: 150px; overflow: auto; background-color: white;"> your text goes here x <br><p> </p> </div>

table

A table is a text box using cells that are placed in rows or columns. How many rows or columns are up to you, tables are useful for keeping things organized.

table {custom properties};	style tag for a table, this applies to every table on your page
<table><tr><td> text here </td></tr></table>	standard code for placing a table on your page
tr {custom properties};	changes all rows in every table on a given page
<tr></tr>	standard tags for placing a new row within a table *must be placed between table tags*
td {custom properties};	changes all columns in every table on a given page
<td> </td>	standard tags for placing a new column within a row *must be placed between tr tags*
<table style=""> text here </table>	allows the customization of a single table, this will apply only to one table *table can be changed to td or tr as well*
#namehere (custom properties};	a naming property, will only alter tables claiming the same name *can be applied to td or tr as well*
<table id="namehere"> text here </table>	a table claiming a name, note the id=
table.name	shows a classification, only applies to tables's claiming the same class (not as effective as id)
<table class="name"> text here </table>	a table claiming the class of an element *can be applied to td or tr as well*

Here is a working example of a table:

1	2
3	4

Code:

<br><table border="1"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table>

custom properties

Anything and everything you maybe need to fill into everything that says {custom properties}
Please note, these will only work within a defined tag

color: #4800FF;	changes the text color
font-family: impact;	changes the font face
font-size: 12pt;	changes the font size (use #px or #pt to change size)
text-decoration: underline;	underlines everything in a given element Other Options: none, overline, line-through, blink (to remove an element already in place, change to text-decoration: none)
font-weight: bold;	makes everything in a given element bold Other Options: none, bolder, lighter (to remove an element already in place, change to font-weight: normal)
text-transform: uppercase;	forces everything in an element to uppercase Other Options: none, lowercase, capitalize
text-align: right;	aligns the text in a given element Other Options: center, left, top, bottom
word-spacing: 3px;	increases or decreases the amount of space between words
letter-spacing: 4px;	spaces out individual letters in a given element
line-height: 5px;	changes the space between lines in an element changes the space between lines in an element
border: solid 3px #4800FF;	add a border to a given element Alternative: border-left, border-right, border-bottom, border-top Other Options: (replace solid) none, dashed, dotted, double, groove, ridge, inset, outset
display: block;	Defines how an objext appears such as: home Other Options: none, inline, inline-block, inline-table, list-item, run-in
top: 5px;	tells an element how far away from the top of the browser to be
left: 5px;	tells an element how far away from the left of the browser to be
right: 5px;	tells an element how far away from the right of the browser to be
bottom: 5px;	tells an element how far away from the bottom of the browser to be
position: absolute;	tells where to position an element, absolute means it will go where ever on a page reguardless of other elements Other Options: relative, static, fixed *must be linked with a top, left, right, or bottom command! best to use more then one*
margin: 2px;	tells how much space will be around the outside of an element Alternative: margin-left, margin-right, margin-bottom, margin-top
padding: 2px;	tells how much space will be around the inside of an element Alternative: padding-left, padding-right, padding-bottom, padding-top

Header Codes

Codes for altering/removing the header of neopets. The following codes will work on guilds, user looups, shops, and galleries. Basically anywhere you can code that has the Neopets header.
Normally these are used to hide things.

.user { custom properties }	Edit "Welcome, username | NP: # | Logout"
#nst { custom properties }	Edit the clock
#header { custom properties }	Edit header background
.eventIcon { custom properties }	Edit the the event icon, ex: new neomail envelope
#header #template_nav { custom properties }	Edit header links
#header .dropdown { custom properties } #header .dropdown li a { custom properties } #header .dropdown li a:hover { custom properties }	Edit the drop down menu

Footer Codes

Codes for altering/removing the footer of neopets. The following codes will work on guilds, user looups, shops, and galleries. Basically anywhere you can code that has the Neopets footer.
Normally these are used to hide things.

#footer { custom properties }	Edit Footer background
#footer .copyright img { display:none; }	Remove footer links
#footer .sf { custom properties }	Edit languages and search
#footer .copyright img { display:none; }	Remove Neopets Link
#footer .copyright .sf { display:none; }	Remove Copyright
.ad_wrapper_fixed p { display:none; }	Remove advertisement

Sidebar Codes

Codes for altering/removing the sidebar of neopets. The following codes will work on guilds, user looups, shops, and galleries. Basically anywhere you can code that has the Neopets sidebar.
Normally these are used to hide things.

.sidebar form { custom properties }	Edit side bar search
.sidebarHeader img { display:none; }	Remove neofriends
.activePet.sf { custom properties } .activePetInfo { custom properties }	Edit active pet information
.activePet img { display:none; }	Edit active neopet image
.activePet,.activePetInfo,.sidebarHeader a b,.activePet.sf { display:none; }	Remove active pet box entirely
.sidebarHeader { display:none; }	Remove side bar headers

Guild Removal Codes

Here is a list of guild removal codes to remove any unfavorable elements.

.contentHeader{display:none;}	Remove guild name and neighbourhood
.content p { display:none; } .content table p { display:block; }	Remove Guild Home | Guild Help | My Guild
.content table table img { display:none; } .content table .content table img { display:inline; }	Remove guild Logo
.content table table td.content { display:none; }	Remove guild navigation
#header { display:none; }	Remove header
.sidebar { display:none; }	Remove sidebar
#footer { display:none; }	Remove Footer

User Lookup Removal

General:

#header { display:none; }	Remove header
.sidebar { display:none; }	Remove sidebar
#footer { display:none; }	Remove Footer
#ban { display:none; }	Remove image banner
.brand-mamabar { display:none; }	Remove Nickelodeon banner

User Info Box:

#userinfo { display:none; }	Remove User Information box all together
#userinfo .contentModuleHeader { display:none; }	Remove title of User Info Box
#userinfo .medText .medText .medText { display:none; }	Remove Trades, Auctions, Wishlist, Neomail, and Neofriend
#userinfo img { display:none; } #userinfo .medText .medText .medText img { display:inline; }	Remove shield

Collections Box:

#usercollections { display:none; }	Remove Collection box all together
#usercollections .contentModuleHeaderAlt { display:none; }	Remove title of your Collection Box
#usercollections img { display:none; }	Remove collection box images

Shop and gallery

#usershop { display:none; }	Remove shop and gallery box all together
#usershop .contentModuleHeaderAlt { display:none; }	Remove title of shop and gallery Box
#usershop img { display:none; }	Remove the shop keepers

Neopets:

#userneopets { display:none; }	Remove Neopets box all together
#userneopets .contentModuleHeaderAlt { display:none; }	Remove title of Neopets Box
#userneopets img { display:none; }	Remove the Neopets images
#userneopets hr { display:none; }	Remove the horizontal lines in the Neopets box

next page

Lookup Removal Continued

Neohome:

#userneohome { display:none; }	Remove the Neohome box all together
#userneohome .contentModuleHeaderAlt { display:none; }	Remove title of the Neohome Box
#userneohome img { display:none; }	Remove the image of your Neohome
#userneohome a { display:none; }	Remove the link to your Neohome

Games & Trophies:

#usertrophies { display:none; }	Remove User Trophie box all together
#usertrophies .contentModuleHeaderAlt { display:none; }	Remove title of Trophie Box
#usertrophies div b { display:none; } #usertrophies .trophy_cell b { display:inline; }	Remove bold face fonts in Trohpie Box

#usertrophies b { display:none; } #usertrophies div b { display:inline; }	Remove # of Games Played in Trohpies box
#usertrophies img { display:none; }	Remove images in Trohpie Box

previous page

User Lookup Codes

Neopets requires a few extra steps when it comes to coding user lookups. For one, you don't have free rein. That means you can't just post codes willy nilly and hope they work. No, instead your basically toying with the coding already in place. Sure you can add your own elements but mostly it's just editing theirs.
So here is a listing of all the code's you'll need to edit your user lookup.

*please make sure you've mastered the basics before moving on to this*

Information Boxes: (all the little boxes holding your info)

#userinfo { custom properties }	Edit User Information box
#usercollections { custom properties }	Edit your collection box
#usershop { custom properties }	Edit user shop and gallery box
#userneohome { custom properties }	Edit your neohome box
#userneopets { custom properties }	Edit the box containing your neopets
#usertrophies { custom properties }	Edit your trophies box

General Editing: (makes all your boxes uniform)

body { custom properties } #main { background:none; border:0px; }	Change the background of your user lookup
#content { position: relative; top: #px; left: #px;} #main { background:none; border:0px; margin: 0px; padding: 0px; }	Alter the position of neopets standard content
.contentModule, .contentModuleTable, .medText { custom properties }	Edit the boxes in general, all the backgrounds and all the borders for all your boxes.
.contentModuleHeader, .contentModuleHeaderAlt { custom properties }	Edit the headers off all your boxes for every section.
td.contentModuleContent { custom properties }	Edit the boxes in general, all the backgrounds and all the fonts for all yoru boxes.
a:link, a:visited, a:active { color: #; } a:hover { color: #; }	Change the link color of Neopets standard content.

Miscellaneous: (extra tid bits)

#userinfo .contentModuleContent{ background-image:url(IMAGEURLHERE.png); background-repeat:no-repeat; background-position:top right; } #userinfo img { display:none; } #userinfo .medText .medText .medText img { display:inline; }	Edit the standard neopets shield for your own shield
#userneopets img { custom properties }	Edit user neopets images
#usertrophies img { custom properties }	Edit user trophie images

Pet Lookup Codes

For all the people who love their pets so dearly. This is a way to snazzy up their pet lookup. Instead of you having to go find someone else's CSS, why not make your own?
Here are the codes for your pets lookup.

.contentModuleHeader { custom properties }	Edit your Neopets Title, the content header
#CustomNeopetView{height:500px;width:500px;}	Change the size of your neopets portrait
.contentModuleContent, .contentModule { custom properties }	Edit section background and font colors
.contentModuleHeaderAlt { custom properties }	Edit the statistics and description headers
.contentModuleContent table img { display:none; } .contentModuleContent div img { display:inline; }	Remove images (Fishing Skill image, Jobs Completed, Battledome image)
.contentModuleContent div img { display:none; } .contentModuleContent #rating_ballot img { display:inline; }	Remove the neomail and petpage icons
.content div { display:none; } .content div div, .content .contentModule { display:block; }	Remove the color, name and species of your pet
.content div { custom properties } .content div div { custom properties }	Change the color of pet's name, color, and species
.content span b { color:#F0F; }	Change the color of "gender"

.contentModuleContent.medText { custom properties }	Change the color of the text below your pets petpet
.contentModuleContent.medText img { display:none; }	Remove image of your pets petpet
.contentModuleContent #pet_rating { display:none; }	Remove your pets rating

Shop Codes

TNT has made it some what difficult to edit your shop due to the various scam people have pulled with clever coding. That means that your ability to edit your shop has been limited but is still very possible. Here are the codes available to use in your shop, please keep in mind the filters. If your not sure was is filtered, please view the filters section (:

a img { border: #px solid color; } .sidebar img, #header img, .footer img{ border:0px; }	Edit the border around items in your shop
center b { custom properties }	Edit your shop keepers greeting
p b { custom properties } p a b { custom properties }	Edit your shops name
p b { display:none; } p a b { display:inline; }	Remove shop name
.content .medText { display:none; }	Remove navigation
center img { display:none; }	Remove shop keepers image
center b { display:none; }	Remove shop keepers greeting

Petpage Codes

Seeing as a petpage is virtually blank there are very little neopets specific codes. I have provided said codes in addition to a basic layout for the sake of empty space removal.

table { background-color: transparent; } table a img { display: none; }	Removing neopets banner
.sf { font: 9px Tahoma; color: #FFFFFF; }	Changing Font Properties for Neopets Copyright
.sf a { font: 9px Tahoma; color: #FFFFFF;}	Changing Link Properties for Neopets Copyright
.sf { display: none; }	Removing the Neopets Copyright without removing save button

premade layout coming soon

Cursors

A cursor in text book definition is: indicator consisting of a movable spot of light (an icon) on a visual display; moving it allows the user to point to commands.

What all that really means it's the arrow you use to point and click on things. Now some times that arrow can get to be a little boring and maybe you'd like to spice things up a bit. Well creating a cursor isn't as simple as pasting a code onto a page, it will require a few more steps and a download of Jasc Animation Shop 3. (or anything else that can save an .ani or a .cur file)

Step 1: First we need to create a pixel or find and image to use. I've decided to make a pencil. This isn't a "how to pixel" tutorial so I wont be going over how I made it, just know you need a picture. Any picture will do but keep it under 30 pixels by 30 pixels (so 30x30px). If you don't know what a pixel is, go google it. Another thing, make sure it has an arrow or some kind of indicator in t he UPPER LEFT HAND corner. That way a person knows what your cursor is actually clicking on. Here's my image:

Step 2: After finding or creating an image, we need to find an image host that hosts a .cur or .ani file. I suggest googling this. I had no issue since I own my own site, so I hosted it myself. However most people don't have this luxury and have to out source. My apologies, I'm unaware of any hosts at this moment. My suggestion would be start up a site with x10hosting (it's free) and host them yourself. You also need to host a regular .gif file. (so in total you need to save your file twice, one as .ani or .cur and the other as .gif).

Step 3: Now to code it. As you probably guessed, creating a working cursor will require a unique code. Well look no further, I am supplying you with it. This code will work anywhere on neopets. Also please take notice that this code requires a .ani file and a .gif file!

<style> body, #content, #main a { cursor: url("http://www.url.com/here.ani"); } #main, a { cursor: url("http://www.url.com/here.ani") default; } </style>

Premade Cursor

For those that are having issues, I've also created a working cursor that you are free to use anywhere. Just make sure you link credit back to this guide ;3

<style> body, #content, #main a { cursor: url("http://www.melonberrytea.com/graphics/pencil.ani"); } #main, a { cursor: url("http://www.melonberrytea.com/graphics/pencil.gif") default; } </style> <center><a href="http://www.neopets.com/~whispywill" alt="Whispy's practical guide to CSS"><img src="http://www.melonberrytea.com/images/cssbanner3.png" border="0"></a></center>

Works Perfectly on: Firefox, Chrome, Opera, Safari
•Works on IE but size distorts!
Live example

Premade Anchor Links

This is due to the large amount of neomail I get requesting help with anchor links and layouts that seemingly have "multiple pages" even though it's all on one page. Like this guide for example, hitting a link sends you to "another page". When in actuality it's just sending you to a hidden div. Now I expect you to read up on hyperlinks and divs so I'm making this template as basic as possible. It's your job to make it look fancy, not mine. How will you learn if I do everything for you.

The code:

<div style="border: 1px solid; width: 200px; height: 100px; overflow: hidden;"> <a name="div1"></a> <div style="height: 100px; overflow: auto;"> This is what div 1 says! ♥ </div> <a name="div2"></a> <div style="height: 100px; overflow: auto;"> This is what div 2 says! ♥ </div> </div> <a href="#div1">View Div 1</a> || <a href="#div2">View Div 2</a>

Live example of the code provided:

This is what div 1 says! ♥

This is what div 2 says! ♥

View Div 1 || View Div 2

If clicking those links made the top half of this page disappear click here to fix it

Hexidecimal Color Chart

Here is a list of web safe colors for those who do not have a graphics program. If you desire a custom color and have a graphics program such as photoshop, simply use the color changer and selected a color. The hex code should be provided.

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Fancy Links

Here we attempt to replace boring and dull text based link such as this one with fancy ones like this one.
Please note most of this is for advanced users, in order to truly utilize this variant you must have knowledge of custom properties, what class claiming is, and the general ability to alter the appearance of and element.

For Beginners: Here is the simplest of all "fancy links", nothing more than a background attached to a link and a font color change. This will give you a desired looked and is still easy to change without wordy css coding.

example

For Petpages/User Lookups/Pet Lookups
<style> a.link, a:active.link, a:visited.link { background-color: blue; color: yellow; } </style> <a href="/whispywill" class="link">it works!</a>

For Guilds
<style> a:link.link { background-color: blue; color: yellow; } </style> <a href="/whispywill" class="link">it works!</a>

For Advanced Users: In addition to the basic frame work we will add a display function, borders, padding, text alignment, etc, along with a basic hover change. I'm using the links on this site as an example. This is everything needed to create a truly unique navigation that fits perfectly with your layout. This will require advanced coding knowledge in order to manipulate the pre-made code to your liking.

example

For Petpages/User Lookups/Pet Lookups
<style> a.nav { display: inline-block; background: #f37d6e; text-align: center; font-size: 9px; width: 88px; height: 14px; margin: 2px 1px 2px 1px; text-transform: lowercase; font-family: verdana; color: #fff; line-height: 14px; } a.nav:hover { background: #f7ab77; } </style> <a href="/whispywill" class="nav">it works!</a>

For Guilds
<style> a:link.nav, a:active.nav, a:visited.nav { display: inline-block; background: #f37d6e; text-align: center; font-size: 9px; width: 88px; height: 14px; margin: 2px 1px 2px 1px; text-transform: lowercase; font-family: verdana; color: #fff; line-height: 14px; } a:link.nav:hover { background: #f7ab77; } </style> <a href="/whispywill" class="nav">it works!</a>

It's amazing how large the code segment is in order to achieve the most basic looking, but clean, "fancy links".
Whispy you have two different appearences of links on your page! How did you do that?
I used two different class codes lol. Nav and Nav2. YOu can have an infinite amount of different link styles on your page!

What if I wanted to use an image instead and have it change on hover?
Please view my rollover image section

Well that's all the help I can give, have add it!

Rollover Images

For those many people who want cool image effects but arent sure how to acquire them. Things such as image navigation where hovering over an image changes it to another. Or just making something look cool. This requires VERY advanced knowledge of all aspects of CSS. The reason being, there isn't actually a code that allows this function. Instead you must problem solve and play with the elements available.

For Advanced Users: We will be altering your common table or div inorder to get the desired affects. You cannot alter an image code to change into another image on neopets (to my knowledge at least). So instead we will use div or table backgrounds since we can change those with a hover function! I wont be going into too much depth with this but I will give you the basic frame work. Why I suggested very advanced users.

Hover over me!
<style> #hov { background-image: url("http://www.melonberrytea.com/images/whispybobhead1.gif"); width: 203px; height: 219px; } #hov:hover { background-image: url("http://www.melonberrytea.com/images/whispybobhead.gif"); } </style> <div class="ex"></div> <br>Hover over me!

The above example should start moving. If you want to use it for links etc you'll have to figure that part out yourself ;3
What fun would it be if I showed you how to do everything? Here's a hint, study the fancy links as well (those can have backgrounds.. huh...and they can be used with the hover function... hmmmmm)

Link back

Did you find what you needed? Why not link back and maybe you'll help someone else find what they're looking for. No need to ask just add me ;3
<a href="http://www.neopets.com/~whispywill" alt="Whispy's practical guide to CSS"><img src="http://www.melonberrytea.com/images/cssbanner3.png" border="0"></a>

Listed at

Credit

Seeing as everything on this site was written/coded/drawn by me I'd like to pat myself on the back. however none of this would've been possible without the help of utter boredom! Yay for boredom! It some how compels average people to write ridiculous amounts of information with scrupulous details.

However I validated my information using a site called w3. It not only educates people on CSS but also every other coding script out there. It's very useful and I'd suggest it to anyone. Both CSS experts and people who still aren't sure what CSS is in the first place.
So yay! ♥