/>

On This Page

Al's HTML/CSS

Howdy, guest. Looks like you've stumbled across my petpage. That probably means you had a question for Alatyr about the fancy-schmancy petpages she makes on her accounts. And, as usual, she's too lazy to answer every neoMail she gets and just has to show off some more, so she worked her hackneyed coding skills on my page to show you what she's done.

Al finally caught on that a lot of people are visiting my page. (Probably hoping to find a guide up to Cryon's standard. Sorry, but no.) So she's finally going to update it and make it semi-presentable.

Now, we're still not going to start at the beginning. We're going to assume that you already know some basic HTML. For example, you can make new words show up on a petpage or lookup. So we're going to look at what Al has done on her petpages and how you can use that on your own.

Also, we're not actually going to go step-by-step through how to actually type in the HTML/CSS commands. We'll show you lots of examples, though. You should be able to find the conventions (like semicolons, quotation marks, braces, etc.). If not, Al might add a section on that. But later.

The Neopets HTML Guide

A lot of people knock Neopets' own HTML guide. But it's a pretty good guide. So don't ignore it or assume it's not good. It doesn't cover some of the (ugly, obnoxious) things that people want to learn, so they figure it's not useful.

Al will try to remember to link in to the right page on that guide for some stuff. Read it. You might learn something.

Warnings and Disclaimers

Al is making an attempt to present a useful HTML/CSS Help page. However, she's still learning. And what she knows, she taught herself, so it isn't always pretty. I give you fair warning.

If you google for "HTML Tutorial" or "CSS Tutorial", you'll find lots of very well-written guides by people who really do understand this stuff.

Even better, type your specific question into your search engine. You'll probably find a guide or forum topic that can answer it directly.

Now, Al has gotten everything on this page to work. Note that she does use Firefox on a widescreen PC, and even though she knows she should test everything in several browsers and monitor sizes and on a Mac, she usually doesn't.

That said, if something doesn't work, she really can't help. A lot of Al's code has degenerated from the well-organized mess she usually likes, so something may work entirely on accident. We don't know. And she's too busy making new pages to stop and look.

Also, there's a lot missing. We know. And there's a lot of things that Al admits she doesn't know. Again, we know. We're working on it. Please be patient with us. Thanks!
~Pat and Al

Links to Real Help

On This Page

HTML vs CSS

First of all, HTML and CSS are not two different languages. CSS is merely a different way to arrange HTML. The commands are the same, though the placement may be a little different. CSS introduces some extra ways to do things that HTML can't quite handle, but it is still based on everything HTML. If you know HTML, CSS is not crazy to figure out.

You need to know or learn HTML in order to write with CSS. But you don't need to know CSS in order to write HTML. Using CSS lets you write a "Style Sheet" (more on that in a minute). That Style Sheet then controls the way your HTML code is rendered.

Anyone who tries to tell you that CSS is "completely different" obviously has no idea what they're talking about. Ignore them, and don't take any coding advice from them.

Second (and this is only second because it bothers me so much when I see it), you do not "code" images. You host images on a hosting site, and they give you the URL to your image. There is no "coding" beyond the "img src" tag.

Third, all browsers are not the same. Some browsers are "nicer" than others when you mess up your coding, and they will render the page correctly anyway. Others aren't, however, which is why you should learn proper conventions.

(And having said that, no, Al doesn't always follow proper conventions. She taught herself off of webpages, for goodness' sake. But still, you should learn them....)

Some good conventions to use are:

  • Use quotation marks (") around attributes that follow equals signs (=)
  • Be sure to use the correct closing tag with the opening tag

As I think of more notes, I'll put them up here...

On This Page

Style Sheet

The first, and most major, part of Al's design is her Style Sheet. Once you get the Style Sheet right, the rest of the page is easy(er).

The Style Sheet lists the colors, faces, and sizes for each of the main HTML elements (background, font, tables, etc.). This Style Sheet is the basic concept behind CSS. Instead of having to enter the changes you want every time you use a certain element, you enter it all once and the effects are applied to the entire page. (If you understand styles and formats in most word processing programs, you already understand CSS.)

All web browsers have their own built-in Style Sheet. If you're used to plain HTML, you know you can use a Level 1 Heading (H1) and you get a certain size, font, and weight to the text. Using CSS, however, you can overwrite parts of the built-in Style Sheet. (They're usually boring, anyway.)

Most web browsers support CSS, though some don't support all the different tags. So what looks great in Internet Explorer might look a bit off in Firefox or Netscape. If I were you, I would figure out which one gives me more trouble (that's Firefox/Netscape for us) and which is more forgiving (IE), then code using the troublesome browser.

