What is HTML and CSS?

HTML, or Hyper Text Mark-up Language, is the language of web pages. It involves the use of 'tags' that tell a web browser how to display a specific page. All tags are contained between and angled brackets. The latest version of HTML also allows you to separate the tags for presentation (things like font style and size) from the actual content of the web page with Cascading Style Sheets (CSS) that can be used to control how content appears. This is particularly useful for changing how pre-existing content appears - such as on your user lookup.

These guides will attempt to walk you through learning the basic HTML that you can use on Neopets, and then move on to some more advanced CSS which can be used to make your own lookups and edit other pre-existing pages. If you'd rather start right away on the fancy stuff like lookups and guild layouts then I've also made up some simple step-by-step tutorials for you :)

These guides are by no means comprehensive, but I've tried to cover all the little things that I see people asking about on the Neoboards. If you want to learn more, I encourage you to search around the internet for more complete guides or to get some books out of your local library to expand your knowledge!

Link Back Please?

If you have found my guides helpful, it is very much appreciated if you would like back to this page so that others can find it too :) The tutorials each contain a step to text-link back but here are a couple of image-links you can use instead if you prefer.

Affiliates

========================================================= ========= HTML GUIDES =================================== ========================================================= ========= General Formatting ================

Really, to enter text on a web page all you have to do is type it in - the use of tags is only nessasary if you want to add something like bolded text, change the font or create a new paragraph. Generally, HTML tags require both a start tag and a finish one. The finish tag is always the same as the start one, but you add a / after the first . This is probably easier to understand with an example. The start tag for making text appear bold is b, and the finish tag is /b. See where the / has been added for the finish tag? Good! The concept of start/finish tags can be quite difficult to understand at first, especially because there are exceptions (aren't there always?), but don't worry - as a general rule, there are very few tags that don't require finishing tags.

Basic Tags

Here are some of the basic tags for formatting your web pages.

Start Tag What It Does Finish Tag
b This makes text bold /b
i This makes text italic /i
u This underlines text /u
strike This puts a line through text /strike
big This makes text larger /big
small This makes text smaller /small
sub This creates subscript /sub
sup This creates superscript /sup
marquee This makes text scroll across the page /marquee

Paragragh and Line Breaks

The tags to create new paragraphs and line breaks are two of the exceptions to the finish tag rule. To make text appear on a new line, type br.
Text will now appear on the next line down, like this.
To create a new paragraph, you use the tag p.

Text will then skip a line, like this. I should probably say here that the paragraph tag can be ended. In fact, strictly speaking, it should be, but for beginners this is extra information - it becomes important if you use CSS to style your text but I will explain more about that in the CSS sections. Don't worry, if you are styling with font tags nothing bad will happen if you forget to end your paragraph tags!

Attributes

Attributes can be thought of as a bit like supplementary information for any given tag. They consist of an attribute name and a value - the name tells the browser which element you want to change and the value is what you're changing it to. Attributes are always placed into your start tags in this format:

tagname attributename="value

See the basic format of name=value? Excellent :) You can have multiple different attributes affecting the same start tag, seperate each one with a space. We'll run through an example of an attribute below to help clarify this idea as it can be kind of confusing at first.

Centering Text

Text can be centered in two different ways - by using the center/center, or by applying the align attribute to your paragraph, table or div tags. Using the attribute on a paragraph tag the code would look like this:

p align="center Look, I'm all centralized! /p

And volia - centered text!

Look, I'm all centralized!

The one thing you really have to remember when you apply the attribute to a paragraph tag is to close the tag once you've finished with your centered text - otherwise, all your text will be centered!

So, why is it better to align your text with the attribute and not the center tag? Well in some places on Neopets (namely, pet lookups) the center tag is disabled, so it won't work. However, there is another reason - the align tag is not only for centering: if you change the value you can align your next to the 'left', the 'right' or even 'justify' it. Justified text stretches from one side of the container to the other, like the text in a newspaper column (and these guides!), which can look neater especially when you have large blocks of text on your page.

Next Lesson: Styling Text

========= Styling Text ================

Change aspects of your font is a very easy way to make parts of your content stand out, or even just make your general text look fancier. To change any aspect of your font you use font tags, with the correct attribute for what you want to do - simple!

Changing Font Size

In non-CSS text styling there are only seven sizes of text, with numbers assigned from 1 - 7. They look like this:

Size One
Size Two
Size Three
Size Four
Size Five
Size Six
Size Seven

To change the size of your font, you use a size attribute - so your code looks like this:

font size=NUMBER

The red NUMBER is replaced by the number (1 - 7) of the size you want your text to be. You have to remember to close the font tag with the customary /font, otherwise everything after you enter it will be that size.

Using Different Font Styles

Font style, or face as it is known in HTML, is an excellent way of differentiating between titles and the body text. The code looks something like this:

font face=NAME Your text here :P /font

You replace NAME with the name of the font you want to use. You have to be a bit careful with this though as not everyone has the same fonts on their computers. Most people have Verdana, Arial and Impact but these can get boring after a while! If you open a word processing program, like Microsoft Word, and look at the list of fonts you have to choose from there, any that are just one word names, like Verdana, Tahoma, or Frosty, can be used in the face attribute - just remember that if its an obsure font that no-one else has they won't be able to see it on the page. The text will revert to a basic style, probably New Times Roman, which is the default font if you don't specify one.

I'll give you some examples of one word fonts to get you started, but there are literally hundreds floating around the web. If they look like the font on the rest of this guide then you don't have the style installed on your computer, sorry!

Arial
Chick
Croobie
Dotum
Freshbot
Frosty
Jokerman
Poornut
Rod
SimSun
Tahoma
Vivaldi

You can search through your own lists of fonts for others, but these should be enough to get you started.

Changing Font Colour

Font colour can be changed within the font tags too. The hardest thing about this (at least for me, and my British English) is that the attribute for changing colour is spelt color. The tag looks like this:

font color=COLOUR

Replace COLOUR with either the name or the hexidecimal (HEX) code for the colour you want.

