CSS for Neopets

[Foxer]

When I first found out that I could give my Neopet a homepage, I was rather happy (and 10 years old with no computer knowledge except how to navigate around), so I rushed to make one. I saw the box that told me to "specify how your page will look" and, me being the logical person I am, wrote this:

"A BLUE BOX WITH A BIG WHITE TITLE IN FANCY LETTERS PLEASE!"

Don't judge, 'kay? xDDD

About an hour later I figured out that I needed to learn HTML. So I did. Years later I figured out that CSS was a great tool and not as complicated as it looked, so I taught myself to use it to the fullest. Unfortunately, there weren't many good and fluid tutorials out there that made it easy to understand, so I taught myself through observation. I saw something I liked and then I'd scour the source code to see how it was done.

This method of learning, while great for me, leaves me with rather large holes in my working knowledge of CSS. When I played Neopets, my pagebuilding was mostly trial and error, but it did give me enough to know the basics, which is what I'm aiming to show you.

Basically, this long intro is to tell you that my own learning was selective, but that this tutorial should give you enough knowledge to build on yourself. Read other tutorials or find guides on specific features, or do what I did and just play around until you get the desired effect. ^^

Syntax

I'm sorry, but this will be the most complicated part of the tutorial. It does, unfortunately, have to come first, as a good understanding of how CSS actually works is essential to using it effectively. So, CSS stands for Cascading Style Sheets. It's what is known as a scripting language, one which tells your browser exactly how a page should appear on your screen, but on it's own, CSS does nothing more than sit there. Compare a page to the human body. CSS would be the bones and sinews, the things that give us shape and form and dictate how we move, but it's the muscle and skin that make up the rest of our body, and they come in the form of HTML.

For this tutorial, I'm going to assume you know the basics of HTML. If you don't, (you need an account to see links) will give you more than enough to get by with. If you are just setting out and unsure about all of this, you might want to stop reading this tutorial and start reading that one, or any other HTML tutorial you can find. Neopets also has a (you need an account to see links) that you can use for the bare bones of it.

Okay, so let's crack on with it. The first thing to note is that any lines of CSS must always be located between two style tags. In the same way that bolded text must be between two <b> and </b> tags, so CSS needs it's boundaries marked out. You should always make sure to only have one set of style tags and to keep them at the very top of your page for organization's sake.

<style>
Your CSS here
</style>

Now, CSS works by naming an element and then specifying how it will look. Element names will sometimes be pre-existing ones like 'body' or 'a', and others will be unique names that you've chosen yourself. I'll deal with the different names later on. Once you've named an element, you can then state a property and assign a value to it. Don't worry, I'll explain.

A property is basically anything that CSS allows you to manipulate. For example, the background-color property allows you to specify a background colour. Duh. xD Properties and values have a specific format that must be observed in order for them to function properly. The correct type of brackets and colons need to be used. This is what it should look like.

elementname {property:value;}

You can add as many properties as you like to the chosen element as long as you keep them within your { and } brackets. Notice how the colons are positioned? This pattern must be repeated for every property within your CSS. As for the value, well that depends entirely on the property you've specified. If you specify a font property, your value will be the name of a font. If you specify a colour property, your value will be some sort of colour name. Likewise, a 'width' property will have a numerical value.