I put in a Style Sheet, but my page is blank! Help!

That's completely normal. A Style Sheet tells your browser what things will look like. But it doesn't add those things to your page! You still have to write your webpage the way you normally would.

The advantage of Style Sheets is that you don't have to remember what color your links are (or font or tables or whatever). The Style Sheet automatically makes them the color you picked earlier. And if you want to change the color, you don't have to find every single link you made. Instead, you find it one time and change it there. Your page will update to the new color.

Style

Put these at the beginning and the end of your Style Sheet. They clue the browser in that you're writing a CSS stylesheet; otherwise, nothing will work right. Your entire Style Sheet will be written in between these two sets of tags:




I keep trying to write something in there like "Your Style Sheet Here." But the deranged code Myncis don't like that idea and yell at me. So, sorry.

Note the space and second backslash in the closing style tag. the The new filters that block margin, position, etc. can be fixed by adding those. See this petpage for more info. These attributes are crucial for Al's petpages.

Reference

Here is a list of the most common style sheet elements (at least as far as Al is concerned). A lot of style sheet parts (heading, font, links, tables, etc.) use the same commands to get things done, so we're going to list them all up here. In each of the specific sections, we'll list the element name. For a full explanation, you can look back up here.

Fonts
  • color. Obviously, changes the color. Default is black.
  • font-family. This is the font you want. It's a good idea to make a list of more than one. That way, if someone's browser doesn't have your "special" font, the browser will pick something else that you set. Otherwise, they get Times New Roman :(. (More on these in the Font section.)
  • font-size. Obviously, your font size. You can set your font in "em", in "pt", or in "px":
    • em. 1 em is the width of the capital letter "M" in your font. This is the best size unit to use because it scales best to different size monitors. 1 em is slightly larger than 12 pt font.
    • pt. Points. This is what your word processing programs use. Use this if you want to be rude and force your readers to one size of font, no matter their monitor size. Points scale poorly.
    • px. Pixels. Pixels don't scale too well, either.
  • font-style. Write "italic" after this tag to specify italic font.
  • font-weight. Is the font bold or light? You can also specify "degrees" of boldness or lightness: lightest, lighter, light, bold, bolder, boldest.
  • text-align. Where your text should line up horizontally. Centering is alright for headings, but most font should be left aligned. It's easier on everyone's eyes.
  • text-decoration:
    • Underline
    • Italic (again? Yes, again)
    • Line-through
    • none
  • vertical-align. Where your text lines up vertically:
    • top
    • bottom
    • center
    • sup - superscript up here
    • sub - subscript down here
  • line-height. How far apart your lines are. Al thinks most fonts/paragraphs are set too close, so she moves them further apart. It helps you to read easier.
Lists

There are two types of lists, UL (unordered lists; they use symbols in front of each item) and OL (ordered list; they use letters or numbers in front of each item). They both use the same style tags, though:

  • list-style-type. What the symbol in front of your list looks like. Unordered lists (ul):
    • circle. A circle.
    • disc. A filled-in circle.
    • square. A square...
    • none. No symbol at all.
    Ordered (numbered) lists (ol):
    • decimal. 1, 2, 3, ...
    • lower-alpha. Lowercase alphabet.
    • upper-alpha. Uppercase alphabet.
    • lower-roman. Lowercase roman numerals.
    • upper-roman. Uppercase roman numerals.
Borders

A note on borders: borders are actually four small boxes on the four sides of your bordered element. Most border commands affect all four sides at one time by default, but you can use all of the following commands and specify which side gets the treatment. Just add "-top", "-bottom", "-right", and "-left" after "border" in all the following commands (e.g., "border-top" or "border-right-width").

One more note on border language: all four borders can be affected differently by a command by giving that one line four different attributes. Borders are affected in this order: top, right, bottom, left (clockwise). So a call like "border-color: red blue green orange" sets the top color to red, right to blue, bottom to green, and left to orange.

  • border. By itself, it can set all the properties for the border. An example is: "border: thin dotted green;". That sets the border to size "thin", style "dotted", and color "green".
  • border-color. Color of border.
  • border-style. Types of border:
    • dashed
    • dotted
    • double
    • grooved
    • inset
    • outset
    • ridge
    • solid
    • none
  • border-width. How wide your border is. Default is 1px. Can be set with pixels (px) or "thin", "medium", and "thick".