Now I bet you're asking what a hexidecimal code is, aren't you? Basically its a six-figure number that reprents a specific colour to the web browser. HEX codes are always preceeded by a hash (#) mark. The numbers represent the Red-Green-Blue (RGB) components that make up the whole colour. Each component is assigned a number from 0 to 255, which is then converted to a two digit code using the numbers 0 to 9 and the letters A to F. The first two numbers in a HEX code are its red component value, the second two the green, and the final two the blue. Using this knowledge you can create your own hexidecimal codes. Red, for example, has the maximum R value, and 0 for the G and B values, giving the hexidecimal code #FF0000. Most graphics programs - ones like PSP, Photoshop, GIMP, etc - can also take a colour you select and give you the HEX code for that colour.

For those of you who do not want to try your hand at creating your own hex codes, all browsers also recognise the following colours by name:

Black (#000000)
Grey (#808080)
Silver (#C0C0C0)
White (#FFFFFF)
Maroon (#800000)
Red (#FF0000)
Purple (#800080)
Fuchia (#FF00FF)
Green (#008000)
Lime (#00FF00)
Olive (#808000)
Yellow (#FFFF00)
Navy (#000080)
Blue (#0000FF)
Teal (#008080)
Aqua (#00FFFF)

Combining Font Characteristics

You can add more than one attribute tag together to give you even fancier text too. For example, say you wanted huge red text, with a "croobie" style font, then the code would look like this:

font face="croobie" color="red" size="7 My Text Example /font

And the page would display this:


My Text Example


You can use any combination of the face, color and size attribute tags within the same "font" tag - just make sure you separate each one from each other with a space. The order of the variables doesn't matter, as long as they are all within the brackets.

HTML Headings

In addition to using font tags to create different font styles and colours for titles, HTML also has built in tags you can use to create headings on your pages. There are six sizes of heading, with the largest being h1 and the smallest being h6.

h2 This is a Heading of Size 2 /h2

And the page would display this:


This is a Heading of Size 2

You can use CSS codes to change how your headings look too, like I have done for this guide - each of the part headings in this guide are styled versions of the h1 heading tag. We'll get to how to do that in the Styling Text with CSS section later.

Just a quick note on these heading tags - you shouldn't use them simply to create bigger text. Search engines (like Google) use the text in your heading tags to index your page, so you don't want to use them for non-title text. If you want to create emphasis on something in the body text of your page, either use the appropriate tags to create bold text or use font tags to make your text bigger.

Next Lesson: Inserting Images

========= Inserting Images ================

Adding images is another great way to make your web page look more interesting. Again, they're pretty easy to add - the HTML looks like this:

img src=IMAGE URL

You replace IMAGE URL with URL of your image, and volia! Your image displays like this:

Now you're probably wondering how you find the URL for an image, right? To find the URL of an exisiting image right-click it with your mouse and select "Properties". A window that looks something like this (depending on your browser) will appear:

Copy the URL and paste it into the code, and you've displayed your image! Easy :) If you are using the web browser Firefox, you can also just select "Copy Image Location" - that will copy the URL for you.

If the image you want to display is saved on your computer you will need to upload it to an imagehost before you can display it. Some good image hosts are Photobucket (requires registration), Tinypic (no need to register), and Imageshack (again, no registration required). Any of these sites will host your images for free, and provide you with a URL for your image. Once you've uploaded the image (and gotten the URL) simply paste it into the code, same as above.

Remember, the img tag is an exception to the finish-tag rule: it does not require a finish tag!

Width and Height

You can change the size of your images too, by using the width and height attributes.

img src=IMAGE URL width=NUMBER height=NUMBER

Hopefully, this is fairly self-explanatory :) You can also put in just one or the other attribute (either width or height) and the browser will automatically set the other one to the correct value so your image isn't skewed.

Image Borders

To add even more intrest to your images you can add borders with the border attribute tag. Within the img tag it looks like this:

img src=IMAGE URL border=NUMBER

As above, IMAGE URL is the URL of your image, and then NUMBER is replaced with a number from 0 upwards that tells the browser how thick the border should be. "0" is no border, "1" is a thin border, "2" is a bit thicker and so on.

Aligning Text with Images

There are a variety of ways that you can set your text to work around any images you use as well. This is done with the align attribute, like this:

img src=IMAGE URL align=VALUE

For this, VALUE can be either 'left', 'right', 'top', 'bottom' or 'middle'. They will align the text...

The 'left' make the image sort of float to the left - the text will automatically wrap itself around the image! To demonstrate this a little better, here is some extra text to make this into a paragraph.

If you use 'right' then it does basically the same thing, only with the image over the right side rather than on the left. Again, here is some more extra text to help show the correct alignment and how it works.

The last three are different. Aligning 'top' puts the text to the top of the image.

Using 'bottom' puts the text to the bottom of the image.

Finally, 'middle' aligns the text to the middle of the image, like so.

The 'bottom' value is the default if you don't set one with this attribute ;)

Background Images

Making an image display as a background is very easy. If you want the background to cover the whole page then your code would look like this:

body background=IMAGE URL

For images that are smaller than your page, the image will repeat itself to cover the area. There's not much else you can do with background images in HTML, but if you want to try something a bit more complicated see the CSS backgrounds section.

Next Lesson: Creating Links

========= Creating Links ================

Links allow people to move from one page to another, or from one section of your page to another quickly and easily. Creating links seems to scare most people, and aside from the "how do I put an image up?" question, its the one I answer the most often on the Neoboards - really though, links are very simple to create!

The basic code for a link is:

a =PAGE URL Link text /a

You simply replace PAGE URL with the URL of the page you wanted to send the person to. Say, for example, I wanted to link to Neo's homepage - then I would replace the URL like so...

a href="http://www.neopets.com/ Neo's Homepage /a

... and I'd get a fancy link for people to click on: Neo's Homepage!

Obviously on Neopets, you can only link to other page that start with http://www.neopets.com/ as TNT doesn't allow links offsite. If you try, you'll get a scary warning message up when you try to submit your code and it won't go through or save.

Link Targets

By default, links automatically open in the same tab or window that a person browsing your site is using - like when you clicked the link to Neo's homepage above, it opened in this window and moved you away from this guide. By using the target attribute, you can control which tab or window the link opens in!

a href="http://www.neopets.com/" target="_blank Neo's Homepage /a

The target="_blank" tells the browser that you want the link to open in a new tab (or window), like this one does! Easy, huh?

There are other values you can set for the target attribute - _self, _parent, _top - but these aren't likely to be needed in any coding you do on Neopets, so I won't confuse you any more by explaining what they do. If you're interested, Google should be able to help ;)

Page Anchors and Within-page Links

Page anchors are basically "named" points in a longer page that you can link to - this is how people have their navigation at the top of a page and links to jump a viewer directly to a specific point. The code to set an anchor is very simple.

a name=NAME/a

You technically still need the customary /a in there, as the a tag needs a finish tag, but you don't need to put anything inbetween them. The red NAME is the name you assign to that point on your webpage - it doesn't matter what it is, so long as there isn't another point on the same page called the same thing :)

To create a link that jumps to your anchor, you need to use the same a href="... code from above - however this time instead of a URL in the quotation marks you have your anchor's name preceeded by a hash (#) symbol, like this:

a href="#NAME Jump /a

Now you've got a link that allows people to jump directly to a different point on your page - for example, each of the sections of this guide are anchored and when you click the links in the navigation lists it jumps you to the part of the page with the correct guide on it!

You can also link directly to a specific point on a page from a different webpage using your anchors. This is done simply by adding the appropriate Sariyra onto the end of a URL when you're creating the link, like so...

a href="http://www.neopets.com/#NAME Jump to anchor on another page /a

Anchors and within-page links can be a great way to make sure a viewer can easily reach the content they want on your pages without having to scroll through endless other topics that they're not interested in!

Next Lesson: Making Lists

========= Making Lists ================

List are a relatively simple way of organising and displaying information. There are two forms of code for creating a list: one for a list with bullet points (known as an unordered list) and for for creating a list with numbers (an ordered list). You can change both the style of the bullet points and/or the style of the numbers with attribute tags.

Unordered Lists

This is simply a list that uses bullet points rather than numbers. The tags ul/ul are used to inform the browser that the contents are to be displayed with bullet points. Each point (or list item) should be preceeded by the tag li (you can end this if you like, but you don't have to). The code for an unordered list therefore looks something like this:

ulliPoint one liPoint two liPoint three (etc...) /ul

It will then be displayed like this:

  • Point one
  • Point two
  • Point three (etc...)

Remember you can have as many bullet points as you like - just make sure each point is within the ul/ul tags and preceeded by a li tag.

Bullet Point Styles

You can change how your bullet points look with a type attribute. Bullet points can either be a 'square', a 'circle' or a filled circle called a 'disc'. The code for square bullet points would therefore look like this:

ul type="squareliPoint one liPoint two liPoint three (etc...) /ul

Your bullet points now look like this:

  • Point one
  • Point two
  • Point three (etc...)

Ordered Lists

The code for this is actually very similar to the code for an unordered list - it follow the same pattern anyway. The start and finish tags are ol/ol, and each point is preceeded by a li tag, like this:

olliPoint one liPoint two liPoint three (etc...) /ol

It will then be displayed like this:

  1. Point one
  2. Point two
  3. Point three (etc...)

As with unordered lists, you can have as many (or as few) points as you want.

Numbering Styles

When you create an ordered list you can specify the number type to be 'i' (i,ii,iii etc), 'I' (I,II,III etc), 'a' (a,b,c etc), or 'A' (A,B,C etc) with the same type attribute as you use for changing bullet point styles. The code for a list numbered with uppercase Roman numbers would therefore look like this:

ol type="IliPoint one liPoint two liPoint three (etc...) /ol

And would display like this:

  1. Point one
  2. Point two
  3. Point three (etc...)

Nested Lists

These can be particularly useful, especially if you have multi-layered information to display. Basically the code is just one list inside another. To put it another way, you put more list code after one of the li tags, like this:

olliPoint one liPoint two olliSub-point one liSub-point two liSub-point three (etc...) /olliPoint three (etc...) /ol

It'll then look like this:

  1. Point one
  2. Point two
    1. Sub-point one
    2. Sub-point two
    3. Sub-point three (etc...)
  3. Point three (etc...)

You can mix unordered lists and ordered lists too, so you get something like this:

  • Point one
  • Point two
    1. Sub-point one
    2. Sub-point two
    3. Sub-point three (etc...)
  • Point three (etc...)

Next Lesson: Horizontal Rules

========= Horizontal Rules ================

A horizontal rule is a line that can be drawn across a webpage with the hr tag. This is yet another exception to the finish tag rule, and doesn't require a finish tag. The rule is drawn across the available display area of the webpage. A simple hr looks like this:


You can change how the rule looks with various attribute tags as well.

Size Attribute

We'll start with size - that refers to the thickness of the line. The default is 1 pixal, like the rule above, but if you want your rule to be thicker then you can add a size attribute into your hr tag. Say, for example, you wanted a 15 pixel thick rule, then the code would look like this:

hr size="15

Your line now looks like this!


Width Attribute

The width attribute tag is similar, but it effects the width (obviously!) rather than the thickness. There are two ways you can assign a width: firstly, by giving the rule a fixed-pixel width, or secondly, by telling the rule to always be a specific percentage of the display area. The fixed-pixel attribute looks like this:

hr width=NUMBERpx

The red NUMBER is the replaced with the pixel value of how wide you want your rule to be. See the "px" after the number? That indicates to non-Internet Explorer browsers that you are working with pixels - if you forget it then your attribute will only work in Internet Explorer. The percentage-width attribute looks exactly like the pixel-value one, except instead of "px" you put "%", like this:

hr width=NUMBER%

Aligning Your Rules

Once you begin affecting the width of your rules, you'll notice that the line automatically centers in the middle of your page. If you want your rules to be on the left or the right, then you can use the align attribute.

hr align=VALUE

The VALUE is replaced by either 'left' or 'right', depending on which side of the page you want your rule on.




Line Shading

You can also affect the shading of your rules. By default, horizontal rules are shaded - to tell your rule not to have shading simply put the words "noshade" into the hr tag!

hr noshade

It will then look something like this:


Simple, right?

Defining Colour

The final thing you can do with your rules is change the colour of them; with the color attribute tag.

hr color=COLOUR

COLOUR is, obviously, replaced with the name or HEX code for the colour that you want your rule to be!


You can combine any of these attribute tags together, to get a rule that looks exactly as you want it to.

Next Lesson: All About Tables

========= All About Tables ================

Tables in HTML can be a great way of organising your content - either by using your tables to make a more interesting layout, or just to arrange some of your information into an easy-to-view format. A table is basically made up of cells arranged into a series of rows. The basic code for creating a table is table to open it, and /table to close. What goes in between them depends on how many rows and cells you want your table to have. Rows are opened with tr and closed with /tr; cells open with td and close with /td. That might sound confusing at first so we will run through some examples.

First, say you wanted a table that was basically just two columns - this is how the code would look:

tabletrtd Cell #1 /tdtd Cell #2 /td/tr/table

And it would display like this:

Cell #1 Cell #2

See how the two cells are contained within the row tags, and its all encased by the overall table tags? Good :) Now we'll take a look at some code for a slightly more complicated table, one that has two rows of cells:

tabletrtd Cell #1 /tdtd Cell #2 /td/trtrtd Cell #3 /tdtd Cell #4 /td/tr/table

And it would display like this:

Cell #1 Cell #2
Cell #3 Cell #4

The addition of another set of tr tags creates another row for the next lot of td cell tags. Don't worry too much if this is confusing you - tables are hard to grasp at first. Just remember to close each of your cells with /td when you've finished the content of that cell, and to close the row with /tr after you've closed the last cell of that row.

Ideally, you should have the same number of cells in each row - you can sometimes get away with having less in one row, but its not good practice. If you don't want anything in that cell, still put in a td/td as a "place-holder" to keep your code neat.

Borders

By default, tables have no borders. While this can be useful sometimes, often you'll find you do actually want the borders to show up and divide your content. The code for a border is very much like that we've already used for image borders, and it uses the same border attribute. You apply it to your table tag, like this:

table border=NUMBERtrtd Cell #1 /tdtd Cell #2 /td/trtrtd Cell #3 /tdtd Cell #4 /td/tr/table

Just like with image borders, NUMBER represents the size of your table's border with higher numbers giving thicker borders. Table borders do display a little differently though. This is how the above code would display:

Cell #1 Cell #2
Cell #3 Cell #4

See how they border looks a bit odd? Not like the nice smooth lines around an image anyway - more like a double border. Thats because the border occurs around each cell, as well as around the whole table. Once you progress on to using CSS to style your tables, you can collapse the borders together (which I have done for any tables I've got in other parts of this guide) but we'll get to that in the CSS Margins, Padding and Borders section.

Padding and Spacing in your Table

Often, you'll find that the default displays for your tables have no space between your table's borders and the cell content (this space is called "padding"). This can be okay in some circumstances but mostly - at least in my opinion - adding some padding to the cells can make your content more user-friendly and easier to read. Padding in tables is created with the cellpadding attribute.

table cellpadding=NUMBERtrtd Cell #1 /tdtd Cell #2 /td/trtrtd Cell #3 /tdtd Cell #4 /td/tr/table

Here is a table with added padding of 20px:

Cell #1 Cell #2
Cell #3 Cell #4

You can see how this adds a lot more white-space around your content. Usually of course, you wouldn't use padding of *quite* that much, but it illustrates the point well.

It is also possible to increase the space between cells too - this is with an attribute called cellspacing. It looks a lot like how you use the padding attribute...

table cellspacing=NUMBERtrtd Cell #1 /tdtd Cell #2 /td/trtrtd Cell #3 /tdtd Cell #4 /td/tr/table

... but creates the white-space between the cells, like this:

Cell #1 Cell #2
Cell #3 Cell #4

Can you see how the white-space is in a different place to where it was before? Thats the difference between cellpadding and cellspacing, its all in where the white-space appears :) Usually its best to play around with a combination of both in your tables, until you find a balance that you like.

Next Lesson: Displaying Code

========= Displaying Code ================

Displaying code is actually really easy and can be done either with text areas, or with character entities. Text areas are easier, but character entities are (in my opinion, anyway) neater.

Text Areas

The tag for a text area is simply textarea. Therefore, the code will look like this:

textarea Coding goes here. /textarea

And be displayed like this:

You can change the size of the the text box with the cols and rows attribute tags. The cols attribute changes the width of your text area and the rows one changes the height. So say you want a long skinny text box, the code would go something like this:

textarea cols="35" rows="3 Coding goes here. /textarea

And now you have a long skinny box!

Character Entities

Text boxes are great for displaying large amounts of code for someone to just copy and paste (like the codes for a premade lookup for example), but for smaller code explanations (similar to what I have in this guide) you need to use character entities. Basically, HTML provides entities as a way characters which are meaningful in HTML itself (like the and symbols) can then be displayed on a webpage. This is necessary, otherwise the browser would recognise the as the start of a new HTML tag.

Entities always start with a & symbol and end in a semi-colon (;). There are many character entities available in HTML (including the entire Greek alphabet), but here are some of the most commonly used ones.

For displaying code you really only need to use the entities for "Greater Than" and "Less Than", as if you just type the others in normally they will show up. However they are good to know, just in case ;)

On petpages, character entities do not work. This is because of the preview system TNT uses - it displays the entities properly on the preview page but once you hit submit it forgets they're only entities and reads them as true code. The do work elsewhere on Neopets though.

Next Lesson: Basics of CSS

========================================================= ========= CSS GUIDE ===================================== ========================================================= ========= Basics of CSS ================

CSS is used to separate the codes for style from those that make up the actual backbone of a webpage. This means that - for example - instead of styling your text with font tags and their various attributes, you can use CSS to change fonts to any part of your page (or all if thats what you want!) without having to use in-line font tags. In addition to being much more user-friendly for you to make changes to your page designs later, using CSS on Neopets also allows you to edit pre-existing parts of pages like your user or pet lookups, or your gallery.

The first thing you need to know is that all CSS codes must be contained within style tags, like this:

style CSS codes go here! /style

You only need one set of style tags, multiple CSS codes can go within them :)

From here on in with these guides, I won't be putting the style tags in my example codes - its up to you to remember that whenever you're using CSS, you need to put it within your style tags!

CSS Syntax

Basic CSS codes are formed like this:

SELECTOR { ATTRIBUTE: VALUE; }

The selector is which element you want to style - normally you use the HTML element, or a class/id name (we'll get to those!). Groups of CSS code relating to the same selector are surrounded by curly brackets. The attribute is the aspect you want to change. Each attribute has an associated value which tells the browser exactly what you want that particular attribute to be. In CSS, the general rule is attribute:value; - with the colon between the attribute and its property, and the semicolon at the end to tell the browser that we're done with that attribute. Don't worry too much if the syntax is confusing for now - we'll run through an example to show you what I mean :)

Text Alignment with CSS

Alignment in CSS is one of the simpist codes.

body { text-align: center; }

Here, we are selecting the body (which is the proper name for the elements on a webpage) and then, using the text-align attribute, setting it to "center". This makes everything on your page center itself! Like with HTML alignment, you can set text-align to 'center', 'left', 'right' or 'justify' depending on how you want your text to align. The default alignment, if you don't set one, is to the left.

In the above example, we are making all the text on the page become centered. By changing the selector you can narrow this down if you want to. Say if you used this instead...

table { text-align: center; }

With this code, we are only selecting elements that occur within an HMTL table to become centered - elements outside the table would remain aligned to the default position.

Classes and IDs

As you've seen with the above example, changing the selector of your CSS code controls which part of your webpage that the CSS will affect. However, if we could only select global elements (like everything in the body of your page, or everything in every table on your page) then CSS would be very limiting because you wouldn't be able to make two tables look different if thats what you really wanted to do. This is where class and id come in! With them, you can name elements on your page and then differentiate them in your CSS.

Class is used when you want to specify a style for a group of elements that you want to look the same. An example of this is my fancy code boxes - I defined their style with a class, and now every time I use one I can name it the same so they look the same. ID is different - it is used to apply CSS to a single, unique element. My credits box at the bottom of this page? Thats defined with an id, because I only needed to use it once. Its easy enough once you get used to it: class if you want to use it more than once, otherwise ID.

You define an ID or class in your HTML, by adding an id="name" or class="name" to any HTML element that you want to style.

[using class] p class=NAME I am the contents of this container. /p [using id] p id=NAME I am the contents of this container. /p

You give your ID or class a unique name - like my credit box ID is called "credits", or my fancy CSS box class is called "css_code" - so that you can then call on it with your CSS code and change whatever attributes of it that you want. Now, any CSS you apply using your ID or class as the selector will only affect the element(s) that you've identified as being called by that name. When using your class and ID names as selectors in CSS, class names are always preceeded by a fullstop (.) and ID names by a hash (#), like this:

[for class] .NAME { attribute: value; } [for id] #NAME { attribute: value; }

This lets your CSS know which it is looking for, class or ID! It also allows you to have classes and IDs with the same name if you really want to... I don't recommend that though, as it gets rather confusing :p

A note on div

A div, or divider, is actually HTML code but since it is mostly only used with CSS anyway, I didn't go into it during the basic HTML guides. Simply, a div is a container. Its major benefit is that it can be used to name sections of your page with classes and IDs. Because paragrah and table codes also have their own inherint use in HTML, using them to name large sections of your page is impractical. Divs solve that problem because they don't have another use - they were made purely to divide up sections of your page to be styled with CSS. If you have multiple paragraphs that you want to look different to the rest of your webpage, then whack a div around them, give it a name with an ID and you're good to go! Much more practical than using a class and applying it to every paragraph, don't you agree?

Divs are also used extensively with position code to create layouts. You can contain each section of your page in its own div and give each them different names; then move them around to create a fancier layout :) We'll go into that more in the position and alignment section at the end.

Next Lesson: Styling Text with CSS

========= Styling Text with CSS ================

Coming soon.

========= CSS Backgrounds ================

Coming soon.

========= Margins, Padding and Borders ================

Coming soon.

========= Position and Alignment ================

Coming soon.

========================================================= ========= TUTORIALS ===================================== ========================================================= ========= User Lookup Tutorial ================

Please remember - on any user lookups you create with the code in this tutorial, it is appreciated if you link back to this page so others know where the code is from :)

Since so many people ask me to teach them specifically how to make user lookups, I've written this tutorial to teach you how to code a lookup in this style. I'll try to go through it as slowly and with as much detail as I can, but you will find it much easier to understand if you already have a basic knowledge of CSS - I highly recommend you read at least the Basics of CSS guide before you attempt to follow this tutorial.

CSS and style Tags

If you really don't want to read the Basics guide (there's nothing overly complicated in it, promise!) then the main thing you need to know before you try this tutorial is that all CSS codes must be contained within style tags, like this:

style CSS codes go here! /style

You only need one set of style tags, multiple CSS codes can go within them :)

Image Templates

This tutorial is designed to teach you to code a lookup in the same style as the preview. Generally, I will use code with values relating to the size of the image in the example layout - to make this easier on you, I've created an Image Template for the main image and for the shield. This tells you what goes where image-wise and is the same size as the images in the example layout.


Drag to addressbar for full-size :)

The background image can be whatever size you like.

For those of you that would rather use your own sized image, I will highlight throughout the tutorial where you need to change your positioning values. However, if this is your first attempt at coding a user lookup I strongly recommend you use a template-sized image as it will make things much easier for you!

If you are using a different sized image then you need to watch out with how wide it is, especially if you're planning on using the dropdown Neopets navigation. I recommend that you don't make your image any smaller than 750px wide, otherwise the navigation won't fit properly.

Step One: Removal

To start with you'll want to remove some of the pre-existing parts of the Neopets layout - the sidebar, footer, etc. The code is nice and easy, just remember it is CSS so it goes between your style tags!

#footer, .user, #nst, .sidebar, .brand-mamabar, hr, #ban { display: none; }

Simple, right?

Sometimes, if you have a lot of trophies, you will need to remove the Habitarium and NC Mall modules as well - so add this line of code as well :)

#habitarium, #ncmall { display: none; }

If you would also like to remove the part of the lookup that says "User Lookup: username" then you can also add in this code:

.content div a img, .content div b { display: none; } .contentModule div a img, .contentModule div b { display: inline; }

When you use this code, you must be careful with using bold text and linked images later on. The code disables any bold text and linked images in the .content div - then re-enables them in the .contentModule divs. Unfortunately what this means is that when you're typing in a description for yourself (your interests or whatever) your images and bold text will vanish. I have accounted for this in step seven of this tutorial so make extra sure you do exactly what I say there, and please don't complain to me that your images are going poof :p

Step Two: Movement

Now on to the slightly more complicated stuff: editing the two main divs so they look as you want them to. We'll go slowly, don't worry! To start with, you will want to edit some of the properties on the #main div, with this code:

#main { width: NUMBERpx; background-color: COLOUR; border-left: NUMBERpx solid COLOUR; border-right: NUMBERpx solid COLOUR; margin-top: 0px; }

Okay, don't panic! There are a lot of editable parts to this but its really not too bad. For the first NUMBER, after the width attribute, you simply put the width (in pixels) of your image plus an extra 20px. The 20px comes from something you will do in step four with your main image. I'll talk more about that there, and remind you to come back if you want to use something different to what I've used. If you're using the image template and my 20px extra, then this width value will be 870px so plug that in :) The next line, background-color is the colour you want your central area of the layout to be - in the example layout this is the white area. You can enter either the name of the colour you want, or a HEX code.

The final two lines (border-left and border-right) make up the code for the lines that go down the side of the layout - in the example layout, these are the two thin black lines. Generally, you'll want them to be the same so whatever NUMBER and COLOUR you use for one is the same for the other. NUMBER refers the thickness of the line, in the template I've used 1px thick lines. Smaller numbers means thinner lines; larger numbers, thicker lines. For COLOUR, it is just the colour that you want your lines to be. I find black works well most of the time, but for some layouts you may want to try a colour picked out of the image for effect.

Now we'll move on to the other div, #content. Here's the basic code you will need:

#content { width: NUMBERpx; margin-left: 3px; margin-top: -5px; border: 0px; }

This one isn't quite so complicated as the last one. The NUMBER after the width attribute is your image's width plus 15px. The extra is to account for Neo's margins on this div, without it your modules won't be the same width as the image. If you are using the template image then the width should therefore be 865px. You shouldn't need to change either of the two margin values, but if you do want more whitespace between the side borders and your stat modules then you can increase the margin-left value - just remember if you do that you will then need to subtract two times whatever increase you make from your width value to compensate!

Step Three: Background

Now we'll move on to putting in the background image. Before you go any further, you will need to upload your images to an imagehost - Tinypic and Imageshack are two good ones that don't require registration. Each site will give you an image URL once you've uploaded the image, once you have that here's the code you will need:

body { background: COLOUR url(IMAGE URL); }

This is pretty simple. The COLOUR is the main colour of your background. Once you put an image in it is usually covered, except for the time before your background image loads. Its generally a good idea to pick a colour thats close to what your background is, for continuity's sake. IMAGE URL is (fairly obviously) the URL for your background image, which you got when you uploaded it to the imagehost. If you do not want to have an image in the background, or just think that a plain colour works better with your layout, the you can delete the "url(IMAGE URL)" part of the code and the COLOUR value will be the default colour of your background.

Step Four: Image

The next step is creating the code that inserts your image into the layout. For this you will be working with a pre-existing div called #header.

#header { background: url(IMAGE URL) NUMBERpx NUMBERpx no-repeat; width: NUMBERpx; height: NUMBERpx; border: 0px; }

Don't panic if this looks complicated to you. First, the IMAGE URL is the URL you got when you uploaded your main image. That part is simple enough :) The two NUMBERs after that are the distance from the left and top respectively. I always set both of these to 10px - remember back when we were talking about the width on the #main div and I said about adding 20px to your image's width? Well, this is where that comes from: its twice the value you put in for the "left" one (so you have the same space on each side of the image). If you use anything other than 10px for this, make sure you go back and edit your #main width to image width plus twice the value you entered!

The last two NUMBERs are much simpler. The width is the same as the #main width, so for template images with a 10px "left" value put 870px. Height is just your image's height plus the second number you entered after the background attribute. For template images using the 10px I recommended above, this value should be 430px.

Step Five: Navigation

We will work on positioning the dropdown navigation now - this isn't particularly difficult but it does use multiple codes so we'll take it slow. The first thing you will want to do is set the width of a div called #navigation to the same width as your image.

#navigation { width: NUMBERpx; }

If you are using template-sized images then NUMBER is 800px.

The next step is to add margins to the #template_nav div, so that the navigation moves to where you want it to go.

#template_nav{ margin-left: -128px; margin-top: NUMBERpx; }

This can get quite complicated but basically you want to position your navigation relative to a point thats already 40px from the top of the page. To work it out, you need to find out how far your navigation should be from the top of your image, add the top margin you created in step four and then subtract 40 from it. If you put your navigation in the same position as it is on template image and you've used 10px as above, then NUMBER should be 340px.

You can also adjust the spacing between the images if you think the would look better more evenly spaced across the image.

#navigation img { margin-right: NUMBERpx; }

The NUMBER is the extra space between the image links. A value of zero will leave them as they were, positive numbers add more space between and negative numbers make less space. For the example layout, I had a spacing of 10px set here.

The final navigation-related code you will need changes the colours of the dropdowns so that they match your layout.

ul.dropdown { border: 1px solid #000000; background: COLOUR; } .dropdown li a { color: COLOUR!important; } .dropdown li a:hover { color: COLOUR!important; }

The first COLOUR is, obviously, the colour that you want your dropdowns to be :) The second two control the colour of the links themselves - the first one is the colour when they're just links, the second is the colour when someone hovers over them.

If you really don't like the dropdown navigation, you can also completely remove it with this code:

#navigation { display: none; }

If you do remove the dropdown navigation completely, remember that you must still have the nine main Neo-links somewhere on your layout. The nine links are to My Account, Pet Central, Explore, Games, Boards, Shops, News, Customise and the NC Mall.

Step Six: Modules

This next bit of code edits the Neopets stat modules so that they match your layout. There are almost unlimited things that you can do to the modules, but in the effort of not exploding your brain with complicated descriptions I will just show you how to make your modules look like the ones in the example layout. The first thing you need to do is set the borders of .contentModuleTable and .contentModuleContent to zero, as well as removing their backgrounds.

.contentModuleTable, .contentModuleContent { border: 0px; background: transparent; }

Thats pretty straight-forward, just copy and paste it in! The next bit is just as easy:

.contentModule { border: NUMBERpx solid COLOUR; background-color: COLOUR; }

The NUMBER is the width of the border that you want around your modules - if you do not want a border then you can set it as zero, like the one above. In the example layout I have set it as 2px. The first COLOUR is the colour you want your border to be. I used black in the example layout. The second COLOUR is the background colour of your modules.

We're onto the last part now, the module titles! There are a lot of variables in this code, so you can edit your titles to look exactly as you want them to look :)

.contentModuleHeader, .contentModuleHeaderAlt { font: NUMBERpx STYLE; color: COLOUR; background-color: COLOUR; padding: 4px 4px 4px 4px; letter-spacing: NUMBERpx; text-align: center; }

Starting with the font attribute, NUMBER is the size you want your titles to be and STYLE is the font. Generally, one-word fonts work best - if you do want to use a font that has more than one word then you need to enclose it in 'single quotes'. The color attribute is the colour of your title's text.

The next line, background-color, is the colour of the background behind the title. In the example layout I've made it black, so it blends in with the borders. The final editable part, after letter-spacing, is the space between the letters in your title. Larger numbers mean your letters will be further apart, zero is normal spacing and negative numbers will make your letters overlap.

Step Seven: Shield

To further customise your lookup, you can also change the shield to something that matches! Be aware though, while it is Neo-legal to change your shield to something obviously false - like "forever" or "grundo fan" - you cannot change your Newbie shield to a seven-year one or vice versa. In other words, if you have an account age on the shield then it must be your true account age ;) If you don't want to change your shield, then skip this step.

The first step is to hide your current shield, which is done with this code:

#userinfo .medText img { visibility: hidden; } #userinfo .medText table table img { visibility: visible; }

Nice and simple, just copy it in!

Then the code to enter your new shield is this:

#userinfo .contentModuleContent { background: COLOUR url(SHIELD URL) top right no-repeat; }

Hopefully by now, this isn't too confusing! COLOUR is the same colour you set for the background of your modules in step six, and the SHIELD URL is the URL for your shield.

Step Eight: HTML Frame

Now we're going to create our own module, where you can enter your own text or whatever you want and have it look like it matches the true Neopets modules. This is HTML code - not CSS - so make sure you put it outside your style tags ;) Here is is:

table width="100%" cellpadding=0 cellspacing=0 border=0 class=contentModuletr valign="toptd class="contentModuleHeaderMODULE TITLE /td/trtrtd class="contentModuleContent" height="100%div align="left" style="padding:3px;WRITE YOUR TEXT HERE /div/td/tr/table

The editable bits here should hopefully be fairly self-explanatory!

Remember way back in step one, where I talked about vanishing images and bold text? Well here is where that becomes important. If you type, enter images, etc, in the part of this code where I've said you should then your bold text and images will all show up normally. Anywhere else and you'll be plagued with poofing text and images :p

Step Nine: Text Colours

Your lookup should be looking pretty much finished by now. These codes are optional, they are just a couple of extra things you can do to finish your lookup off nicely. The first thing is changing the font of all the text on your lookup. This is done with a code like this:

body, div, table, tr, td { font: NUMBERpx STYLE; color: COLOUR; }

This is very similar to the font code you used for changing the title text above. NUMBER is the size you want all the text to be; STYLE is the font style (verdana, ariel, etc); and COLOUR is the colour of your text. This code will only effect text that doesn't have other styling already applied to it - so your titles will still look different, unless you set them the same of course!

You might like to change the colours of the links, so that they match your layout.

a:link, a:visited { color: COLOUR; } a:hover { color: COLOUR; }

This code is pretty simple: the first part sets the colour of your links as they are viewed normally on the page, and the second sets the colour when people hover over them.

Step Ten: Image Borders

The last thing I do on lookups where my modules background isn't white is to set borders around the images. I just think it looks neater... if you don't want to (or if your modules have a white background), then this step isn't compulsory so go ahead and skip it.

If you do want to make borders around your images, then this is the code that creates it:

img { border: NUMBERpx STYLE COLOUR; } #header img { border: 0px; }

The NUMBER is the thickness of your border, and COLOUR is the colour - just like you've done before. STYLE is slightly different. Its the type of border you want to use. Usually I just use "solid" and be done with it. However, if you want to try one of the other types then see the CSS Margin, Padding & Border section :) The #header img part you just need to copy in - it makes sure that there are no boarders messing up your pretty navigation.

You may also like to remove the border around your pet's images, since they are often transparent anyway and its sometimes works better. Its a simple code, just copy it in!

#userneopets img { border: 0px; }

Step Eleven: Link Back

As the ugly red box at the top of this guide says, it is greatly appreciated if you include a link back to here on any user lookup you make with this tutorial. I've spent hours writing out these guides and for all you've been told how to edit the code it is still technically my design, so some credit is necessary. Here is a bit of HTML code you can copy in anywhere outside the style tags:

a href="/~Sariyra#tuts-pet" target=_blank Lookup by id_24, with help from Izzy's User Lookup Tutorial /a

Thank you ^_^

You're Done!

And thats it! Congratulations on creating your first user lookup :)

Hopefully this tutorial was simple and easy enough for you to understand, and you're happy with how your new user lookup turned out! There are hundreds of other little things you could do to a user lookup, to come up with another hundred types of user lookups. This tutorial was designed to teach those with little coding experience how to make one specific type of lookup. As you grow more confident with code, experiment on your own and see what you come up with!

========= Pet Lookup Tutorial ================

Please remember - on any pet lookups you create with the code in this tutorial, it is appreciated if you link back to this page so others know where the code is from :)

This tutorial is designed to teach you how to code a pet lookup similar to this one. I'll try to go through it as slowly and with as much detail as I can, but you will find it much easier to understand if you already have a basic knowledge of CSS - I highly recommend you read at least the Basics of CSS guide before you attempt to follow this tutorial.

CSS and style Tags

If you really don't want to read the Basics guide (there's nothing overly complicated in it, promise!) then the main thing you need to know before you try this tutorial is that all CSS codes must be contained within style tags, like this:

style CSS codes go here! /style

You only need one set of style tags, multiple CSS codes can go within them :)

Image Templates

This tutorial is designed to teach you to code a lookup in the same style as the preview. Generally, I will use code with values relating to the size of the image in the example layout - to make this easier on you, I've created an Image Template for the main image. This tells you what goes where image-wise and is the same size as the image in the example layout.


Drag to addressbar for full-size :)

The background image can be whatever size you like.

For those of you that would rather use your own sized image, I will highlight throughout the tutorial where you need to change your positioning values. However, if this is your first attempt at coding a pet lookup I strongly recommend you use a template-sized image as it will make things much easier for you!

If you are using a different sized image then you need to watch out with how wide it is, especially if you're planning on using the dropdown Neopets navigation. I recommend that you don't make your image any smaller than 750px wide, otherwise the navigation won't fit properly.

Step One: Removal

To start with you'll want to remove some of the pre-existing parts of the Neopets layout - the sidebar, footer, etc. The code is nice and easy, just remember it is CSS so it goes between your style tags!

#footer, .user, #nst, .sidebar, .brand-mamabar, #ban { display: none; }

Simple, right?

Step Two: Movement

Now on to the slightly more complicated stuff: editing the two main divs so they look as you want them to. We'll go slowly, don't worry! To start with, you will want to edit some of the properties on the #main div, with this code:

#main { width: NUMBERpx; background-color: COLOUR; border-left: NUMBERpx solid COLOUR; border-right: NUMBERpx solid COLOUR; margin-top: 0px; }

Okay, don't panic! There are a lot of editable parts to this but its really not too bad. For the first NUMBER, after the width attribute, you simply put the width (in pixels) of your image. If you're using the image template, your width is 750px so plug that in :) The next line, background-color is the colour you want your central area of the layout to be - in the example layout this is the white area. You can enter either the name of the colour you want, or a HEX code.

