Welcome

...to (what I hope) is an easy-to-understand beginner's HTML/CSS guide, made by yours truly (seegensays, in case you didn't know).

Before we get started, there are some things you have to know. Firstly, I love to talk (or type, as the case may be) - I think it's because I also love to write, and to make my writing long and descriptive. If you've got a lot of time on your hands, feel free to wade through the writing on the page; if you don't, skimming should work just fine (but there'll be more of a chance for you to miss something important if you do so).

Secondly, this page isn't just a collection of codes you can copy and paste. Although there will be plenty of codes, my goal is really to teach you HTML/CSS, so that you know what you're doing. The codes are really just there for reinforcement. You'll get much better results if you read (or skim) as well as hitting Ctrl+C.

Lastly, concerning credit: I do NOT require you to credit this guide if you use it. The point of this guide is to teach you to do things yourself, and there's absolutely nothing wrong with applying the skills learned here elsewhere. For instance - if you solve a real-world problem using something your teacher taught in the classroom, you wouldn't have to credit him/her, would you? It would, however, be really nice (if you found this guide useful) to put a button or a link somewhere. =)

Oh, and sometimes I tend to babble. If part of this guide makes absolutely no sense to you, please neomail about it so I can clean it up.

*Adopts matronly, teacher-ish voice* Hurry into the classroom now, children.

Basics: HTML

Alright, first of all, you need to know how HTML and CSS work. You know, the basic idea behind each language. And they are, in fact, languages; learn them, and you learn the languages of the Internet (poetic, eh? XD).

Let's start with HTML. HTML codes are basically like name tags - they tell the browser (Internet Explorer, Firefox, Opera, Safari, etc.) what a certain element is.

Let's say you want to put on your web page, "Hi, my name is Bob." You would like the phrase "Hi, my name is Bob" to be the color red. The code below will tell the browser just that.

So, "font" is the tag; "color='red'" is the attribute. Or, in English if you prefer, "font" tells the browser that the text contained inside is labeled as a font, and "color='red'" tells the browser that the color should be red.

You can add as many different attributes to a single tag as you want. For example, if you wanted "Hi, my name is Bob" to be red, Times New Roman, and size 3, you would use the following code:

So, the basic idea is to enclose whatever you want to change between two tags - the opening one ("font") and the closing one ("/font"). Then, you can add attributes to the opening tag ("color='red', face='Times New Roman', size='3'").

HOWEVER, some HTML tags require no closing tag. The most common of this exception is the image tag.

Usually HTML surrounds something that's already on the page (like text), which is why it needs an opening and closing tag. Because the "img" tag is putting something on the page that wasn't already there, it doesn't need a closing tag.

By the same token, the br tag doesn't need a closing tag. Putting "br" in your coding is like pressing "enter" or "return" on your keyboard.

If you want to get technical and use some XHTML (which is stricter and more precise, but somewhat annoying, in my opinion), all tags have to have a closing. So you add a / to the end of the image and line break codes.

So, now (hopefully) you know the basic idea of HTML. If you'd like to reference a complete listing of HTML tags and attributes, use the navigation to your right (and up a bit, I suppose...).

Basics: CSS

Alright, so now you know how HTML works. In web design, it's very important to be fluent in HTML; it's like the foundation of a house. If you take it away, the whole building topples over, and all the fancy detailing is obsolete.

But, like a house, a web page isn't very pretty if all you have is the foundation. Sure, you can change colors and fonts and sizes of text, and you can even add borders and other neat effects to images, but where does that get you? To make a layout, to give your web page structure, you need much more than HTML. You need the other language of the Internet - CSS.

Say you want a box (labeled "boxy" - more on that later) 100 pixels tall and 400 pixels wide, with a purple background. And you want that box to be exactly 100 pixels from the top of the screen and 25 pixels from the left of the screen.

Well, you certainly can't do that with just HTML. Those HTML codes don't exist! So, you use CSS.

See what I did there? I named the element I wanted to change, put in the opening brace ({), added all my commands, then put in the closing brace (}). The following is a simple template:

You can add as many ATTRIBUTE: PROPERTY;'s as you want. You always have to make sure that a colon (:) follows the attribute, and that a semicolon (;) follows the property.

You may have noticed the extra spaces - after SELECTOR, three before every ATTRIBUTE, one after every colon, and, of course, all of those line breaks ("enters" or "returns"). Are they necessary? No, but they make the CSS a lot easier to edit. If you're short of character space, you may want to use the condensed form of the code.

So the only necessary things in your CSS code are: the selector, the opening brace ({), the attribute, the colon (:), the property, the semicolon (;), and the closing brace (}).

So, where do you put all of this? With HTML, all you had to do was stick the code in anywhere. But if you just stick the CSS code in, it won't do anything - your web page will literally have:

on it, wherever you stuck the code. You need to tell the browser that it should read the text as CSS, not just text. We do that by adding "style" tags. Observe:

Notice that the HTML is outside the style tags (or, more accurately, below the closing style tag). At least for Neopets pages, you have to make sure that nothing is on the same line as the opening style tag, and noting is on the same line as the closing style tag.

It should actually be "style" and "/style", not "style /" and "/style /", but because of this new Neopets filter glitch, you have to change it to what I have above for some key CSS codes to work.

One of the common misconceptions among beginners is that you have to have opening and closing style tags for each element you want to change. If you did that, the coding would look like:

It would work, but look how messy that is! You really only need one set of style tags. This is a much better way to do it:

Also, if you find that multiple selectors have the same attributes and properties... combine them, using commas (,). It saves loads of character space. For example - say #boxy and #boxish both have a with of 400 pixels and a height of 100 pixels. Your coding looks like this:

After you combine it, it should look like this:

That's cutting down the character space used by almost half. Now isn't that something...

So, now you know how CSS works, as well as HTML. But to design a good web page, you need to make them work together. You know how I said HTML was like a name tag? And way up at the beginning of this section, I had to label an element "boxy"? Well, CSS doesn't work unless it can find an element with the "name tag" "boxy." Otherwise, it has no idea what you're talking about.

The next section, ids and classes, will teach you how to label, or put a name tag on, the elements that you want to change with CSS.

Ids+Classes

So, what's all this labeling and name-tagging about? For simplicity's sake, we'll start with ids.

The name itself is pretty self-explanatory: an HTML id is equivalent to the real-world meaning of "id." If you give an element an id, it's like assigning it a specific name. Nothing else on the page can be that id; it's unique.

In the HTML, you'd put id="namehere". In the CSS, you'd put #namehere in place of SELECTOR. You can add the phrase id="namehere" to several different HTML tags. Some examples are below. (Please note - the following is just to show you what tags id="namehere can be added to; all of these different codes couldn't be on the same page at once, because there can only be one of a specific id on a page at a time. *Phew* Hope y'all understood that.)

Div, p, and ul are all block elements, meaning they will start on a new line automatically and they will have some extra space separating them from other elements on the top and bottom. Span is an inline element, meaning it will stay on the same line as the element before it, but it doesn't seem to work on Neopets pages (which is annoying, 'cos it'd be very useful D=). Div is the most commonly used if you just want to label something.

Classes are basically the same thing, only they can be used to describe multiple different things. In the HTML, you'd put class="namehere" and in the CSS you'd put .namehere in place of SELECTOR. For example:

You would use classes when you want multiple different divs (etc.) to all have the same properties.

You can also use classes and ids together to save character space. Let's say you want all of the .boxes to have a width of 100 pixels, but you want the last one to have a black border, 1 pixel wide. You would put:

Classes and ids are crucial part of merging HTML and CSS - and, therefore, designing your web page. However, you don't have to label everything to control it with CSS. There are some basic standalone selectors that exist on every page. Want to know what that means? Let's move on to the next section!

Standalones

Alright, I know I'm totally contradicting myself with this section, but hear me out. I know I said that CSS is useless without ids and classes, but the truth is... that's not entirely correct. There are some standalone things on every single web page that you can control using CSS, without ever having to label anything.