<style>
objectname {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

There are two types of colours named here. The first is the text name 'lightblue', the second is a hexadecimal colour code (hex code). #ffffff is the hex code for the colour white. Most of you will be familiar with these colour codes. It's also worth noting that CSS uses American English spelling, but I use British English because I'm from New Zealand. It's just habit, I guess. Sorry if it gets confusing.

Anyway, that's pretty much the basics of CSS syntax. There are numerous rules regarding names, order and other things I probably don't even know about, but this is enough to get you by on Neopets at least. If you've understood this, than congratulations, the rest of the tutorial will be a breeze for you!

Summary:

• All CSS must be contained at the top of your page between <style> and </style> tags.
• CSS works by naming an element and then assigning it property and value pairs.
• A property is just a name for a feature of an element such as the background of a table.
• All property/value pairs for any given name must reside between { and } brackets.
• All values must begin with a : and end with a ;.
• CSS uses American English.

Body, ID & Class

Okay, so this one is less complex than the syntax, but you've still got to pay attention. Remember how I talked about everything having a name? You do remember, right? Right? xD Okay, well there are three types of names. Body, ID and Class. We'll deal with the latter two first.

ID and class names are ones you specify yourself. The difference between them is really quite simple. ID names are one-use objects, and class names correspond to objects you will use multiple times on a page. The difference within your style tags is simply that an ID name is preceded by a #, and a class name is preceded by a . (period). The name you choose for either of these must be unique from any other name, but it can be anything you want. For the purposes of this tutorial, I'm going to call my element 'robot' because it's fun.

Now, in the next part of the tutorial I'll explain all about the different types of elements, but for now we'll deal with what is known as a DIV. This is basically a box created by you that sits on your page. Here's how the difference between an ID and class type DIV would look.

ID:

<style>
#robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

Class:

<style>
.robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

As you can see, there's really not much of a difference. But in order for this DIV to show up on your page, you'll need to use HTML. This is also really simple:

<style>
#robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

<div id="robot">CONTENT HERE</div>

Notice the HTML specifies first, that the object is a DIV, second that the object type is an ID (single-use) and then that the object's name is 'robot'. If you wanted to use this particular type of DIV more than once, your HTML would only chance slightly:

<style>
.robot {background-color:lightblue;
font:verdana;
color:#ffffff
width:300px;}
</style>

<div class="robot">CONTENT HERE</div>

That's really the only difference between ID and class. So let's move on to the first type of name. Body elements are things which already exist on your page with their own preset properties and values. Since they already exist, they already have a name, and thus they're just as easy to manipulate. Unlike ID and class, these don't need a . or #.

One type of body element is actually 'body' itself. This name, when used in your CSS will apply specified properties to your entire page. For example, if I used the background-color:lightblue; property and value combo, it would apply a light blue background to my whole page. Other named elements with different coloured backgrounds would still appear as such.

Other types include 'a', which corresponds to the links on your page. Within that, there are also four types of links, each one able to be manipulated with CSS. You know how the default links on a page are always blue and underlined? Well that's because the base link properties say that this should be so. You can easily change this.

<style>
a {
color:red;
text-decoration:none;}
</style>

Now, whenever you use any <a href> or <a name> tag in your HTML, it will show up as a red link with no underline. You can also change the way your links appear when you mouse over them by naming 'a:hover' and setting properties. There is also a:visited and a:active, both of which are rather self-explanatory and useless. a:active only shows up for a quick second when the link is clicked. These four types of link names need to be placed in the correct order on your style sheet for them to work:

<style>
a {
color:blue;
text-decoration:none;}
a:visited {
text-decoration:none;}
a:active {
text-decoration:none;}
a:hover {
color:red;
text-decoration:none;}
</style>

Other types of body names include 'table', 'h' and 'textarea', all of which I'll deal with later. I know it's getting a little confusing, but it's probably just because I'm bad at explaining. xD Sorry!

Summary:

• Body elements: body, a, table, h ... all of which correspond to similarly named HTML tags such as <body>, <a href>, <table> and suchforth.
• ID: single-use element created and named by you. Represented by a period (.).
• Class: multiple-use element created and named by you. Represented by a hash (#).
• ID and class aren't required for body elements.

DIVs, Tables, Headers, etc.

This is the last of the technical parts and hopefully it'll tie everything together. If you're having trouble understanding these concepts just keep reading, because this might help clarify things for you. Though feel free to ask questions if it still makes no sense.

So, the first thing you need to do is to think of your page in 3D. The bottom layer is the 'body' object and as you progress down your style sheet, so you progress up your layers. DIVs and tables are the two major content containers on a page, and they sit "above" the bottom layer.

As I mentioned before, a DIV is simply a box that you create in which you can put content. You specify its size, colours, styles and location on your page, use HTML to execute it and then fill it up with content. Same goes for tables except that tables place your content into cells. Both are useful in their own right. DIVs and tables can be subject to an ID or class type, though this isn't always the case, as a table has default settings that can be used as opposed to custom ones. I'm going to work with a table this time.

<style>
table {
width:500px;}

#unicorn {
width:400px;}
</style>

<table><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>

<table id="unicorn"><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>

The first named element was the body object 'table', which targets every <table> tag unless you give your table an id or a class, and therefore give it a unique name, in this case the word 'unicorn'. You can also target specific rows or individual cells within the table by naming them and specifying values.

<style>
table, tr, td {
width:500px;}

#unicorn {
width:400px;}
#unicorn td {
background-color:pink;}
</style>