The final two lines (border-left and border-right) make up the code for the lines that go down the side of the layout - in the example layout, these are the two thick black lines. Generally, you'll want them to be the same so whatever NUMBER and COLOUR you use for one is the same for the other. NUMBER refers the thickness of the line, in the template I've used 4px thick lines. Smaller numbers means thinner lines; larger numbers, thicker lines. For COLOUR, it is just the colour that you want your lines to be. I find black works well most of the time, but for some layouts you may want to try a colour picked out of the image for effect.

Now we'll move on to the other div, #content. Here's the basic code you will need:

#content { width: NUMBERpx; margin-left: 3px; margin-top: -20px; }

This one isn't quite so complicated as the last one. The NUMBER after the width attribute is your image width minus two times the value you see on the next line, after margin-left. If you are using the template image then the width should therefore be 744px. You shouldn't need to change either of the two margin values, but if you do want more whitespace between the side borders and your pet's stat modules then you can increase the margin-left value - just remember if you do that you will then need to subtract more from your width value!

Step Three: Background

Now we'll move on to putting in the background image. Before you go any further, you will need to upload your images to an imagehost - Tinypic and Imageshack are two good ones that don't require registration. Each site will give you an image URL once you've uploaded the image, once you have that here's the code you will need:

body { background-color: COLOUR; background-image: url(IMAGE URL); }