They are: body, and all the different tags: p, h1 (h2, h3, h4, h5, h6), b, i, u, a, etc. Let me explain to you what all of them correspond to:

Body encompasses the whole page. Let's say you gave body a blue background - the entire page would have a blue background. Everything is enclosed inside body. It's sort of... the canvas, if you will, and everything else goes on top of it, and is limited by it's borders.

You can also control almost any HTML tag with CSS. For example - if I used the HTML code "h1", I could use CSS to specify what I wanted every "h1" to look like.

The same is true for almost everything else - the other headers, paragraph (p), bold (b), italics (i), links (a), and much more.

Most of those are pretty straightforward, but links are a little more complicated than the others. They have what we call pseudoclasses.

Before we move on, however, I'd like to know - are you still with me? Does this make sense? If the answer to that is "no," I suggest you reread the last few sections over again. Up to this point, I've been teaching you the loose, general ideas behind HTML and CSS. From the next section on, I'll be focusing on techniques to achieve specific effects, and I'll be elaborating on specific codes.

If you've understood everything thus far, though - let's move on to links!

Basic Links

Links are probably the most essential part of a web page (at least for me). Firstly, on Neopets, you have to have the header links on almost every page you have the ability to edit - so why not make them pretty? Secondly - and this is true for all web pages - viewers tend to like a way off the page. Of course, they could just type in a new URL in the address bar, or they could hit the back button, but that takes far less effort than clicking a link that's right there. Do you have more pages you've created that you want the viewer to visit? Do you want them to be able to navigate your website? Is your page really really long, so you need "back to top" buttons and internal page navigation to assist a lazy viewer who doesn't want to scroll?