Positions
  • height and width. How high and how wide your element is.
  • margin. How far from the specified margin something should be. "Margin" by itself will set all four margin directions, which can also be set on their own:
    • margin-right
    • margin-left
    • margin-top
    • margin-bottom
  • padding. How much space is between a border/edge and the font inside. As with "Margin", this can also be specified by -top, -bottom, -right, and -left.

On This Page

Examples

So, seeing all those names doesn't tell you a thing about how to use them. Down in this section, I'll give examples of how each of those elements can be combined in the style sheet. (We're still up in our Style Sheet. Keep that in mind.)

Links

Everyone wants fancy links. So here goes. First, the different types of links:

  • link. Any link that you write, in its default state, will look like this.
  • visited. Any link that a reader has already been to will look like this.
  • active. Any link that a reader has open while viewing your page will look like this.
  • hover. Any link that a cursor is on top of will look like this.

Playing with link colors and styles can be fun. Just don't go overboard and make them obnoxious. No one likes an obnoxious link.

Don't be too understated, either. That is, don't make your links blend in too well to your text. If no one can see them, no one can use them!

These examples will change your link colors. We did different colors so you can see the differences on an actual webpage.




The "color" tag, obviously, is the color of the link. You can google for a complete HTML color chart to get the six-digit numbers, or you can use basic names (like "red" and "blue").

The "text-decoration" tag lets you add something to the line. Usually, you're suppose to underline links. Al doesn't like to, so she just makes them a different color.

The "cursor" tag changes the cursor when it's over the link. That's one more clue that your reader has found a link.

How do I make a link on the same page?

A link on the same page is called a page anchor. Or at least that's what I call it; it has other names. Al wrote about those down in the Fun Stuff section. (Click the page anchor to go there! Aren't we funny?)

Headings

There are elements called "headings." They start at H1. Only define the ones you'll need. The others, since they're never called on your page, won't be used and so don't matter.

These are actually the five headings I used on this page.

Notice some of the fun things we've put in there: small caps, background colors, and borders. This gives what would normally be a very plain heading a lot more personality.

Also notice that there are multiple style elements on the same line. This is perfectly fine, as long as each unique element ends with a semicolon (;).

Font

This is the fun part--you can choose a look for your fonts, define it all once, and then just use the new element whenever you want that effect. And the best part is that you can define more than one basic font style! Sneaky, huh? All you have to do is give each font style a unique name. Simple.

To make more than one paragraph style, use a "." to denote a new class. Then write the new class name after it.

(A side note: just because you define this to use for a font doesn't mean your browser knows that. If you wanted, you can use this class for a completely different element. But that's even beyond what Al can figure out how to do well...)

Okay, so Al's not too original with naming elements (at least she's more original with naming pets). "p" is the basic font, what I'm using right now. "pstyle2" and "pstyle3" are two alternate fonts that could be used somewhere else. You can name them whatever you like (like "fred" or "pinkfont"--whatever. Try to make it something you can remember, though).

Tell me about fonts!

Right, right, I said I would, didn't I?

The two fonts that were designed to be used on the web are Georgia and Verdana. We're using Verdana now. Whenever possible, use these as your default fonts.

The second most common/best fonts to use are Times (or Times New Roman) and Arial. These were designed for print, but they work rather well on the web.

The default font for all browsers is Times. If you don't specify a font family for a text element, all browsers will render it as Times. (Which is rather silly--Georgia should be the default!)

One more thing: serif vs sans-serif. Serifs are those little extra squiggles on the edges of fonts like Georgia and Times. Some people think serif fonts are easier to read. Sans-serif fonts, like Verdana and Arial have "clean" edges. Some people find sans-serif fonts easier to read. (P.S. sans means "without." So sans-serif is "without serifs".)

Pick whichever you like better. Then use the other for headings or highlighting. That offers a nice contrast.

If you look back up at our font examples, we wrote "papyrus, georgia, times, serif". That tells the browser to first use "Papyrus" font if it can. If it doesn't have that, use "Georgia". If it doesn't have that, use "Times". If (for some bizarre reason) it doesn't have that, use the first serif font it has. Use "sans-serif" at the end of a sans-serif font list.

Text Areas