This is pretty simple. The COLOUR is the main colour of your background. Once you put an image in it is usually covered, except for the time before your background image loads. Its generally a good idea to pick a colour thats close to what your background is, for continuity's sake. IMAGE URL is (fairly obviously) the URL for your background image, which you got when you uploaded it to the imagehost. If you do not want to have an image in the background, or just think that a plain colour works better with your layout, the you can delete this line of the code and the COLOUR value will be the default colour of your background.

Step Four: Image

The next step is creating the code that inserts your image into the layout. For this you will be working with a pre-existing div called #header.

#header { background: url(IMAGE URL) 0px 0px no-repeat; width: NUMBERpx; height: NUMBERpx; border: 0px; }

Again, this should be fairly simple. IMAGE URL is the image URL for your main image once you've uploaded it. The NUMBERs after width and height are the width and height of your image in pixels. For template-sized images the width is 750px and the height is 445px.

Step Five: Navigation

We will work on positioning the dropdown navigation now - this isn't particularly difficult but it does use multiple codes so we'll take it slow. The first thing you will want to do is set the width of a div called #navigation to the same width as your image.

#navigation { width: NUMBERpx; }

If you are using template-sized images then NUMBER is 750px.

The next step is to add margins to the #template_nav div, so that the navigation moves to where you want it to go.