See, I told you I like to talk a lot. Point is, I don't think I've ever been to a web page without at least one link in some way, shape or form. Having pretty, stylized links can help make your page look polished and sophisticated (how's that for a big word, eh? XD).

The basic HTML tag for links is simple enough.

Notice the opening a, href="URL", the hyperlinked text, and the closing a. The hyperlinked text is a fancy way of referring to the words (or image) that the viewer clicks on.

By default, if you click on a link, the new page appears in the same window/tab as the old one. If you want the link to open up into a new window/tab, add the line: target="_blank". The HTML code should now look like:

This is useful if you want to try to force the viewer to stay on your page. Not that I'm condoning violence or anything... *shifty eyes* Ah, well, anyways, the following is an example: Click me. You know you want to.

Also, here's yet another character-space-saving tip: let's say you want to link to a different page, but it's on the same domain name. (Quick URL mini-lesson: the domain name is from the http:// to the next /. In a Neopets URL, the domain name would be http://www.neopets.com/page.phtml.) If this is the case, then you can take out everything except for the /. So in our imaginary Neopets URL, we'd just put /page.phtml if we were linking to it from another Neopets page.

So, now you paste that code onto whatever page you want to add the link to - and, chances are, this is what you'll get:

Go ahead, click it. Not very pretty, is it? Actually, the bright blue is hideous against this black background, and it doesn't look much better on white. This is the default setting for every link on the Internet (meaning this is what links always look like, unless the person changes it in their CSS).

Now I'm going to change the colors slightly, to demonstrate the different pseudoclasses of "a." The following link corresponds to the CSS code underneath it:

So, as you can see: a:link is how the link will look just as it is on the page; a:visited is how the link will look if your browser recognizes it (meaning you've visited the page recently); a:active is how the link will look if you're in the process of clicking it or if the browser is in the process of moving to the new page; and a:hover is how the link will look when your mouse hovers over it.

As you can probably see, these are absolutely garish colors. Generally you'd change the colors to match your layout theme. Usually, people make a:link, a:visited, and a:active all the same color (or style) - or very close colors (or styles). Hover effects are at their most effective when there's a big difference between a:link (etc.) and a:hover.

So, the coding for those better-looking links would look like this (using the spiffy combining demonstrated in the CSS basics section)... right?

Yes, this coding would have the desired effect: a:link, a:visited, and a:active would all have one color and a:hover would have a different one. But there's a much quicker and cleaner way to do this, and (you guessed it) this other method saves character space.

You know how I keep saying pseudoclasses? Well, a pseudoclass is like... an extra, an add-on. Like... a sub-selector. The official selector for links is simply a. All the pseudoclasses define more specific things inside the selector (in this case, a). That's why they all start with colons (:).

You'll notice that the majority of pseudoclasses all have the same styles, so we'll replace the line a:link, a:visited, a:active with just a.

This makes all of the links, no matter what, a uniform blue.

Now that we've added a:hover, all of the links will be blue EXCEPT a:hover. This is because, if two lines of CSS contradict each other, the bottom one always wins.

AND, not only can you link to external (other, outside) pages, but you can also link internally as well. Check this page's navigation, or this one's. See how, when you click a sidebar link, it takes you to a different part of the page, saving the viewer from having to scroll down instead?

Well, this type of navigation involves ids. Let's say you want to move to a section titled "Links" (creative, aren't I?). The section "Links" has a header, so add id="links", to the opening h1 tag. Then, wherever you want to put your internal link, use #links in place of a URL. It should look like this:

Now, when the viewer clicks the link at the top, it'll take them all the way down the page to the header.

Pretty neat, huh?

Well, honey - you ain't seen nothin' yet. =P Time to introduce you to block and image links!

Block Links

Customizing your links gives your page a polished, sophisticated feel (as I mentioned in the above section). However... most "good-looking" pages have a navigation bar, or navigation that stands out. Basic link styles are great for casual links that you slip into your text, but having some form of stand-out navigation adds a note of professionalism to your web page that just more regular links can't.

This section is for teaching you how to make basic block links, like the links in the sidebar of this page (and on this one).

First of all, you need to set up your links with HTML before we can add pretty styles. The obvious way to do so (so that each link is on top of one another) would be this:

But that's actually not how we're going to do it. Instead, we'll try the following.

It doesn't look too special now - in fact, the links are even all on the same line. It literally looks like this:

Now, to make them pretty, we have to work with CSS.

First and foremost, we have to add the line display: block;. I know (from experience) that many coders, even the 1337-est, have no idea what that does - only that you need it in your code. Let me try to explain: By default, links are inline elements. To make block links, we have to do things like set the height and width of the links - and, we want each link to automatically show up on top of one another. So we have to tell the browser that these special links will display block instead of inline. (They are called block links after all. =P)

But where do we add this, you ask? Well, to select the links inside the div with an id of blocklinks, we use #blocklinks a in the CSS. Observe:

Now, your links look like this:

Now, you have to add all of the other styles you want your block links to have. You can set a width if you want, like I did in the example below, but if you don't set a width, the links will automatically be the same width as the container (the element, like a div, that the link is enclosed in).

Those are my styles. Following those styles, my links look like:

Now, everybody loves hover effects... or at least most people do. To make hover effects, use #blocklinks a:hover like so:

My links now look like:

Although I find that the easiest way to do it, there is another one that I know of. The HTML is different - it uses classes.

Notice how there isn't a containing div, just classes. So, we have to select the links differently in the CSS. Instead of using #blocklinks a, we'll use a.nav:link, a.nav:visited, a.nav:active (that whole phrase). We SHOULD only have to put a.nav, but for some reason it doesn't always work.

Then, for the hover effects, we use a.nav:hover.

The links end up looking exactly the same.

I highly recommend the first method; it takes up a lot less character space, and it's a lot neater (especially if your urls are long; by taking "class='nav'" out, there's less of a chance your link code will spill over onto a second line). I don't know why you'd use the second method, but I just wanted you to know it was possible.

Once again, those are absolutely garish colors - I'm sure you can come up with better. XD Anyways, for a full list of styles you can use, check the CSS codes section near the bottom of this page.

Image Links

Okay, literally, an image link is just a hyperlinked image - like so:

See how I put an image in there instead of hyperlinked text?

Well... why's that so special, you ask? It isn't. =P What this section's really about is how to make pretty image rollover links (but that title was too long; it'd mess up my page layout).