<table><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>

<table id="unicorn"><tr><td>1st cell</td>
<td>2nd cell</td></tr></table>

Notice there are two changes. The first is naming the table rows and table cells by separating them with a comma. This is an easy way to save space if you want to apply the same properties to multiple elements. The second is the addition of the #unicorn td name. If unicorn is the name of the entire table, than I've just told my browser to target the cells (td) of the table named 'unicorn' and turn any text within those cells pink. Simple, no?

Other things you can do is to specify different types of headers. You do this by naming them 'h1', 'h2', etc. in your style tags, and corresponding them to <h1>HEADER ONE</h1>, etc. in your HTML. Same goes for 'textarea', 'img' (which will target any image on your page unless otherwise specified) and plenty of others. Unless you apply these to an id or class type object, they will be body objects and will thus apply to the entire page unless another id or class property overrides it. Here's an example:

<style>
body {
background:#000000;}

img {
border-width:5px;}

#attack {
width:60px;}
#attack img {
border:none;}
</style>

Notice how the first 'img' element stands alone as it's own tag, but the second is attached to an id element. So in this case, your browser will display all images with a 5px border except images contained within the #attack object, which will display with, you guessed it, no border at all.

Summary:

• DIVs and tables, etc. can be id or class elements which gives the a unique name and priority over body elements (with no id or class).
• Any body element (img, a, td, etc.) can be attached to an id or class object to specify unique styles within said element.
• All CSS names must correspond to an execution tag in HTML.

Properties & Values

I don't really need to say much for this one since I'm usurping someone else's (you need an account to see links). Still, it's worth reminding you all that a lot of these properties won't work on Neopets, and some are banned by their filters. Also, some of the descriptions aren't that great, so if you want to find out what some of them do, I would suggest using a Neopets pet page or you could try finding an online testing website. Either way, just play around with things, remember that you can't break anything, and don't be afraid to make a mess of things. xD It's all part of the fun of it!

Summary:

• Congratulations! You now know basic CSS and you're ready to start experimenting with building your first page!

Design & Aesthetics

Well, that concludes the technical part of this tutorial, but a good knowledge of CSS, while enough to make a page, is certainly not good enough to make a nice page. This part of the tutorial is devoted to making sure your page is user friendly, easy on the eyes and inviting to its visitors. Now, I'm no web developer and I'm not going to go into too much detail because a) I don't know all that much about it and b) you're not being paid to make a stunningly pretty site, and if you were, you wouldn't be reading this. xD I will, however, go over some basics of design which most of you should already be familiar with.

The Golden Ratio

A lot of artists will be familiar with this concept. It's a ratio for balancing visual stimuli which is actually more complicated than I'd like, so I'm going to make it simple. Imagine your page is divided into a 3x3 square board (9 squares total) with the sections of your page occupying these squares. The idea is to make sure that your content is evenly balanced between the three vertical columns and the three horizontal rows, thus making your overall page balanced. It's fairly simple; don't stick all your content on one side of the page.

Colours and Themes

When designing a page, it's good to pick out some colours and features that will match each other nicely. One big mistake I see quite often is a page being totally overwhelmed by too much colour. It is much easier on the eyes if you can pick only a few colours to work with. My personal maximum would be three, but I usually work with only two, and sometimes even just a monochrome page, but with differing tones. Flashing things, colourful sparkles, rainbows and such are a bit too much.

Some Text Mistakes

I'm just going to list them, because there are too many to have them all in individual sections.

• Contrast: This is a huge one. If you put bright pink text on a bright purple background, no one in their right mind is going to want to read it. Make sure your background and text colours are compatible and easy to read. Black-on-white is the best for this, and I know you think it's boring, but science has shown that, for large amounts of text, this is actually easier to read. Even moreso than white-on-black.
• Centering: Another huge problem I see is people, in an effort to achieve balance, centering all of their text. It's fine if you want to center headers, poems, images or other special elements, but centering a large body of text makes it much harder to read.
• Fancy Fonts: They might look cool, but who can actually read them? Use them for headers, but please, I beg you, use a normal font for your main text! Any serif font will do.
• Font Size: Everyone has a different screen resolution, and a good 40% of the internet (probably more, this is an underestimation) will have some kind of visual impairment. Don't make your text too big or it will look tacky, but don't be fooled by the "small is cool" lie, because 40% of the internet won't be able to read a word you type.
• Paragraphing: A paragraph should be distinct for those around it by one of two standard methods. Either indenting, double spacing or both. Don't stick them all close together without at least an indent or people will lose their place on your page.
• Leading: If you want to go look it up, be my guest. It's a typography term that deals with sentence and paragraph spacing. This isn't such a huge problem since most fonts will already have been leaded, but you might want to add your own type of leading to your paragraphs to make them easier to read. I tend to use the property: line-height:120%;
• Line Width: Have you ever tried to read text that spans your entire screen? It isn't comfortable for large amounts of text. The advice I got from the web designers I know is that any given line should be between 15 to 20 words in length (assuming you're not using some ridiculously sized font).