#template_nav{ margin-left: -142px; margin-top: NUMBERpx; }

This can get quite complicated but basically you want to position your navigation relative to a point thats already 40px from the top of the page. To simplify it even more, find out how far you want your navigation from the top of the page and subtract 40 from that value and put it where the NUMBER is. If you want your navigation in the same position as it is on template image, then NUMBER should be 330px.

The final navigation-related code you will need changes the colours of the dropdowns so that they match your layout.

ul.dropdown { border: 1px solid #000000; background: COLOUR; } .dropdown li a { color: COLOUR!important; } .dropdown li a:hover { color: COLOUR!important; }

The first COLOUR is, obviously, the colour that you want your dropdowns to be :) The second two control the colour of the links themselves - the first one is the colour when they're just links, the second is the colour when someone hovers over them.

If you really don't like the dropdown navigation, you can also completely remove it with this code:

#navigation { display: none; }

If you do remove the dropdown navigation completely, remember that you must still have the nine main Neo-links somewhere on your layout. The nine links are to My Account, Pet Central, Explore, Games, Boards, Shops, News, Customise and the NC Mall.

Step Six: Modules

You're very nearly finished now! This next bit of code edits the Neopets stat modules so that they match your layout. There are almost unlimited things that you can do to the modules, but in the effort of not exploding your brain with complicated descriptions I will just show you how to make your modules look like the ones in the example layout. The first thing you need to do is set the border of .contentModuleTable zero.

