Welcome to CSS Guide. This is meant to be a one-stop information hub for any and everything CSS related. We do not offer premade layouts here, however feel free to use these codes to make your own layouts. But please note, if you own your own code help site, do not steal our codes or you will be held accountable.

I made this page because I think there's some general confusion among people when it comes to Neopets' latest layout change. While there are numerous CSS guides out there, they tend to over-complicate things for people who really just want some quick fixes for their layout problems, just like in the good old days when you could visit Csshelp, pick up a code, and be on your way in seconds. That's what we're here for. We want you in and out ASAP. xD

Codes are checked regularly to ensure that they still work properly. Please pay attention to which section you're pulling a code from though. Some are exclusive to certain areas of the site.

As of November 23, 2008, we are officially open.

We currently have 139 unique codes.

[1/23]: Guild Specific code added for removing your guild logo.

[1/19]: Code added for making text appear over images while hovering. See the Other HTML codes section.

I'm going through updates unusually fast lately, so in case you missed it, there's a blog code under the Other Css Codes section and the shop specific codes have all been upgraded and should work in all browsers equally.

[1/18]: ^^ We got our review from Decimals today: 17.96/18.5! Which also earned us a new award! Thank you so much Serena. Since it's come up in all three of our reviews, the reason why I've only got one link back button is because it's easier to identify, if you think of it like a logo, and I don't want to clutter up the sidebar tremendously. Otherwise, yes, I can see why everyone might think we may need a couple more. :oP

[1/17]: Adding codes for wrapping text around images (has its own section under HTML codes). I also added a section for Headers and Footers under the Css section. I added codes for replacing the Header and Footer images with your own. I also put the codes for removing the headers and footers into that section. Those codes can also be found under the Removal section for Css codes. The codes fall under both sections, so they're listed in both for easier access. :o)

Also added a code for modifying the font attributes of the Neo Clock (under other css codes) and codes for changing the distance between words in your text (under the fonts section for css codes).

[1/17]: No update this time, but rather a short rant I feel I'm entitled to. If you run your own css help page, DO NOT STEAL OUR WORKAROUNDS. (ie. our shop specific codes; I realize the filter solutions are fair game at this point). If it's YOUR guide, all of the content should be YOURS. NOT MINE.

Please keep in mind, I have absolutely no problem with anyone actually using the shop specific codes in their shops, as they should be used. However, hovering over here in order to steal our codes for your own css guide is unacceptable.

Thank you. o3o I'll try and think of some other things to update CSS|Guide with shortly.

Inlines will get you through the filters for petpage, gallery, and some userlookup layouts. Inlines are a way of taking what would normally be found in a css portion of code and moving it to the HTML portion. So something like this:

<style> #TEST{visibility:hidden;border:none;} </style>

Could be re-written into HTML (inlining) like so:

<div style="visibility:hidden;border:none;"></div>

Or if you're lazy like me and only want to do the bare minimum to appease the lords of the filters, you can keep your css portion in the css and inline the section that the filters are catching (position):

<div id="TEST" style="position:absolute;"></div> <style> #TEST{visibility:hidden;border:none;} </style>

Either will do.

As some of you may or may not know, Neopets was tricky and broke nearly all of the links put in the descriptions of shops; mapping links being one of the exceptions. There is a quick and simple fix for the problem. Here's your current link:

<a href="URL">Link</a>

Right after that first right-facing carrot/arrow, and right before the word "Link", press "Enter" on your keyboard, moving "Link" to a new line. Do not press the space bar. It won't work. Your link should now look like:

<a href="URL"> Link</a>

There you have it. The 'enter' makes all the difference. Why? Heck if I know, but for now, it works. xp

I strongly suggest that everyone use inline style tags to position their own images and divs, however, if you need to position a module or something like #content, this is for you.

First, take everything after your [/style] tag, and throw it up above your css style tags at the start of your code, like so:

<div id="test"> <img src="URL.jpg"></div> My Userlookup Text. <style> #test{visibility:hidden;} </style>

You want absolutely /NOTHING/ after that last, closed style tag or your layout will go wonky.

Next, take that closed style tag and place a space between the left arrow and forward slash, like so:

[ /style]

