welcome

~*~*~* this layout is under construction ~*~*~*~

Hi there! Welcome to Spud's guide to CSS! This page will (hopefully) teach you how to do CSS, in an easy-to-learn way. I can't promise that you'll learn CSS, but I will try my best to explain it simply. CSS, is actually, quite simple once you get the hang of it, and if you want to be an avid graphic-designer/coder then taking the time to learn is totally worth it.

Anyway... onto the guide! The links to the left are each a section on something to do with CSS. You can either click on them to get to the page you want, or you can click the next button which will be at the end of each section.
If you are a beginner I suggest you start at the getting started link. ;)

Please note - This guide was intended for people who have an understanding of HTML.
If you are confused about anything, feel free to contact Spud to ask a question. :)

If there is anything you would like to learn how to do, and it is not on this page, neomail Spud, and she will do her best to put it up on this page.

sitely

I'm not really sure what to put in this section hahaha. Sooo, with that in mind. Idek.

Link back!

Affiliates

Listed at

Credit

NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2011.

A big thanks to the members of Rubic for encouraging me to write this guide.
Thanks to Kara for checking all my stuff. :)

getting started

First and foremost, I must tell you now, incase you didn't read it on the front page, if you do not have a basic understanding of HTML then you will probably not understand this guide. :( Sorry!
Now onto it!

What is CSS?

CSS stands for Cascading Style Sheets and is used to describe the look and formatting of webpages.

CSS is always paired up with HTML.
HTML shows the outline of the page, while CSS styles it to the way you want.

I guess you could say CSS is like a 'look-like-this' rulebook that your webpage must follow.
So pretty much, you use it to design webpages, which is why (I'm guessing) you're here!

basics

So here are the basics of CSS. This is pretty much how CSS is set out. :) So how is it set out?

Style tags

Style tags are what your CSS goes in between. They look like this:

All of your CSS must go in between these tags!

Selectors & Property & Values

Selectors, properties and values are how you write CSS.

selector{
property:value;
property:value;}

Selectors are the things you want to edit. For example b (for bold)
Properties are the things you want to change in that selector. For example color
And values are the change of the property. For example red.

Put them all together and you get this!

b{
color:red;}

This would change anything that was bold into the colour red!

I hope this makes sense in how CSS is laid out. :)

bold, italics, underline

I thought, for you to understand more thoroughly, I'd start with something that is easy to edit. :)

Bold

Bold, as you must realise makes things bold.
Here is the code for the bold I used:

b{
color:#A6A4A4;}

(The numbers are a hex code, poogle hex codes and you should understand.)

If I want to use the bold code in my text I would use this:

Italics

Italics are used to make things italicized.
Here is the code I used for my italics:

i{
color:#9C0303;}

If I want to use the italics code in my text I would use this:

Underline

Underline makes words underlined. As far as I can tell, underline does not work on neo at the moment, but I will give you the code anyway, as you may want to code offsite.

u{
color:red;}

And of course, if I wanted to use underline I would do this:

backgrounds

Backgrounds can either be images or just a block colour.

Block colour backgrounds

Block colour background are easier so we'll start with them.
A block colour background just has one solid colour for the background, such as this layout has. :)
The code for backgrounds like this is:

body{
background-color:colorhere;}

Image Backgrounds

Image backgrounds are a little harder.
First you must make an image an upload it to an image provider. Once you have done that, start with this code:

body {
background:url(URLHERE);

After you have done this, you need to stylize your background. You can use any of the following codes to do so.

background-attachment:fixed;
OR
background-attachment:scroll;

Fixed means that your background will not move if your page scrolls.
Scroll means that your background will scroll with the page.

background-repeat:no-repeat;
OR
background-repeat:repeat;
OR
background-repeat:repeat-x;
OR
background-repeat:repeat-y;

No-repeat means that your background will not repeat itself.
Repeat means that your background will repeat across the page and down the page.
Repeat-x means that you background will only repeat across the page.
Repeat-y means that your background will only repeat downwards.

Box Terms

This section will explain padding, border and margin, as they will be used in the upcoming sections.

Padding

Padding is the the thing that goes around the text. It separates the text from whatever box it is in. You will notice that my text does not touch the side of the box it is in, this is the padding.

The code for padding is

padding: 1px;

1px represents how thick your padding is. You can change the number to whatever you want. A common padding is 5px.
If you only want padding on the left side of your content you would use the code padding-left, and same goes for bottom, top and right.

Border

Border is um, pretty obvious. It's the border around things.
The code for borders is

border:1px solid COLOR;

1px represents how thick your border is. You can change this to any number you want.

Solid represents the style or your border. Solid means that your border is a line.
Other border styles are dotted (your border is dotted), dashed (your border is dashed), double (two solid lines).

Color represents the colour of your border. Change it to whatever colour you choose.

Margin

Margin is what is outside the border. It clears space around your box.
The code for margin is

margin:1px;

1px represents how much space you want cleared. You can change the number to whatever you want.
If you only want a margin to the left of your box use the code margin-left. Same goes for bottom, top and right.

links

This is where the guide starts to get a little complicated as a lot of codes can be used for links, so hopefully you keep up. ;D
This section will focus on simple links such as this one.

Stylizing Links

First up, the selectors for links are:

a:link, a:active, a:visited{

Next you need to change the colour of your link.

color:COLOURHERE;

Then the font family

font-family: FONTFAMILYHERE;

Good fonts to use are verdana, tahoma, georgia, arial or century gothic.

Next up, size!

font-size: FONTSIZEHERE;

Good sizes for you to use are 8pt(the size of this text) or 10pt. But experiment around with other sizes if you want. Generally links are the same size as your text.

Hovering

After you have finished customizing your links, you must then decide how you want it to look like when you hover over it. The selector for this is

a:hover{

If you do not want your links to change when you hover over them simply put the hover selector in with the first code at the top of this page.

If however you want to change something just put the property and value that you want to change. For example, if you wanted to only change the colour of your link when you hover over it you would use this code:

a:hover{
color: COLORHERE;}

You do not have to put in the other properties and values if you do not want them to change.

Using Links

To use a link in your text use this code:

That would make your link, link to this page.

Also, don't forget! You can only link to other pages on neopets if you are coding on neo.

advanced links

In this section I will teach you how to make block like links, such as the ones to the right.

Differentiating links

Block link selectors are a little different to normal link selectors. If you used the same a:link, a:active, etc then the webpage would get confused and use one code or the other.
For this reason when we write our selectors we do this:

a.b:link, a.b:active, a.b:visited{

See the little .b? That helps the page understand that it is a different link. I use the letter b because it is easier to write, but you can write anything after the dot, as long as it stays the same.

Block Links

The first thing you need to do is make your link a block. To do this use this code

display:block;

Next! If you want your link to be a certain width add this code in

width:100px;

100px can be changed to any number you like.
If you want your links to be as long as the words are do not put this code in.

Next you need to decide where you text will be inside the box. For example

text-align:center;

Center will make you text aligned to the center. Other values for text-align are left (makes your text sit to the left of the block) and right (makes your text sit to the right of the box.)

After this I add padding.

padding:2px;

This is so the text does not touch the sides of the block

And then margin

margin:3px;

This is so my blocks do not touch. Like the ones on the right. If you want your blocks to touch do not use this code.

After this edit your text how you want. Like you did in the links section.
You can also add a border if you like.

Hovering Block Links

Hover works the same way as it did with normal links. Except don't forget to use whatever word (or letter) you used from the top of this page.

a.b:hover{

That is what I would use. You can then edit how you want it to look like when you hover.
Common this to do are to change the colour or background color.

Using differentiated links

To use a link, write a link as you normally would, except inside the arrow tags add class="(whatever word/letter you used after the dot)" That would mean, I would use the letter b like so:
Change the b to whatever you used.

headers

Headers are well... headers.
The selector for headers is

h1{

h1 can be changed to h2, h3, h4, etc

Customizing Headers

First of all. There are some codes, that we used for links, that you can also use for headers. So I don't have to explain them all again, I'm just going to tell you what they are and you can check the links and adv. links sections if you don't know what they do.
So here they are

color:COLORHERE;
font-family:FONTFAMILYHERE;
font-size:FONTSIZEHERE;
background-color:COLORHERE;
font-style:italic;
font-weight:bold;
text-transform:lowercase;
letter-spacing:1px;
text-align:center;
border:1px solid black; OR something more like border-bottom

Actually, that's about all I can suggest for when you are making headers. So I'll give a few tips!

Try and keep your header clean and big.
Putting your header at a font-size between 16pt and 24pt is a good idea.

If you are aligning your text to the left or the right I suggest putting padding on that side so your heading does not look to far away from your text/to close to the edge of you box. For example

text-align:left;
padding-left:20px;

Using Headers

To use headers in your text use the following code

id's

Id's are generally used as content boxes. Boxes such as this one!

The selector for id's is

#IDNAMEHERE{

Once you have decided on a name for your id, such as #main you need to add width and height.

width:500px;
height:700px;

500 represents how wide your id is. Change this number to any number you like.
700 represents the height of your id. Change this number to any number you like. If you want your id to stop when your text does leave this code out.

If you want your id to be a certain height and scroll when the text goes past this point, put this code in

overflow:auto;

Next you need to tell the page where you want your id to be. To do this we use this code

top:40px;
left:80px;

40 represents how far from the top the id will start.
80 represents how far from the left the id will start.

Customizing text inside your id

First choose your font color using the normal color code.
Then you choose what font you want using this code

font:8pt verdana;

8pt represents the size
verdana represents the font-family.

Next you need to choose how to align you text. We have a new value for text-align.

text-align:justify;

Justify is generally used for content as it lines all your text up at the end of each line, which makes everything look cleaner and more organized.

If you want there to be a certain amount of space between each line of text use this code

line-height:18px;

18 can be changed to any value you like. This layout uses an 18px line-height. Experiment around with different line-heights though. :)

Well, that's about all the new codes for this section. Other codes you should/might want to use for id's are

background-color:color;
padding:5px;
border:1px solid #000;

Using id's

To use an id use this code

Other uses for id's

Id's can also be used to place things on your webpage such as images.

#image{
top:0px;
left:0px;}

That would be a good code if you wanted to put an image on your page and have it right at the top.
You would then use this code to place it on your page

OH BTW, I haven't mentioned this before but that's how you get images to appear. Hopefully you already knew that though. ;)

classes

Classes work in the same way id's do. The reason there are two things that are almost the same are so you can use page anchors. But that will be explained in a later section.

The selector for classes is

.CLASSNAMEHERE

You would then use the same things you would for id's.

The code for classes is

Other Codes

These are some other properties and values that you can use, but didn't really fit in anywhere else.

Z-Index

z-index works the same way as layers do on photoshop.
The code is

z-index:100;

100 represents where the selector is. This number can be anywhere between -100 and 100.
To explain this further, if something has a z-index of 100 it will appear above everything else.
If it has a z-index of -100 it will appear below everything else.

Lists

Lists isn't really CSS, but more HTML, but I'll put this here anyway, because it will be helpful.
If you want to make a

bullet
point
list

then you would use this code

If you want a

number
point
list

then you would use this code

Textareas

Textareas are boxes in which you can put codes in without them having an effect on the page.
Generally people tend to edit the width and height of textareas like so

textarea{
width:150px;
height:20px;}

Other thinks you can edit in your textareas are

background-color:white;
border:1px solid black;
color:black;
overflow:hidden; (to hide the scrollbar)

anchors

Anchors are the navigation system of any one page. They work by putting page anchors in and then linking to that page anchor.

To add a page anchor to any part of the page use the code:

This code will mean that when you link to your page anchor it will go to exactly where you put it.
Then, to link to that page anchor use this code

advanced anchors

I've decided to put this in a different section to anchors because it's a little different than just page anchors.
This section will teach you to make pages like this. Where you click a link and new writing will come up. This is done with anchors, id's and classes.

The steps

First of all, you need to make an id. Your id acts as a box.

#IDNAME{
top:###px;
left:###px;
width:###px;
height:###px;
overflow:hidden;}

Add in the appropriate numbers of where you want your content to go, and how wide and high you want your content area to be.
You must have a height. You also must have the code overflow:hidden;.

Next up, you need to make a class. You class is your actual content box and is where all your content will go.

.CLASSNAME{
background-color:COLOR;
width:###px;
height:###px;
padding:#px;
font:#pt FONTFAMILY;
color:COLOR;
overflow:auto;}

Okay, this may be a little hard to explain but I will try my best.

Your padding adds width and height to your box. For example, if your padding is 5px, then 5px will be added to the top and bottom, and to the right and left of your box. It adds to the width and height, it is not included.
For this reason, for the width and height of this class, you need to times the padding by two and subtract it from your id's width and height. This is the width and height of you class.
You do not need to add a top and left property as your id does that for you.
You can also add other codes to your class like text-align.
You must keep the code overflow:auto;

That is all the coding that you need.
Next up, outside your style tags use this code

(Click in the box and use the arrow keys to see the whole code.)

Every time that you want a new section add the following code in before the last div from the last code I gave you.

Hopefully this made sense to you!
Make sure to link to your sections. ;D

coding around neo filters

Neo filters can be problematic at times. Here are some helpful codes that will help you around the filters! Only for petpages though, because I can't code userlookups, so therefore can't tell you how to hide stuff on them.

Petpage Filters

This code will remove the top bar that usually appears at the top of a petpage

table{
background-color: transparent;
z-index: -99;}

table a img{
display: none;
z-index: -98;}

This code will remove the footer that usually appears on petpages.

.sf {display: none;}