.contentModuleTable { border: 0px; }

Thats pretty straight-forward, just copy and paste it in! The next bit is just as easy:

.contentModule { border: NUMBERpx solid COLOUR; }

The NUMBER is the width of the border that you want around your modules - if you do not want a border then you can set it as zero, like the one above. In the example layout I have set it as 2px. COLOUR is the colour you want your border to be.

Now, the background colour of your modules - this is done by changing the background-colour of a div called .contentModuleContent, like this:

.contentModuleContent { background-color: COLOUR; }

Easy, right?

We're onto the last part now, the module titles! There are a lot of variables in this code, so you can edit your titles to look exactly as you want them to look :)

.contentModuleHeader, .contentModuleHeaderAlt { font: NUMBERpx STYLE; color: COLOUR; background-color: COLOUR; padding: 4px 4px 4px 4px; letter-spacing: NUMBERpx; text-align: center; }

Starting with the font attribute, NUMBER is the size you want your titles to be and STYLE is the font. Generally, one-word fonts work best - if you do want to use a font that has more than one word then you need to enclose it in 'single quotes'. The color attribute is the colour of your title's text.

The next line, background-color, is the colour of the background behind the title. In the example layout I've made it black, so it blends in with the borders. The final editable part, after letter-spacing, is the space between the letters in your title. Larger numbers mean your letters will be further apart, zero is normal spacing and negative numbers will make your letters overlap.