Planning Your Content

What makes a page really good is if you have an idea of what sort of content you'll be displaying, and the best way to display it aesthetically and efficiently. For instance, if you happen to have a large number of images, displaying smaller thumbnails which are internal links to the larger images is a great idea. Similarly, if you have any data to display, a neatly laid out table would be of use to you. Try to be logical about it, and make sure to look at your page regularly as you develop it to make sure you're keeping things organized.

OVERLOAD!

I've seen this all too often. A page that is so busy, so disorganized, so hard to navigate around that I just give up and go away. I can't be bothered sifting though screeds of information to get to the small portion I'm interested in. I don't want to sit for two minutes while a huge banner image that takes up my whole screen loads slowly, and I certainly don't want to get headaches from the marquees, flashy banners or sparkle things that, while pretty, only serve as clutter. So, when deciding what to have on your page, ask yourself some questions:

1. Is it necessary information?
2. Is it aesthetically pleasing?
3. Will it hinder my viewer in any way?

You don't have to meet all three of these criteria. If something is useful but not so nice looking and you can't make it pretty, than you can still include it. Just try to keep these things to a minimum. The same goes for image-heavy pages, by the way.

Navigation

Every good page that has more than a little content will need to make sure that this content is organized and easily accessible. One way to do this is through the use of internal links and headers. Look at this tutorial, see how it is neatly organized into six major sections, and this particular section is neatly organized into a number of sub-sections, each with it's own header? And notice how I used the first post to link to each subsequent section? Yeah, it's basically that. Set things out neatly and learn to use internal links if you don't already know. They're some of the handiest things you'll ever have.

Formal vs. Informal

This one is really up to you. If you're aiming for informal, you can use any kind of speech you like. If you're aiming for formal, you'll have to make sure not to use words like 'kinda' and also to exclude the use of smileys and/or emotes, as they do disrupt text a little, and not every reader knows what they are or mean. In this tutorial, I've gone for a mix of both which has resulted in a semi-formal way of writing. When I was writing my pet pages, I would make sure to use formal language. That is just my personal preference, however, I would advise against the use of any form of chatspeak and overuse of emotes unless there's a reason for it.

Summary:

• Keep things simple, to the point and organized.
• Make sure your colours and layout contrast nicely with each other.
• Keep your text easy to read.
• Use internal navigation where possible.
• No chatspeak or emote overuse.
• Have a plan, know your content and KISS! (Keep It Simple Stupid!)

Tips and Tricks

Userlookup Element Names

First, here's a code to clear the header, footer, sidebar, etc. from your lookup.

#header, #footer, .footer, #ban, .navigation {display: none;}

Once you've done that, you'll need to know how the userlookup works. So, if you look at a default UL (and if your resolution is large enough) you'll see the grey background, then the white background with the header and all the content. The grey background is your body background, the white is called #main. After that we have several sets of layered content, called .contentModule, .contentModuleTable, and .contentModuleContent. The first refers to the overall content area, let's say it's the collections module. The second refers to the table that holds the content in place. This is the one you want to modify if you want content within a module moved. The third is simple, it's the collections display. Changes made to this one are limited, but colour, image and link changes work.

The headers for the modules also have unique names; .contentModuleHeader, .contentModuleHeaderAlt. The first refers to the black headers, the second to the blue header above Userinfo. If you want uniform headers, be sure to include both in your CSS. ^^

And lastly, we have the individual names for each module. They're fairly simple; #userinfo, #usercollections, #usershop, #userneopets, #userneohome, #usertrophies, #habitarium, #ncmall. Using these on their own, however, is not enough to edit a module. Likewise, using .contentModuleTable on its own will make modifications to all of your content modules. Specifying which one with the names above is necessary, like this.