You can even define how your text areas look. The text areas, in case you're lost, are the boxes that all this code I'm giving you is going in to (otherwise, web browsers would try to implement that code, and we'd just have one big mess). You can put anything you want in a text area.

If you want someone to be able to copy code, you have to put it in these boxes.



Now, for Neopets, you have to define it as "textarea" in your style sheet. But when you actually want to put in a text area, you have to use "text area", with an underscore "_" between the words. (Why? Probably because the box you enter your text in for a petpage is a text box itself!)

Images

Want to lose the white box that accompanies all of your images? This doesn't work on all browsers, but I add it anyway.

Lists

You can even change how an ordered list looks on your page, including which bullets are used, what color it is, and where it's aligned. And just like fonts, you can define more than one style, so long as they have different names. Again, someone isn't too brilliant with names...


Check out that last entry: it actually affects each line item (LI) in your lists, no matter what type of list it's used in.

Tables

Yep, even tables can be tweaked. Instead of laboriously redefining a table and its components every time you want to us it, do it once and be done with it. Again, just like with fonts, you can define more than one style to use with tables.

Notice that we can also define styles for our rows (TR) and our cells (TD).

Some explanation of what you can use in Tables:

  • font-family. Same as for Headings and font.
  • font-size. Same as Headings and font.
  • color. Color of text.
  • background-color. Color of cell background.
  • cellpadding and cellspacing. How far apart cells are from each other.
  • text-align. Left, center, right.
  • vertical-align. Top, center, bottom.
  • overflow. .
  • border-style. Types of border. (dashed, dotted, double, grooved, inset, outset, ridge, solid, none)
  • border-color. Color of border. You can even have 2-4 colors.
  • border-width. How wide your border is. Default is 1px. Can be set with pixels (px) or "thin", "medium", and "thick".
  • height and width. How high and how wide.
  • margin. How far from the margins the table is.
  • padding. How much space is between the border and the font inside.

Body

We're finally to backgrounds and colors, the basic look of the page. Ours is pretty basic because we're going to be putting "div" layers with text over it.



  • background. Color or image.
  • margin. How far from the side of the page.
  • padding. How much space is between the edge and the font inside.

Div Layers

Div layers are flexible containers that hold anything you want them to. They're great for dividing up a page and are easier to work with than frames or tables. Al uses div layers a lot.

Each div layer needs its own name, and each one can have whatever style or position you want. Div layers can go inside each other or inside tables. You can even customize scrollbars for each div layer.

These are the div layers used on this page:

The "container" style is used to wrap up the table that we use. The "main" div layer style is used after every major heading to hold our text.

  • background. Color or image.
  • position. .
  • overflow. .
  • top. (Also, bottom, right, and left). How far from that side of the page the div layer appears.
  • height and width. Height and width.
  • padding. How much space is between the edge and the font inside.
  • scrollbar-face-color. The top visible color.
  • scrollbar-darkshadow-color. One of the shadows.
  • scrollbar-shadow-color. The other shadow.
  • scrollbar-arrow-color. The color of the arrows at the top and bottom of the track.
  • scrollbar-highlight-color. The highlight color.
  • scrollbar-3dlight-color. More highlights.
  • scrollbar-track-color. Color of the background where the track slides.

Okay, so that part on scrollbars is not very helpful because it doesn't tell you which parts of the scrollbar are shadows or highlights. But the way to find out is to play with the colors there and see what changes. Note that scrollbar colors aren't visible in all browsers, either.

On This Page

How to Use

Once you've got the Style Sheet defined, you're well on your way. All you have to do now is to do your normal HTML coding and the Style Sheet will be applied to everything you do. Just for kicks, here's the basic outline for this page and some of the applications for that Style Sheet.

A Note About Text Areas: In order to use text areas, you have to take the words "text area" and add an underscore ("_") between them. I cannot show you how to do this because every time I do, the Neopets compiler tries to insert a text area. Grr. Don't forget to close your tags...

Class vs Id: If you use a "." before an element's name, then use "class" when you want to use that specific version. If you use a "# before the element's name, then use "id" when you want that version. There's probably a difference between the two, but Al hasn't looked that up yet. I told you she knows far less than you think.

On This Page

Fun Stuff

Page Anchors

You've probably noticed that on all these pages, the page scrolls when you click on a topic in the left column. This device is called a "page anchor," and it basically creates a link on the same page. Sneaky.

First, you create a link tag where you want people to click just like normal ("a href="). But instead of putting in a URL, you just add #Title, where "Title" is the name of the section you want to jump to. The "# symbol tells the browser to stay on the same page and look for an "a name" tag with the same "Title.

Now in your regular page coding, skip down to where you want the browser to move to and give this the a name= tag, using the same "Title" as the link. Notice: no "#. When the link is clicked, the browser jumps to the new target.

One note: we find it helps to write the "a name=" and "/a" tags without any text in between. Otherwise, the browsers get funny about what's a link. It's probably something Al doesn't do right. Anyway, we put the "a name" tags inside the element (such as H3) that it targets. So it looks like this:

My link works in some browsers but not others. Why?

Check your "a name" tag. If you use a "# here, most browsers won't recognize it and will just sit there. "#Title" and "Title" are not the same to them. IE, however, isn't too bright and thinks they are the same...

My "a name" tag is correct, but my link still doesn't work! Help?

Check your capitalization. Most browsers don't think that "#Title" and "title" are the same thing, either.

Marquees

A marquee is scrolling text. You can make it go any direction you like.

This is a basic right-to-left scrolling marquee. Whee.

Before you get carried away: Marquees are often abused. Use them sparingly. Use them well. Too many things that move give people headaches, especially when they're trying to read the moving target.

We're showing the HTML tags that you would enter at each instance of a marquee. Two reasons: 1) Al doesn't know the CSS and doesn't want to look it up and 2) maybe you won't use it as much.


So the basic parts of a marquee are:

  • marquee. Obviously, this tells your browser you're making a marquee.
  • behavior. There are 3 options for this:
    • Scroll. As in our example, the text goes from one side to the other and starts over again.
    • Alternate. This makes the sides of your browser (or table or whatever) act like "bumpers". The text bounces between them.
    • Slide. In this version, your words go across the screen once. They stop wherever you told them to.
  • direction. You can set direction for "Scroll" and "Slide" behaviors. Use these words:
    • Left
    • Right
    • Up
    • Down
  • bgcolor. Add a color code after the # to change the background color of your marquee.
  • width. Also "height". Set how wide or how tall the "box" for your marquee is. This can be set in percentages, too.
  • scrollamount. This is how fast the marquee moves. Our example above is at speed 5 (the default). Higher numbers go faster.

If you want to change the font of your marquee, add your font tag (either "p" or "font") around your text.

I can't believe Al actually gave you that information. Remind her that it's all her fault if she starts complaining about annoying marquees, 'k?

Scrollbars

Most browsers won't let you override their scrollbars. But there's always IE...:

  • scrollbar-face-color. The top, most visible color.
  • scrollbar-shadow-color. The main shadow color.
  • scrollbar-darkshadow-color. The secondary shadow color.
  • scrollbar-arrow-color. The color of the up/down arrows.
  • scrollbar-highlight-color. Main highlight color.
  • scrollbar-3dlight-color. Secondary highlight color.
  • scrollbar-track-color. The track that the bar moves on.

On This Page

FAQ

Can I copy your layout?

Yes, you can. (I might be the only petpage maker out there to tell you that, too.) There's nothing unique about tables, div layers, and colors.

So what can't I copy?

You can't steal my words, that is, the text on this page.

You can't steal anyone's images. If someone does have proprietary code (that is, they actually own all rights to the code), then you can't use it.

I put in the Style Sheet, and nothing happened!

A Style Sheet only tells your browser what the page will look like when it's done. It doesn't actually make a page for you.

I put in everything just like you said, but it looks weird!

I did say that I didn't guarantee any of this. Everything on this page is optimized for my pages on my monitors and my browsers. That unique combination probably produces some randomness. That means, of course, that your monitor/browser combination (along with any preferences you have set there) may create a different reaction on your pages. Try adjusting the sizes and positioning of different things, playing with your preferences, or adding/subtracting elements in your Style Sheet.

On This Page

The End

There, now you know everything Al does. Not too helpful in the long run, is it? But you insisted, so we told you.

Remember, this is just here for your information; we're not trying to teach you how to make a pet's page, just showing you how we did it. You can't complain about the service here, because there isn't any.

Anyway, why are you still hanging around here? Go start butchering--erm, designing--your pet's page...

Pat's Notes for Al

  • Stop zapping me with the lab ray--as soon as I'm something cool again.
  • Look up all that stuff you said you didn't know.
  • Write an FAQ section. Include the question "Can I copy your Layout?" Answer = "Yes".
  • Write a properties section that lists all the most used tags (font-family, etc.). Condense all the excess uses into that section.
  • Buy bananas to distract the deranged Myncis. Or get a better lock so they can't get in.
  • And buy more food while you're at it.
  • And some air freshener--my roommate is a clove of garlic!
  • Include scrollbars with "Fun Stuff".
  • Find more "Fun Stuff". Make sure you can live with the consequences first.
  • Find more links to real help.
  • Find more "good conventions". And start using them.

Update Record

Last Updated: 11 November 2008




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