*ahem* Well, I've got a little story for you. (Knowing my "little stories," you'd better grab some popcorn and locate a comfortable chair.)

I originally meant to put a little rollover link tutorial on this page, but I felt I needed a little break from working on this page; I added the header and "back to top" button for this section, but I didn't add any content. So a couple weeks after I decided this, my guild (Nip/Design) held a tutorial writing activity. I figured I'd make rollover links my tutorial, so I started up a petpage. I figured I'd just move the tutorial over to this petpage eventually.

Well, you know me... I can't write anything short. So the petpage morphed into this huge, multi-sectioned tutorial on every different aspect of making rollover links. It was then that I realized, it was way too long to move over to this page - and reformatting it would be a nightmare, anyways.

So instead of having a tutorial here, here's the link to my Nip/Design tutorial contest entry: Image Rollovers (a tutorial by seegensays {how's that for stating the obvious?}).

Tables

Anyone who's ever worked with Excel or Word, or similar programs, has probably come across a table. Heck, even if you haven't heard of either of those, you should know what a table is.

But just in case... a table looks something like the following:

Paraphrasing something my friend Tom has said, "Tables are good if you want to put tabular data on a page... But they shouldn't be a main component of you layout." Basically that means tables are useful for... well, inserting a table with data that would best be displayed that way, but you shouldn't make a layout out of tables - it gets messy.

Have I lost you yet? That last part was a bit confusing, even to me. XD

But anyways - on to how to code them.

The basic code for a table is as follows:

The whole code is enclosed in the table and /table tags; on each line inside you see tr and /tr (which stands for table row), and inside each table row you see td and /td (which stands for table data) enclosing the text that will show up. *Whew!* It's not that complicated, really.

Now, if you just stick that code onto a web page, it won't look very nice.

You can't even see where one td ends and the other begins! To fix this, you can add things like backgrounds (bgcolor), borders (border, bordercolor), etc. But as demonstrated in the first table I showed you... they really don't look very nice. You should control borders, coloring, and really most things in your CSS.

But, there are three HTML codes that you can't include in your CSS: colspan, rowspan, and cellspacing. Let's look at colspan first:

In this example, I want Box #1 to be the width of Box #3 and Box #4 combined. I've added borders to the following table to show you the boxes:

Rowspan works very similarly:

Notice how there are little spaces in between the boxes. That's just the table trying to be helpful (things are easier to read when spaced out, right?). Unfortunately, those little spaces can be very annoying when you add CSS styles. You can't get rid of them in your CSS, so you have to use cellspacing.

Some other things you should know before moving on to CSS table styles: Text inside a table does not follow the text styles already specified on your page. Even if you have body {color: white;} in your CSS, turning all of body's text white, any text inside a table will be the default black.

Text inside a table will also be aligned a certain way; it's horizontal alignment will be left, and it's vertical alignment will be middle.

Now, for beautifying your table.

You want your table to look like this:

Yeah, I realize that the term "beautifying" is a bit misleading, considering I have once again chosen garish colors. But at least it's really easy to look at the coding and see which one's which. =P

And don't ask where the inspiration for such a... special... example came from. It's a long story.

So anyways, first you add the basic HTML.

Yikes - that's huge! That's because I divided it into easily manageable sections: each stanza/paragraph/thing is a separate table row, and each table data is on a new line.

After you've studied the code, let's see what happens when we paste it in:

Not very impressive, eh? It just looks like this huge jumble of text. We have quite a bit of work to do in the CSS. As you should know by now, however, we need something to work with CSS. That's right - class and id time!

Notice that we've given the entire table an id, table1, and we've given each individual table row either a class or id. For the record, you can give tds ids and classes, too.

Next, we have to give all the different table rows their pretty colors.

It's a lot to take in at once, I know, simply because of the size. But look - all I did was use the selectors I put in and add background colors. If you take that code and paste it in, it'll look like:

Now you see why cellspacing is essential to make your tables look pretty. We want to get rid of those spaces, to make each table row continuous. Remember how to do that?

Now, we have:

It's still not perfect, but it's starting to resemble the finished product I showed you at the beginning of this mini-tutorial-thing. Let's tackle the text styles next, shall we?

So, after some alignment and changes in size and font family, our table looks like the following:

How pretty! All we need to do now is add the finishing touches - that little green border, and padding to space out our cells.

That's all there is to it! Now you've gone from this:

To this:

Well, I certainly hope that, from my little example there, you've learned all you'll ever need to know about tables. (You'd better - d'you have any idea how long it took to put that up? ;D )

Tables are very useful for little things like that. It's possible to use divs and such to create the same effect, but it's not nearly as simple and would probably cause a major headache. So even though divs have replaced tables as far as making layouts go, tables are definitely still a necessity.

Lists

Stuff here...

Images

I've mentioned images all over this guide. By now you should know some things about them, but here we'll go a little more in-depth.

First of all, you have to make your image in an image editor on your computer. I generally use Photoshop (now that I have it) but for a very long time, I was "stuck" with the Windows default - MS Paint. Although Photoshop is far easier to use than Paint, it also costs over $600, so if you don't want to pay for it... I'd stick with Paint. There are also some pretty good free (or cheap) image editors available for download on the Internet.

Anyways, once you've created your image, you need to upload it to the Internet. To do this, you have to find an image host - I recommend tinypic(dot)com, imageshack(dot)us, or photobucket(dot)com. Make sure you grab the direct link (for layouts) from the selection of URLs they give you.

Now, for the code; the HTML for the following image will be shown underneath it.

So the image code model would be:

Img is the tag, and src is a NECESSARY attribute. Without "src='url'", there would be no image. That line of code tells the browser to go look up the image from a certain directory (in this case, tinypic's).

As you may have experienced however, sometimes the browser takes a long time to look up the image. In the image's place, sometimes you're left with the broken image icon (different depending on the browser) or just a blank space. If your page is image-heavy, or a specific image is large and may take some time to load, you can add alternate text - text that will show up in place of the image. Alternate text will also show up if your image is broken, or the browser simply can't find it anywhere on the Internet (check for URL mistypings).

Anyways, here's my broken image with its alternate text, and the code is underneath it.

If you're using IE (Internet Explorer), when you hover over an image, you see the alternate text. Try hovering over the broken image up there - you see the same words in a little bubble over the image. That isn't supposed to happen; in most other browsers, to achieve that effect, you need to use title. Observe:

You see the alternate text, but you see the hover text, or title, when you hover over the broken image (works for non-broken images, too). Notice, IE users, how the title takes precedence over the alternate text (a fancy way of saying that the title shows up instead of the alternate text, if there is one).

But that's not all you can do with images in HTML.

You can also set the height and width for images. This is useful if you have an image-heavy page; the page grows in length as each image loads. If you set the height and width, the page's size won't change (to the delight of viewers with slow Internet connections).

If you just put a number, like 50, the height or width would be 50 pixels (depending on where you put the 50). You can add a % sign, changing it to 50% of the container's width/height.

Hyperlinked images automatically have an ugly blue border (or a different color, depending on your page's link styles). To prevent any of your hyperlinked images from having a border, use this CSS code:

However... Let's say you have a link back button, like I do for this page. It's a hyperlinked image - the idea is that somebody will copy the linked image code and put it on their page. But what if they don't have that code in their CSS? Your link will have an ugly border on their page. You can remedy that by changing the border width in the HTML of your image. Watch:

to

There are some other things you can do in the HTML of images, but they're what we call depricated, meaning they've been rendered obsolete by the introduction of CSS (you're supposed to use CSS instead now =P).

You can give images classes and ids, so that you can control them in your CSS. From your CSS, you can position them absolutely, give them fancy borders, even give them hover effects. I won't go into detail now - there are so many CSS codes - but you get the idea.

You can also set images as backgrounds in your CSS. You'd use the code background-image.

Learn more about what you can do with backgrounds in the CSS codes section.

Some things to know about image types; there are 5 I'm going to go over. They are bitmaps (.bmp), JPEGs (.jpg,.jpeg), GIFs (.gif), PNGs (.png), and Photoshop format (.psd). I don't claim to be an expert about any, but I'm just going to give my personal opinion. If you know more about any of these image types, please, neomail me so I can add it to the guide to help others.

Bitmaps are the default file format for Paint (and possibly other default image editors). Although there is no quality loss, bitmaps are absolutely HUGE. As far as I can tell, there is no advantage of saving your image as a bitmap. Stay away from them.

JPEGs are space-saving files. They're really good for photographs, because they use millions of colors (24-bit). Anyways, I don't use them that often because there's generally a loss of quality when you save an image that way; the colors get distorted. They are the most used image file type on the Internet.

GIFs are also compact. With GIFs you can do animation (and I believe only with GIFs), and you can do transparency. However, there is also some quality loss/color distortion; they only use up to 256 colors, which is 8-bit or less. I don't use these a lot either. GIF stands for "Graphic Interchange Format," by the way.

PNGs are pretty compact, but bigger than JPEGs and GIFs. They allow transparency, and there is no quality or color loss. They can be saved as 8-bit, 24-bit, or 32-bit. I use these most often, even though they're pretty big comparatively and can take a while to load. They are one of the most flexible image file types available.

Photoshop format is what Photoshop will automatically save your image as, especially if you do Photoshop-only things like add multiple layers and blending effects. Paint Shop Pro does something similar. You should save all your Photoshop/Paint Shop files like this, to keep your layers and what-not. Most image hosts don't support .psd, however, so you have to save it again as one of the previously mentioned file types.

(A huge thanks to lilcoppercoin for information on image file types!)

Scrollbars

If you've ever used a computer before (which, obviously, you have), you've seen a scrollbar. As you might guess from the name, a scrollbar is the bar that appears generally on the left side or bottom of your screen when you view a page that has more content than the screen can fit. Unless you have the biggest computer screen known to man, there's a scrollbar on the side of your screen right now.

Now, a scrollbar appears automatically if there's more page content that your screen can fit. What if you want to make a scrollbar appear on the side of your div, though, for something like a scrolling updates box, featured here?

For that, we need to work with the CSS attribute overflow. By putting that in your CSS, you're telling the browser how to display any content that won't fit in your div. This only works if you've set a height and width for your div. The four different properties of overflow are: visible, scroll, auto, and hidden.

Visible is the default - that is, if you don't set something different in your CSS, you'll be able to see all your div's content, regardless of whether it should fit. In Firefox, the div itself will remain the same size, but the content will spill out. In Internet Explorer, the extra content will stretch out the div (which it's not supposed to do, but what else would you expect?).

Scroll sounds like it'd be the one we want, but not necessarily. Scroll makes a scrollbar appear on the left and bottom even if there is no overflow, giving you a rather unsightly phantom scrollbar.

Auto is the one we really want. A scrollbar will appear if the content overflows, but there's no scrollbar if there doesn't need to be one. It's good to add this to a div's CSS if the div is supposed to have a certain height and width in your layout. If, in your browser, the text inside fits, that doesn't mean it will in every browser.

Hidden is the last one. As you might have inferred, by setting hidden as the overflow property, you hide all of the content that doesn't fit in the box. So a scrollbar doesn't appear, but it doesn't mess up your layout, either. Hidden is incredibly useful for some coding techniques, but I won't go into those (it'd take a couple extra sections ;D).

Technically, your scrollbar's color depends on your individual computer appearance settings. There aren't any valid codes for changing the colors of your scrollbar. BUT, because Internet Explorer doesn't follow many of the official rules concerning code validity, you can change your scrollbar's colors in Internet Explorer. Who'd have thought that Internet Explorer'd be better than Firefox at anything?

The basic code looks like the following:

The following image shows which code corresponds to which part of the scrollbar:

If these colors match your page's current color scheme, I suggest you change that color scheme right away. Otherwise, change these scrollbar colors to a less hideous combination. XD

Alternatively, for a smoother effect, you can simply use scrollbar-base-color. Observe:

Scrollbar colors can be a nice effect for your page, but unfortunately, your effort will be wasted on people who use Firefox and other *ahem* correct browsers. Add them if you wish, but if you're short of character space, don't bother.

FF vs IE

Let's start this section by talking about web browsers.

A browser is a computer program - like Notepad, or Photoshop. Like Notepad - a text editor - and Photoshop - an image editor - a browser has a special purpose. It's purpose is to interperet Internet pages.

Think of the Internet as a selection of files, like you would have on your computer, only the Internet's files are available to every computer (with an Internet connection). When you go to a web page, you're calling up a specific file somewhere on the web. The browser that you use enables you to see that file.

If you think of a simple Word document, for example, it's not very aesthetically pleasing - just text. On the Internet, to make the information look "good," HTML and CSS are used. They speak the browser's language, and they tell the browser to show the viewer (you) things in a certain way. So even though all you do is input lines of text when you create a web page, when you view it, the browser will display it according to the HTML and CSS commands.

There are many, many different browsers available to view the web. In theory, they should all interpret HTML and CSS the same way. In practice, however, there are tons of discrepancies - some trivial, others huge. If you're designing a web page, you want it to look nice to everyone, so you should try and get your layout to work in as many browsers as you can.

But with the hundreds of browsers out there, how can you possibly edit your page and make it work in all of them? Quite simply, you can't. But the only ones you really have to worry about are Internet Explorer and Firefox.

Internet Explorer, as most coders would agree, is the most troublesome of browsers. Consistently, IE disregards HTML/CSS standards, displaying things differently than it should. But IE is also the most popular web browser used today - simply because it is the default browser for Windows, and most people use Windows. And of the billions of people who use the Internet, only a small percentage know that there are other options besides Internet Explorer.

Firefox is the browser that you should be using. It's available for both Windows and Mac, and it can be downloaded for FREE off of the official Mozilla website. It's a lot more secure than Internet Explorer, and it also displays coding correctly (every browser has it's little quirks, but, comparatively, Firefox is incredibly accurate). Firefox is the second most used browser on the Internet. If it works in Firefox, it probably works in most other widely used browsers (which is why its IE and FF you have to worry about).

Some other browsers of note are Safari, Opera, and Netscape. Safari is the default browser for Mac users, like IE is the default for Windows users. I personally think Opera is somewhere in between IE and FF - in some ways it acts like one, in other ways it acts like the other. It has a pretty unique look. Netscape was the most popular browser for a long, long time, back when CSS didn't exist. It's rarely used anymore, but I thought it deserved an honorable mention.

Now that we've learned a bit about browsers, lets explore some of the major IE/FF discrepancies.

Transparency is a pretty neat effect. You can give elements, like images or divs, partial transparency, so that you see the element and also some of the element underneath it. I personally think transparency in hover effects looks pretty cool.

In Firefox, you would use the following code:

You use numbers between 0 and 1; 0 is completely transparent, 1 is completely opaque. So .5 is exactly in the middle. An image with .5 opacity looks like the following:

You Firefox users will notice the difference (the regular image is on the left, the semitransparent one on the right). But to Internet Explorer users, both images look exactly the same.

So for finicky Internet Explorer users (IE is finicky, not necessarily the users), we need this code:

The values go from 0 to 100, 0 being fully transparent and 100 being fully opaque.

Filters can do all kinds of things: flip stuff upside down, make things fuzzy, give them a glow, even filter out certain colors. But now they're depricated - we don't need them now that we have such fancy CSS effects. Unfortunately, Internet Explorer didn't get the memo. So this is how we turn images semitransparent in IE.

Below, you'll see the regular image on the left and the semitransparent one on the right.

Firefox users won't see a difference this way, though, because Firefox doesn't recognize filters. So, how do we get something semitransparent in both? Well, simply combine the codes.

Off Neopets

Stuff here...

Colors

Stuff here...

HTML tags

Stuff here...

CSS Codes

Stuff here...

Credits

Stuff here...