#userneopets .contentModuleTable {property:value; etc.}

You can also use this combination to edit specific content of an individual module.

#userneopets img {property:value; etc.}

Userlookups are tricky things to get right, and if you want to make one from scratch without prior knowledge, you will probably find it really fiddly to begin with. Stick with it, as it's well worth learning, and don't be afraid to mess with things, change values, swap things around and generally experiment until you get something you want. As long as you save your code in a document before meddling with it, you'll find you learn a lot. I don't know a lot about making UL, so if there is any incorrect or missing information, please do let me know.

Pet Page Tricks

Get rid of that horrible greeny-yellow background to either side of the Neopets banner? Easy. (Note: this code will render every table's background transparent)

table {background:transparent;}

Page Switching

This is a clever little trick I picked up a while ago. It involves using multiple DIV layers to make a small area able to display multiple "pages" of content (one at a time) without navigating away from the page you're on. You can (you need an account to see links).

As I said, it works by using multiple DIV layers. The bottom layer is the base. You must set certain properties: overflow:hidden; and you must also be sure to set a height and width. The second layer is the content layer that contains multiple DIVs. Set each of these DIV heights to the same width and height as the bottom layer and make sure you have a header at the top of each of these content DIVs that can be linked to. Add as many of these DIVs as you like. Make sure you have a separate place for your navigation menu and set internal links to the headers within each content DIV.

Pure CSS Button Links

You can easily make links that look (and act) like buttons with only CSS. All you need to do is set a background and border colours and then invert them for a:hover.

a {
background:blue;
color:white;
padding:3px;
border-top:2px solid lightblue;
border-left:2px solid lightblue;
border-right:2px solid darkblue;
border-bottom:2px solid darkblue;}

a:hover {
background:blue;
color:white;
padding:3px;
border-top:2px solid darkblue;
border-left:2px solid darkblue;
border-right:2px solid lightblue;
border-bottom:2px solid lightblue;}

Try it yourself with different colours for more realistic looking buttons.

Getting Past the Filters

This is a sneaky little thing I was taught to use when I wanted to use CSS positioning, which just happens to be blocked by the Neopets filters. Positioning requires that you first specify the type of positioning (absolute, relative, fixed, etc.) and then specify a position somehow. Most often it is by using the properties top:???px; left:???px;. These two properties aren't blocked, but without the position:relative/absolute/fixed property, they're useless. So, what you do is place the specific position properties (top, left, right, bottom) in your CSS, and move the actual position property into your HTML.

#pinkfluff {
top:10px;
left:20px;
height:400px;
width:500px;}
</style>

<div id="pinkfluff" style="position:absolute">CONTENT</div>

Neopets Layout Hacks

Here's how to get rid of all the Neopets headers, footers, sidebars and links for any given page.

#header, #footer {
display:none;}
.sidebar{
display:none}

Get rid of those ugly grey lines on your userlookup with this.

.contentModuleTable {
border:none;}

Filter Changes (31st January, 2011)

TNT changed the filters on pet pages and userlookups to match those for shops and galleries. This means that a few commonly used properties can no longer be used. I'll list them here, as well as possible alternatives for you to use. TNT has also implemented a code-cleaning feature that correctly formats your CSS.

• <style /> and <style type="text/CSS"> will no longer work as a code fix, and are now the cause of a lot of problems. Before messing with your code, try simply removing the extra stuff so it's just <style>.
• Textures and marquees are no longer usable. There's no way around this except to use regular images.
• Some coding shortcuts have been removed. I would recommend writing out all your properties in longhand rather than using any shortcuts.
• Recipient=, subject=, message_body= and target=_blank no longer function. When linking to Neomail, leave it as plain as possible.
• Opacity codes are gone. A simple fix is to create your own background and set a background image for your object. You will need a program that supports transparency. (you need an account to see links) is free and easy to use, or you could simply PM me for a transparent background. I'd be happy to help.
• The shortened form of Neopets links now requires the forward slash to be present. So instead of linking to "~Petname" you would link to "/~Petname".
• Images are bugging. The cause isn't known, but check your image URL for words that might be banned. Ignore the silly message about image file types unless it actually does apply to you.
• <u> (underline) is no longer working. You will need to write it into your page as a font style or class.

Feel free to ask questions or make comments, and enjoy. ^_^

[Sharpay]

Very useful but too long for me, haha.
Do u have a premade lookups page? (: