welcome to cssish

Hello! Welcome to CSSish! It's a guide to CSS, owned by Spud, and should teach you all the stuff from the very basics all the way up to some advanced stuff. /Hopefully/ this page will be useful to you and help you learn CSS in an easy to understand way. c: Please note that this guide was intended for people who already know HTML.

using the guide

The links to the top left are each section. Each section focuses on how to code a certain thing, such as headings or links. You can either fast track yourself to the section you want or follow the guide through from the start. If you are a beginner I suggest you start at the Getting Started link. (;

☆ 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 in the guide, neomail Spud, and she will do her best to put it up on this page.

Thanks for visiting and enjoy your day!

sitely

link back

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!

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

This section covers how CSS is set out.

Style tags

Style tags are what your CSS goes in between. They look like this:
<style> </style>
All of your CSS must go in between these tags.

Selectors & Property & Values

Selectors, properties and values are the things you use to write CSS. They work like so:

selector{
property:value;
property:value;}

A selector is the thing you want to edit. For example, b (for bold)
A property is the thing you want to change in that selector. For example, color
And a value is how you are changing the property. For example red.


Put them all together and you get this:

b{
color:red;}

This would change bold words to the colour red.

Choosing Colours: To choose a varying range of colours you can poogle hex codes and use those. They are six digits and you need to put the hash symbol (#) in front of them. For example, black is #000000.
You can also use an eye dropper tool in programs such as photoshop.

☚ ☛

bold, italics, underline

This section covers how to edit bold, italic, and underlined words.
The colours usually match the colours in your layout (if you have a graphic) or they compliment each other if your layout is pure CSS.

Bold

The bold code edits how words that are bolded look.
The selector for bold is b.
Here is the code for the bold I used:

b{
color: #CA8902;}

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

<b>bold words</b>

Italics

The italics code edits how words that are italicized look.
The selector for italics is i.
Here is the code I used for my italics:

i{
color:#D6D868;}

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

<i>italic words</i>

Underline

The underline code edits how words that are underlined look.
The selector for underline is u.
Important: Currently the underline code does not work on neopets.

u{
color:red;}

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

underlined words

☚ ☛

editing fonts

This section covers other ways you can edit fonts to achieve the look you want in your layout. This is because you can edit more than just bold, italics and underline.

This section is currently under construction

☚ ☛

backgrounds

Backgrounds can either be images or just a block colour.

Block colour backgrounds

A block colour background just has one solid colour for the background.
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);

You then need to decide whether you want your background to move when you scroll of not move at all. You use 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.

If your background is full page then use the following code:

background-repeat:no-repeat;

No-repeat means that your background will not repeat itself.


If your background is a pattern then use one of the following codes.

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

Repeat means that your background will repeat across the page and down the page.
Repeat-x means that you background will only repeat horizontally.
Repeat-y means that your background will only repeat vertically.

☚ ☛

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.

How Links Work

Links have 4 different selectors, they are:

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

Usually a:link, a:active, a:visited{ are used together while a:hover is seperate so the links only change when you hover.

simple styling

To change the colour of your link:

color:COLOURHERE;

To change the font family:

font-family: FONTFAMILYHERE;

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

To change the size of your font:

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.

Advanced Styling

Here are some other codes you can use to customize your links.

background-color: COLORHERE;

This will put a background colour behind your text.

text-decoration:none;
OR
text-decoration:strike-through;

None will mean your text has no decoration.
Strike-through means your link will have a strike through it like this.

font-style:italic;

This will make your link italic

font-weight:bold;

This will make your link bold

text-transform:lowercase;
OR
text-transform:uppercase;

Lowercase will make all the letters in your link lowercase.
Uppercase will make all the letters in your link uppercase.

letter-spacing:1px;

1px can be exchanged for any number px. Inluding negatives such as -1px;
It will put spaces between your letters.

Hovering

If you want your links to change when you hover over them you need the a:hover{ selector to be seperate from the others. You can use all the same codes that are above.

Using Links

To use a link in your text use this code:
<a href="http://www.neopets.com">link</a>
That would make your link, link to the neopets homepage.

Important: You can only link to other pages on neopets if you are coding on neo.

☚ ☛

Padding, Borders & Margins

This section will explain padding, border and margin, as they will be use