Step Seven: Extras

Your lookup should be looking pretty much finished by now. These codes are optional, they are just a couple of extra things you can do to finish your lookup off nicely. The first thing is changing the font of all the text on your lookup. This is done with a code like this:

body, div, table, tr, td { font: NUMBERpx STYLE; color: COLOUR; }

This is identical to the font code you used for changing the title text above. NUMBER is the size you want all the text to be; STYLE is the font style (verdana, ariel, etc); and COLOUR is the colour of your text. This code will only effect text that doesn't have other styling already applied to it - so your titles will still look different, unless you set them the same of course!

The final thing that you might like to do is to change the colours of the links, so that they match your layout.

a:link, a:visited { color: COLOUR; } a:hover { color: COLOUR; }

This code is pretty simple: the first part sets the colour of your links as they are normally, and the second sets the colour when people hover over them.

Step Eight: Link Back

As the ugly red box at the top of this guide says, it is greatly appreciated if you include a link back to here on any pet lookup you make with this tutorial. I've spent hours writing out these guides and for all you've been told how to edit the code it is still technically my design, so some credit is necessary. Here is a bit of HTML code you can copy in anywhere outside the style tags:

a href="/~Sariyra#tuts-pet" target=_blank Lookup by id_24, with help from Izzy's Pet Lookup Tutorial /a

Thank you ^_^

You're Done!

And thats it! Congratulations on creating your first pet lookup :) If you want to write a bit about your pet - a description, goals, or anything - you can do that after your /style end tag.

Hopefully this tutorial was simple and easy enough for you to understand, and you're happy with how your new pet lookup turned out! There are hundreds of other little things you could do to a pet lookup, to come up with another hundred types of pet lookups. This tutorial was designed to teach those with little coding experience how to make one specific type of lookup. As you grow more confident with code, experiment on your own and see what you come up with!

========= Gallery Layout Tutorial ================

Please remember - on any gallery layouts you create with the code in this tutorial, it is appreciated if you link back to this page so others know where the code is from :)

After following this tutorial, you should hopefully be able to code a gallery layout that looks something like this one. This tutorial can get quite complex if you have no prior knowledge of HTML or CSS - I highly recommend you read at least the Basics of CSS guide before you begin with this tutorial.

CSS and style Tags

For those that don't want to read the Basics guide, then the major thing you need to understand about CSS is that all your CSS codes should be contained within style tags, like this:

style CSS codes go here! /style

You only need one set of style tags, multiple CSS codes can go within them :)

Image Templates

This tutorial is designed to teach you to code a layout in the same style as the preview. To this end, I will use code with values relating to the size of the image in the example layout. I've created an Image Template for the main image, to tell you what goes where image-wise and is the same size as the image in the example layout. Using the template to create your image should make it simpler for you to follow the first time through.


Drag to addressbar for full-size :)

The background image can be whatever size you like.

For those of you that would rather use your own sized image, I will highlight throughout the tutorial where you need to change your positioning values. However, if this is your first attempt at coding a shop or gallery layout I strongly recommend you use a template-sized image as it will make things much easier for you!

If you are using a different sized image then you need to watch out with how wide it is, especially if you're planning on using the dropdown Neopets navigation. I recommend that you don't make your image any smaller than 750px wide, otherwise the navigation won't fit properly.

Step One: Removal

The first thing you'll want to do is remove some of the pre-existing NeoModules - the sidebar, footer, etc. This code looks a bit long, but thats just because of all the divs needed to remove the ads. Just copy it in and you'll be fine :)

#footer, .sidebar, .user, #nst, #ban, #ban_bottom, .ad_wrapper_fixed, hr, .brand-mamabar { display:none; }

Step Two: Movement

Now we're going to move on to the adjustments to the two main divs. Firstly, the #main div!

#main { width: NUMBERpx; background-color: COLOUR; border-left: NUMBERpx solid COLOUR; border-right: NUMBERpx solid COLOUR; margin-top: 0px; }

Starting from the top, the NUMBER after width is how wide you want your layout to be - generally, I use my image's width plus 20px (we'll get to where that 20 comes from later). For template-sized images, thats 800px so you can put that in! The next line, background-color is the colour you want your central area of the layout to be - in the example layout this is the white area. You can enter either the name of the colour you want, or a HEX code.

The last two lines, border-left and border-right, make up the code for the lines that go down the side of the layout - in the example layout, these are the two thin black lines. Generally, you'll want them to be the same so whatever NUMBER and COLOUR you use for one is the same for the other. NUMBER refers the thickness of the line, in the template I've used 1px thin lines. Smaller numbers means thinner lines; larger numbers, thicker lines. For COLOUR, it is just the colour that you want your lines to be. I find black works well most of the time, but for some layouts you may want to try a colour picked out of the image for effect.

Moving on, the other div we want to deal with is the #content one.

#content { width: NUMBERpx; margin-left: NUMBERpx; margin-top: NUMBERpx; border: 0px; background: transparent; }

We'll start with width, since thats the easiest to explain - its just the width of your image. If you are using template-sized images, then you can put 780px in there :) The two margin-left and margin-top are a bit more complicated. Firstly, margin-left. This adds a small amount of blankspace to the left of your shop or gallery text, sort of like padding. Basically it just makes it look prettier and less cramped. The value I usually use for it is 6px, you can play around to find a value you like. Higher values are more space, lower is less.

Next, margin-top. This is the padding or space between your image and the first bit of text. In the example layout, I've got this set to 0px, which might sound odd - why put it in at all? - but I usually add the line even when its set to 0px as a reminder to myself. The biggest use for this line of code is that you can set it to a negative value, and make the text overlap the image. Using it, you can create more complicated layouts that interact images and text! I will leave that for you to play around with later though, if you are using template images then just set it to 0px and you'll be fine.

Step Three: Background

For this step, you will need to upload your images to an imagehost - Tinypic and Imageshack are two good ones that don't require registration. Each site will give you an image URL once you've uploaded the image, once you have that here's the code you will need:

body { background: COLOUR url(IMAGE URL); }

Easy enough :D The COLOUR is the main colour of your background. Once you put an image in it is usually covered, except for the time before your background image loads. Usually, you will pick a colour thats close to what your background is, for continuity's sake. Obviously, IMAGE URL is the URL for your background image, which you got when you uploaded it to the imagehost. If you do not want to have an image in the background, or just think that a plain colour works better with your layout, the you can delete this bit of the code and the COLOUR value will be the default colour of your background.

Step Four: Image

We'll create the code that inserts your image into the layout now, working with a pre-existing div called #header.

#header { background: url(IMAGE URL) NUMBERpx NUMBERpx no-repeat; width: NUMBERpx; height: NUMBERpx; border: 0px; }

Don't panic if this looks complicated to you. We'll go slow! First, the IMAGE URL is the URL you got when you uploaded your main image. The two numbers after that are the distance from the left and top respectively. I always set both of these to 10px - remember back when we were talking about the width on the #main div and I said about adding 20px to your image's width? Well, this is where that comes from: its twice the value you put in for the "left" one (so you have the same space on each side of the image). If you use anything other than 10px for this, make sure you go back and edit your #main width to image width plus twice the value you entered!

The last two NUMBERs are much simpler. The width is the same as the #main width, so for template images with a 10px "left" value put 800px. Height is just your image's height plus the second number you entered after the background attribute. For template images using the 10px I recommended above, this value should be 380px.

Step Five: Navigation

We will work on positioning the dropdown navigation now :) To begin with, set the width on the #navigation div to the width of the shaded area you made for the navigation on your image.

#navigation { width: NUMBERpx; }

If you are using template-positioned images then NUMBER is 750px.

The next step is to add margins to the #template_nav div, so that the navigation moves to where you want it to go.

