CSSish
welcome to
Hello! Welcome to CSSish! Have you always wondered how to create beautiful petpages, but never been able to figure out how? This is a guide to CSS that will teach you how to create webpages from scratch. It covers everything from the basics, customising links, and inserting images to div's and anchors. I hope this guide is useful to you. Enjoy.
If you have any questions feel free to neomail Spud

updates

14 Jan 2014 Started on the new layout!

old updates →

affiliates

none at the moment :c

listed at

old updates

3 Sep 2012 I have a new affiliate: Double Standard. Check them out!

21 Aug 2012 Now affiliated with Ipsum! This site is amazing and you should check it out!

15 Aug 2012 Now listed at Masked

9 Aug 2012 Got a new link back button from Open Eyes! Thank so much! c:

8 Aug 2012 My first affiliate: Fist of Clouds! Go check it out. ^___^ + Thanks to Kelly for a beautiful new (and first) link back button!

9 Jul 2012 Two new listers! Angel's Directory and Plethora!

jump to

» Getting Started
» Basics
» Bold, Italic, Underline
» Editing Fonts
» Backgrounds
» Links
» Padding, Borders, etc
» Advanced Links
» Headings
» ID's & Classes
» Z Index
» Textareas
» Anchors
» Advanced Anchors
» Neopets Filters

link back







credits

neomail button from details.

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:

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:



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:



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:



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:

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



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