Use the arrows/carrots instead of brackets. (Filter keeps giving me a hard time, so I can't change it myself it seems.)

The opening style tag does not need to be touched. And your userlookup should then work. If it doesn't, please feel free to neomail me.

I also made a somewhat more in-depth, color-coordinated tutorial that may help more of you out a bit. Click here for the tutorial.

Guilds /CANNOT/ use the same solution as the userlookups because the solution gets eaten and pooped out in certain browsers. It does work for browsers like IE8 and Mozilla, but others like Chrome throw enormous temper tantrums.

So, take all of the images and divs that you positioned yourself and inline them. If you need help with this, see my section in inlining a few sections before this one.

If you still need help positioning your guild info bar, use this:

#main{float:left;padding-top:0px;padding-left:32px;}

And just fiddle with the padding values until your stats are positioned appropriately. I think most major layout makers use this anyway, so it shouldn't be much of a problem for most of you.

Removing White Background
<style> #main{background:none;} </style>

Removing White Background's Border
<style> #main{border:none;} </style>

Removing White Background & Its Border
<style> #main{background:none;border:none;} </style>

Changing Your White Background Color
<style> #main{background-color:#000000;} </style>

Adding A Background Image Into Your White Background Space
<style> #main{background-image:url('URL');} </style>

Changing Your Gray Background Color
(changes background colors for petpages)
<style> body{background-color:#000000;} </style>

Adding Background Images Into Your Gray Background Space
(creates a tiled background in petpages)
<style> body{background-image:url('URL');} </style>

Forcing a background image to only repeat vertically (up and down)
<style> body{background-image:url('URL');background-repeat:repeat-y;} </style>

Forcing a background image to only repeat horizontally (left and right)
<style> body{background-image:url('URL');background-repeat:repeat-x;} </style>

Creating a non-repeating image background
<style> body{background-image:url('URL');background-repeat:repeat-none;} </style>

Removing Whiteness in Images
(Only works in Internet Explorer)
<style> img{filter:chroma(color=#ffffff);} </style>

Removing Nickelodeon White Ad Bar
<style> .brand-mamabar{display:none;} </style>

Removing Ads on Top of Site
<style> #ban_bottom,#ban{display:none;} </style>

Removing Ads on Bottom of Site
<style> .adBox2,.ad_wrapper_fixed{display:none;} </style>

Removing All Ads
<style> #ban_bottom,#ban,.adBox2,.ad_wrapper_fixed{display:none;} </style>

Removing Neopets Header & Footer Images
(for shops, see shop specific codes)
<style> #header,#footer{display:none;} </style>

Removing Sidebar Information
(for shops, see shop specific codes)
<style> .sidebar{display:none;} </style>

Scrollbar Colors
(Internet Explorer only)
<style> body{ scrollbar-face-color:black; scrollbar-shadow-color:green; scrollbar-highlight-color:gold; scrollbar-3dlight-color:purple; scrollbar-darkshadow-color:blue; scrollbar-track-color:white; scrollbar-arrow-color:red;} </style>

Hiding Vertical Scrollbars
(Incompatible with IE8)
<style> body{overflow-y:hidden;} </style>

Hiding Sidescrolls
(Incompatible with IE8)
<style> body{overflow-x:hidden;} </style>

Replacing Header Image with Your Own
(change height and width accordingly)
<style> #header{background-image:url('URL');background-repeat:no-repeat;height:100px;width:500px;} </style>

Replacing Footer Image with Your Own
(change height and width accordingly)
<style> #footer{background-image:url('URL');background-repeat:no-repeat;height:100px;width:500px;} </style>

Removing Header
(for shops, see shop specific codes)
<style> #header{display:none;} </style>

Removing Footer
(for shops, see shop specific codes)
<style> #footer{display:none;} </style>

Removing Header & Footer
(for shops, see shop specific codes)
<style> #footer,#header{display:none;} </style>

Changing Link Color, Font Type, & Size
<style> a:link,a:visited,a:active,a:hover{color:#000000;font:8pt Georgia;} </style>

Link Color Change on Mouseover (Font Type & Size Also)
<style> a:link,a:visited,a:active{color:#000000;font:8pt Georgia;} a:hover{color:red;font:8pt Georgia;} </style>

Change Link Background Color on Mouseover (Font Type, Size, & Color Also)
<style> a:link,a:visited,a:active{color:#000000;font:8pt Georgia;} a:hover{color:red;font:8pt Georgia;background-color:gray;} </style>

Bolding Links (Font Type, Size, & Color Also)
<style> a:link,a:visited,a:active,a:hover{color:#000000;font:8pt Georgia;font-weight:bold;} </style>

Underlining Links (Font Type, Size, & Color Also)
<style> a:link,a:visited,a:active,a:hover{color:#000000;font:8pt Georgia;text-decoration:underline;} </style>

Question Mark Cursor
<style> body{cursor:help;} </style>

Question Mark Cursor Only When Hovering Over Links
<style> a:hover{cursor:help;} </style>

Crosshair Cursor
<style> body{cursor:crosshair;} </style>

Crosshair Cursor Only When Hovering Over Links
<style> a:hover{cursor:crosshair;} </style>

Crosshair w/ Arrows Cursor
<style> body{cursor:move;} </style>

Crosshair w/ Arrows Cursor Only When Hovering Over Links
<style> a:hover{cursor:move;} </style>

Waiting Cursor
(image varies with operating systems)
<style> body{cursor:wait;} </style>

Waiting Cursor Only When Hovering Over Links
(image varies with operating systems)
<style> a:hover{cursor:wait;} </style>

Hand Cursor
<style> body{cursor:hand;} </style>

Hand Cursor Only When Hovering Over Links
<style> a:hover{cursor:hand;} </style>

Text Bar Cursor
<style> body{cursor:text;} </style>

Text Bar Cursor Only When Hovering Over Links
<style> a:hover{cursor:text;} </style>

Changing Text Color
<style> td,.medText,body{color:red;} </style>

Changing Text Size & Font Type
<style> td,.medText,body{font:9px tahoma;} </style>

Changing Text Color, Size & Font Type
<style> td,.medText,body{font:9px tahoma;color:red;} </style>

Changing Line Height
(increase or decrease distance of one line of text from another)
<style> td,.medText,body{line-height:15px;} </style>

Changing Line Height (Color, Size, & Font Type Also)
(increase or decrease distance of one line of text from another)
<style> td,.medText,body{font:9px tahoma;color:red;line-height:15px;} </style>

Changing Letter Distance
(increase or decrease the distance between letters in words)
<style> td,.medText,body{letter-spacing:2px;} </style>

Changing Letter Distance (Color, Size, & Font Type Also)
(increase or decrease the distance between letters in words)
<style> td,.medText,body{font:9px tahoma;color:red;letter-spacing:2px;} </style>

Changing Word Distance
(increase or decrease the distance between words)
<style> td,.medText,body{word-spacing:2px;} </style>

Changing Word Distance (Color, Size, & Font Type Also)
(increase or decrease distance of letters in words)
<style> td,.medText,body{font:9px tahoma;color:red;word-spacing:2px;} </style>

Modifying the Neopets Clock (Font Color, Font Size, & Font Type)
<style> #nst{color:red;font:tahoma 9px;} </style>

Basic Blog Code

For #css, width and height refer to that of your background image.

For #css, replace IMAGE.JPG with your own image.

For #guide, top, left, width, and height refer to that of your text box (left:0px and top:0px lies at the upper left corner of your background image, not the webpage).
<style> #css{width:500px;height:400px;background-image:url('IMAGE.JPG');} #guide{font:9px tahoma;color:#000000;top:69px;left:329px;width:234px;height:335px;overflow:auto;} </style> <div id="css"><div id="guide" style="position:relative;"> Text goes here. Text goes here. Text goes here. <a href=http://www.neopets.com/~Kaikuto target="_blank"> <img src=http://img.photobucket.com/albums/v368/darkwater657/css-l.gif border=0></a> </div></div>

Horizontally Inverting a Page
<style> body{direction:rtl;} </style>

Making Code Boxes
(replace the parenthesis with left and right arrows and place an underscore in between TEXT and AREA; Neopets automatically removes them if I put them in myself.)
(TEXTAREA) Your Code Goes Here. (/TEXTAREA)

Back to the top.

Removing Whiteness in Stat Images
(Only works in Internet Explorer)
<style> #userinfo img,#usercollections img,#usershop img,#userneopets img,#userneohome img,#usertrophies img{filter:chroma(color=#ffffff);} </style>

Removing Trades, Auctions, Wishlist, Neomail, & Neofriend (yellow) pictures & links from Userinfo Section
<style> #userinfo table table table{display:none;} </style>

Removing Horizontal Gray Bars
<style> hr{display:none;} </style>

Removing Horizontal Gray Bar in User Info
<style> .contentModuleContent table table{border:none !important;} </style>

Removing User Info
<style> .contentModule{border:none;} #userinfo{display:none;background:none;} </style>

Removing Collections
<style> .contentModule{border:none;} #usercollections{display:none;background:none;} </style>

Removing Shop & Gallery
<style> .contentModule{border:none;} #usershop{display:none;background:none;} </style>

Removing Neopets
<style> .contentModule{border:none;} #userneopets{display:none;background:none;} </style>

Removing Neohome
<style> .contentModule{border:none;} #userneohome{display:none;background:none;} </style>

Removing Games & Trophies
<style> .contentModule{border:none;} #usertrophies{display:none;background:none;} </style>

Removing Userlookup: guest (?)
<style> .content div b,.content div a img{display:none;} .contentModule div a img,.contentModule div b{display:inline;} </style>

Removing Borders from Stat Boxes
<style> .contentModule,.contentModuleTable{border:none;} </style>

Removing Stat Headers from Userlookup
<style> .contentModuleHeaderAlt,.contentModuleHeader{display:none;} </style>

Removing All Information From Userlookup
<style> .contentModule{display:none;} </style>

Adding Transparency to Stats Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img,#userneopets img{filter:Alpha(Opacity=50);opacity:0.5;} </style>

Removing Stats Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img,#userneopets img{display:none;} </style>

Adjusting the Size of Your Shop Keeper Image
<style> #usershop img{width:90px;height:90px;} </style>

Adjusting the Size of Your Neopets' Images
<style> #userneopets img{width:70px;height:70px;} </style>

Adjusting the Size of Your Trophy Images
<style> #usertrophies img{width:70px;height:70px;} </style>

Dashed Image Borders - Stat Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img{border:1px dashed #000000;} </style>

Changing the Colors of your Image Borders - Stat Images
<style> #userinfo img,#usertrophies img,#usercollections img,#usershop img,#userneohome img,#userneopets img{border:1px solid red;} </style>

Removing Stat Headers from Userlookup
<style> .contentModuleHeaderAlt,.contentModuleHeader{display:none;} </style>

Modifying Headers
(Font Color, Font Size, Font Type, & Background Color)
<style> .contentModuleHeaderAlt,.contentModuleHeader{font:20px franklin gothic medium;color:#5A607B;background:black;} </style>

Modifying Headers w/ No Background
(Font Color, Font Size, & Font Type Also)
<style> .contentModuleHeaderAlt,.contentModuleHeader{font:20px franklin gothic medium;color:#5A607B;background:none;} </style>

Modifying Headers w/ Uppercase Letters
(Font Color, Font Size, Font Type, & Background Color Also)
<style> .contentModuleHeaderAlt,.contentModuleHeader{font:20px franklin gothic medium;color:#5A607B;background:black;text-transform:uppercase;} </style>

Underlining Headers
(Font Color, Font Size, Font Type, & Background Color Also)
<style> .contentModuleHeaderAlt,.contentModuleHeader{font:20px franklin gothic medium;color:#5A607B;background:black;border-bottom:2px solid red;} </style>

Removing Borders from Stat Boxes
<style> .contentModule,.contentModuleTable{border:none;} </style>

Adjusting the Size of Your Userinfo Box
<style> #userinfo{width:200px;height:100px;} </style>

Adjusting the Size of Your Userinfo Box
(No Borders)
<style> #userinfo{width:200px;height:100px;} .contentModule,.contentModuleTable{border:none;} </style>

Adjusting the Size of Your Collections Box
<style> #usercollections{width:200px;height:100px;} </style>

Adjusting the Size of Your Collections Box
(No Borders)
<style> #usercollections{width:200px;height:100px;} .contentModule,.contentModuleTable{border:none;} </style>

Adjusting the Size of Your Shop Box
<style> #usershop{width:200px;height:100px;} </style>

Adjusting the Size of Your Shop Box
(No Borders)
<style> #usershop{width:200px;height:100px;} .contentModule,.contentModuleTable{border:none;} </style>

Adjusting the Size of Your Neopets Box
<style> #userneopets{width:200px;height:100px;} </style>

Adjusting the Size of Your Neopets Box
(No Borders)
<style> #userneopets{width:200px;height:100px;} .contentModule,.contentModuleTable{border:none;} </style>

Adjusting the Size of Your Neohome Box
<style> #userneohome{width:200px;height:100px;} </style>

Adjusting the Size of Your Neohome Box
(No Borders)
<style> #userneohome{width:200px;height:100px;} .contentModule,.contentModuleTable{border:none;} </style>

Adjusting the Size of Your Trophies Box
<style> #usertrophies{width:200px;height:100px;} </style>

Adjusting the Size of Your Trophies Box
(No Borders)
<style> #usertrophies{width:200px;height:100px;} .contentModule,.contentModuleTable{border:none;} </style>

Changing Stats Boxes Background Colors
<style> .contentModuleContent{background-color:#E4E4E4;} </style>

Changing Stats Boxes Background Image
<style> .contentModuleContent{background-image:url('URL.jpg');} </style>

Changing Stats Boxes Border Color
<style> .contentModule{border:none;} .contentModuleTable{border:5px solid blue;} </style>

Stat Boxes With Dashed Border
<style> .contentModule{border:none;} .contentModuleTable{border:5px dashed #000000;} </style>

Basic Skinny Layout: White Content Background with Visible Stat Borders.
(Refer to other codes for help customizing)
This is where the text for your userlookup should go. You can change the white background color by replacing "FFFFFF" with another color and you can move your stats farther left or right by increasing or decreasing the amount after "left". Also, unless you remove one of your stats from your userlookup, 650px width is the minimum size you can make you skinny layout because your stats stop compacting after a certain point. Enjoy! - CSS|Guide [style] #content,#main{width:650px;background-color:#FFFFFF;border:none;} #main{position:absolute;left:100px;top:0px;} #header,#footer{display:none;} [ /style]

Basic Skinny Layout: White Content Background without Stat Borders.
(Refer to other codes for help customizing)
This is where the text for your userlookup should go. You can change the white background color by replacing "FFFFFF" with another color and you can move your stats farther left or right by increasing or decreasing the amount after "left". Also, unless you remove one of your stats from your userlookup, 650px width is the minimum size you can make you skinny layout because your stats stop compacting after a certain point. Enjoy! - CSS|Guide [style] #content,#main{width:650px;background-color:#FFFFFF;border:none;} #main{position:absolute;left:100px;top:0px;} #header,#footer{display:none;} .contentModule,.contentModuleTable{border:none;} [ /style]

Basic Click Layout
(Refer to other codes for help customizing)
<a href="#abc"><h1>CLICK!</h1></a> <div id="stats"><a name="abc"></a> If you have any information or pictures to add before your stats, you should place them here. Leave the table tag after this information because it helps position your user information. This information may, however, be removed once you've finished reading it. Enjoy! - CSS|Guide <table> [style] #main{background:none;border:none;} #header,#footer{display:none;} #stats{position:absolute;top:1000px;left:10px;height:550px;width:700px;overflow:auto;} body{overflow-y:hidden;} h1{font:40px tahoma;color:#000000;} [ /style]

Note: The click layouts are TNT approved as TNT has chosen click layouts as winners for their weekly userlookup spotlight competition.

Making Your Pet's Names Lowercase
<style> #userneopets b{text-transform:lowercase;} </style>

Capitalizing Your Pet's Names
<style> #userneopets b{text-transform:uppercase;} </style>

Centering User Info Text
<style> td{text-align:center;} </style>

Moving Stat Boxes Closer Together
<style> #content{width:590px;} </style>

Removing Your Guild Logo
<style> .content table table img{display:none;} </style>

Removing the Poll Background Color in Mozilla
<style> tr{background-color:transparent;} </style>

Removing the Banner at the Top of the Page
<style> table{background-color:transparent;} table a img{display:none;} </style>

Removing the Copyright on the Bottom of the Page
<style> font.sf{display:none;} </style>

Changing the Size of Your Pet's Image
<style> #CustomNeopetView{height:590px;width:590px} </style>

Removing "Petname the Pettype" (?) on Pet Descriptions
Submitted by Brexis
<style> .content div{display:none;} .content table div,.content .contentModule{display:block;} </style>

Capitalizing all letters of "PETNAME the PETTYPE" (?) on Pet Descriptions
<style> #content div{text-transform:uppercase;} #pet_rating b,#pet_rating b a,.contentModuleTable,.sidebarTable{text-transform:none;} </style>

Capitalizing the first letters of "Petname the Pettype" (?) on Pet Descriptions
<style> #content div{text-transform:capitalize;} #pet_rating b,#pet_rating b a,.contentModuleTable,.sidebarTable{text-transform:none;} </style>

Removing Nickelodeon White Ad Bar
<style> .brand-mamabar{height:0px;width:0px;overflow:hidden;} .brand-mamabar{height:0px !important;} </style>

Removing Sidebar
(change font color to the color of your background)
<style> td.activePet img,.sidebarModule img{height:0px;width:0px;} .sidebarModule table.sidebarTable .neofriend{width:0px;height:0px;overflow:hidden;z-index:-1;border:none;background:none;} .activePetInfo td font,td b span,.neofriend .sf,.sidebarModule,.sidebarModule table td,.sidebar,.activePet a img,.activePetInfo,.sidebarHeader a img,.neofriendInfo,.neofriendUsername,.sidebarTable,.sidebarHeader,.neofriendAvatar,.sf a b,.sidebarTable a b,table .neofriendUsername a,table .neofriendInfo a,td.neopetPhrase,td.neopetPhrase b{width:0px;height:0px:overflow:hidden;font-size:0px;color:#ffffff;border:none;background:none;} table .sidebar{width:1px;height:0px:overflow:hidden;font-size:0px;color:#FFFFFF;border:none;background:none;} </style>

Removing Sidebar with Left Alignment Fix
(change font color to the color of your background)
<style> td.activePet img,.sidebarModule img{height:0px;width:0px;} .sidebarModule table.sidebarTable .neofriend{width:0px;height:0px;overflow:hidden;z-index:-1;border:none;background:none;} .activePetInfo td font,td b span,.neofriend .sf,.sidebarModule,.sidebarModule table td,.sidebar,.activePet a img,.activePetInfo,.sidebarHeader a img,.neofriendInfo,.neofriendUsername,.sidebarTable,.sidebarHeader,.neofriendAvatar,.sf a b,.sidebarTable a b,table .neofriendUsername a,table .neofriendInfo a,td.neopetPhrase,td.neopetPhrase b{width:0px;height:0px:overflow:hidden;font-size:0px;color:#ffffff;border:none;background:none;float:left;} table .sidebar{width:1px;height:0px:overflow:hidden;font-size:0px;color:#FFFFFF;border:none;background:none;float:left;} </style>

Removing Header & Footer Images
<style> #header,#footer,li.nav_image{width:0px;height:0px;overflow:auto;z-index:-1;} </style>

Removing Ads
<style> .ad_wrapper_fixed p,#ad300,#ad728,#ban_bottom,#vert_slug_leaderboard,.adBox2,.footOverlay,#ban{width:0px;height:0px;overflow:hidden;z-index:-1;border:none;background:none;} #ban{height:0px !important;} </style>

Adding Images
<img src="URL.jpg">

Image Positioned to the Left With Text Wrap Around It
<img src="URL.jpg" align=left>

Image Positioned to the Right With Text Wrap Around It
<img src="URL.jpg" align=right>

Adding Links
<a href="URL">Link Name</a>

Pop-up Link
<a href="URL" target="_blank">Link Name</a>

Image Link
<a href="URL"><img src="ImageURL.jpg"></a>

Image Link With No Purple Border
<a href="URL"><img src="ImageURL.jpg" border="none"></a>

Pop-up Image Link With No Purple Border
<a href="URL" target="_blank"><img src="ImageURL.jpg" border="none"></a>

Basic Centering
<center>Your Text.</center>

Paragraph Centering
<p align=center>Your Text</p>

Aligning Text to the Left
<p align=left>Your Text</p>

Aligning Text to the Right
<p align=right>Your Text</p>

Bolding
<b>Your Text</b>

Slashing
(Use Arrows Instead of Brackets...This Code is Being Filtered for Some Reason...)
[s]Your Text[/s]

Slashing (on Petpages)
<strike>Your Text</strike>

Underlining
<u>Your Text</u>

Italicizing
<i>Your Text</i>

^Sup Text
^{Your Text}

_Sub Text
_{Your Text}

Font Color
<font color="lightgreen">Your Text</font>

Font Size
<font size="10px">Your Text</font>

Making Text Appear When You Hover Over an Image:

<img src="IMAGE.JPG" title="YOUR TEXT">

Breaking or Adding Text to a New Line
<br>

Marquee Left
(text scrolling)
<marquee>Your Text</marquee>

Marquee Right
(text scrolling)
<marquee direction="right">Your Text</marquee>

Marquee Up
(text scrolling)
<marquee direction="up">Your Text</marquee>

Marquee Down
(text scrolling)
<marquee direction="down">Your Text</marquee>

Bullets
<li>Your Text

Changing Background Colors
(changes gray background and petpage backgrounds)
<body bgcolor=blue>