#template_nav{ margin-left: -125px; margin-top: NUMBERpx; }

This can get quite complicated but basically you want to position your navigation relative to a point thats already 40px from the top of the page. To work it out, you need to find out how far your navigation should be from the top of your image, add the top margin you created in step four and then subtract 40 from it. If you put your navigation in the same position as it is on template image and you've used 10px as above, then NUMBER should be 285px.

You can also adjust the spacing between the images if you think the would look better more evenly spaced across the image.

#navigation img { margin-right: NUMBERpx; }

The NUMBER is the extra space between the image links. A value of zero will leave them as they were, positive numbers add more space between and negative numbers make less space. For the example layout, I had a spacing of 1px set here.

The final navigation-related code you might want to use changes the colours of the dropdowns so that they match your layout.

ul.dropdown { border: 1px solid #000000; background: COLOUR; } .dropdown li a { color: COLOUR!important; } .dropdown li a:hover { color: COLOUR!important; }

The first COLOUR is the colour that you want the background of your dropdowns to be dropdowns to be :) The second two control the colour of the links themselves - the first one is the colour when they're just links, the second is the colour when someone hovers over them.

If you really don't like the dropdown navigation, you can also completely remove it with this code:

#navigation { display: none; }

If you do remove the dropdown navigation completely, remember that you must still have the nine main Neo-links somewhere on your layout. The nine links are to My Account, Pet Central, Explore, Games, Boards, Shops, News, Customise and the NC Mall.

Step Six: Finishing Touches

Nearly done now! You're onto the optional codes, so the layout itself should be looking pretty much done. These last few bits just add a little something to the layout. We'll start with changing the colour, size and font of your text.

body, div, table, tr, td { font: NUMBERpx FONT; color: COLOUR; }

The NUMBER is the size of the font - the sizes work the same as the sizes in editing programs like Word and Notepad. FONT is the name of a font you like, you can see lists of installed fonts in a Word/Notepad/etc or see the notes on selecting fonts here. As you've probably guessed, COLOUR is the colour you want your text to be.

You can edit your the colours of your links too, so they match your layout.

a:link, a:visited { color: COLOUR; } a:hover { color: COLOUR; }

Easy enough, right? The first COLOUR is the colour of your links normally, and the second is the colour when people hover over them.

And finally, you will notice that around your items for sale, there is a thin black border. When I make a layout with a white background - like the example layout - I usually add this final line of code in to remove that border. Looks neater :P

img { border: 0px; }

Step Seven: Link Back

As the ugly red box at the top of this guide says, it is greatly appreciated if you include a link back to here on any shop or gallery layout you make with this tutorial. I've spent hours writing out these guides and for all you've been told how to edit the code it is still technically my design, so some credit is necessary. Here is a bit of HTML code you can copy in anywhere outside the style tags:

a href="/~Sariyra#tuts-gall" target=_blank Layout by id_24, with help from Izzy's Gallery Layout Tutorial /a

Thank you ^_^

And You're Done!

Thats pretty much it :D Hopefully this tutorial was easy enough for you to follow! If you want to add any text or description to your layout, you can do that anywhere outside the style tags.

Hopefully this tutorial was simple and easy enough for you to understand, and you're happy with how your new shop or gallery layout turned out! There are many other things you can do to a layout, to come up with a hundred different designs. This tutorial was designed to teach those with little coding experience how to make one specific type of layout. As you grow more confident with code, experiment on your own and see what you come up with!

========= Guild Layout Tutorial ================

Coming soon.

========= Petpage Layout Tutorial ================

Coming soon.

========= Blog Tutorial ================

Please remember - on any blogs you create with the code in this tutorial, it is appreciated if you link back to this page so others know where the code is from :)

In this tutorial, you will learn how to code a blog using divs. This is probably the easiest of the specific tutorials, but you will still find it much easier to follow if you have a basic knowledge of HTML, and of how codes are organised CSS. After you've read through this tutorial, you should be able to code a blog that looks like this!

Text and stuff goes here :)




And look its more text!




And more... *gasp*

CSS and style Tags

For those of you who are unsure about CSS, the most important thing that you'll need to know is that all CSS codes go inbetween your style tags, like this:

style CSS codes go here! /style

You only need one set of style tags, multiple CSS codes can go within them :D

Step One: The Image

The first thing you need to do is upload your blog's image to an imagehost - Tinypic and Imageshack are two good ones. Once you've uploaded your image, you will get a URL for your image which you'll need to plug it into this CSS code.

#BLOGNAME_con { background-image: url(IMAGE URL); width: NUMBERpx; height: NUMBERpx; text-align: left; }

We'll start from the beginning here. BLOGNAME is what you want to call your blog - generally, each blog should have a different name so your code is specific to that particular blog. I usually use whatever the blog is about as the name but what you call each one is up to you so long as you keep the same name for each part of the blog. The next red part, IMAGE URL, is the URL you got for your image when you uploaded it.

Width and height are the width and height of your image (in pixels), so plug them in to the correct positions.

Step Two: Text Box

Now you'll want to set up the positioning for the box where you'll write your text. This can get quite complicated so I'll try to go slow. First, the code looks something like this:

#BLOGNAME_txt { overflow:auto; left: NUMBERpx; top: NUMBERpx; width: NUMBERpx; height: NUMBERpx; scrollbar-base-color: COLOUR; }

Starting with the easy parts, BLOGNAME is hopefully obvious, its the same as the name you gave your blog above. Jumping to the last line for a moment here, COLOUR sets the colour of your scrollbar. Scrollbars only work in Internet Explorer so I often don't bother with them - since I generally don't use IE. However, for those that want do it is sometimes nice to pick a colour (either named or a HEX code) from your image and place it into this code. Because it is a base colour, it changes all the various properties of the scrollbar to shades of your chosen colour. There is code to change each aspect's colour individually but it is beyond the scope of this tutorial.

From here, you need to find the pixel values for your text box's position. There are a couple of ways to do this depending on which graphics program you have to use.

If you are using Microsoft Paint, you can find the values you need simply enough: use the Select tool to select the area where you want the text box to be. Right before you release the mouse, you'll see something like this:

If you look at the bottom right of the program window, you will see some values - these correspond to the parts of the code as marked in the screenie!

For those with Adobe Photoshop, finding the correct values is pretty easy. First, make sure you have the Info palette open (Window Info). If your palette is not displaying values in pixels, you can right click on the crosshair icon to change it :) Once you've got that sorted, use the Rectangular Marquee Tool and select the area over where you want the text box to be. You'll see something like this:

If you look at the values right before you release the marquee, then the values correspond to the parts of the code as marked in the screenie!

Step Three: Padding

This step is semi-optional. From my point of view, blogs look much better with a bit of padding between the scrollbar and the text but it won't matter if you leave this step out - you blog will still work like a blog should! Anyways, for those that wish to indulge my obsession with padding, this is the code you'll need:

#BLOGNAME_pad { padding: NUMBERpx NUMBERpx NUMBERpx NUMBERpx; }

Its pretty straight-forward. Again, BLOGNAME is the name you've given your blog. The NUMBERS are the pixels of padding you want around your text. I generally leave them all the same, somewhere between 2px and 6px depending on the size of my text box. In the example blog above, the numbers are all set to 3px.

Step Four: The Frame

You're on the final step now! Here we're setting up the HTML frame for the blog. Since this is HTML and not CSS, remember it goes outside your style tags. Here is the basic code:

div id=BLOGNAME_condiv id=BLOGNAME_txt style="position:relative" div id=BLOGNAME_pad Text and stuff goes here :) /div/div/div

As before, the three BLOGNAMEs are replaced with your blog's name!

Step Five: Link Back

As the ugly red box at the top of this guide says, it is greatly appreciated if you include a link back to here on any blog you make with this tutorial. I've spent hours writing out these guides and for all you've been told how to edit the code it is still technically my design, so some credit is necessary. Here is a bit of HTML code you can copy in where you enter your blog-text:

a href="/~Sariyra#tuts-blog" target=_blank Blog by id_24, with help from Izzy's Blog Tutorial /a

Thank you ^_^

Thats it!

And you're done :D Congrats on coding your first blog! I hope this tutorial was easy enough for you to follow :)


Layout and content by Izzy. Theft of any part will not be tolerated.
Some images copyright 2010 Neopets Inc. Used with permission.



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions