Getting Started

First and foremost, if you do not have a basic understanding of HTML, you are not going to be able to understand this guide. Sorry about that. Here are a few HTML guides:



Now, onto the guide!

What is CSS?

CSS stands for Cascading Style Sheets and it 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 cover how CSS is set out. It is necessary to read this in order to understand the rest of the guide.

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, Properties and 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 these three things together and you get this:
b{
color:red;}

This would change bold words to red.

Tip: 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. Or you could use this petpage:


Editing Fonts

This section covers the various ways you can edit fonts. It includes both ways to edit fonts and types of fonts that can be edited.

Basic Font Properties and Values

The most basic font properties and values are:
.font{
color:#000000;
font-size:10pt;
font-family:tahoma;}

.font is the name of your font. I have chosen to name my font font however you can change this to whatever you feel like. The dot (.) must stay at the front of the name.

Color indicates what color you want the font to be. I have chosen black (#000000), however this can be changed to any color.

Font-size is self explanatory. I have chosen 10pt which is the size of this font. However this can be changed to any size. Usually they are between 6pt - 40pt. Experiment with different sized fonts to get an idea of sizes.

Font-family is also self-explanatory. It changes what the actual font is. I have chosen tahoma which is the family of the current font. Other common fonts include arial, georgia, verdana, "times new roman". There are more. Some fonts may not work on all browsers/computers so be aware of that.

To use the font, you use the following code:

Notice how the fonts name is used in the code (it's the thing in the "quotation marks"), whatever you have named your font should be put there.

Other ways to Edit Fonts

I have shown you how to create a basic looking font.
However, there are many different properties and values that can be used to edit fonts and I will be showing you them here.

text-transform

.font{
text-transform:uppercase;}

Text transform allows you to change the case of the text. The following values can be used:
uppercase which changes the text to UPPERCASE
lowercase which changes the text to lowercase.
capitalize Which Changes The First Letter Of Each Word To Uppercase.

The text will appear uppercase or lowercase no matter how you have typed it (e.g. if you type all of your text in lowercase, but you have used text-transform:uppercase; then all the text will appear uppercase on the webpage).

font-style

.font{
font-style:italics;}

Font style allows you to make text italic. The following values can be used:
italics which makes your text italicized
normal which makes your font normal.

font-weight

.font{
font-weight:bold;}

Font weight allows you to change the weight of the font. The following values can be used:
normal which makes text appear normal
bold which makes text bold

letter-spacing

.font{
letter-spacing:1px;}

Letter spacing allows you to change how much space is between the letters. The following values can be used:
1px which makes text have 1px of space between them
2px which makes text have 2px of space between them
3px which makes text have 3px of space between them

and so on... Any whole number can be used, both negatives and positives.

word-spacing

.font{
word-spacing:5px;}
Word spacing allows you to change how much space there is between words. The following values can be used:
5px which makes the words have spaces of 5px.
9px which makes the word have spaces of 9px.

and so on... Any whole number can be used including negatives and positives.

text-decoration

something needs to go here.

Fonts that can Be Edited

Now that I have showed you some ways in which you can edit fonts, I am now going to introduce you to types of fonts that you can edit. These fonts are ones that are automatically on a webpage, such as headings and bold words.
In these examples I am only editing the colour of the words, however you may use any of the above codes when editing these types of fonts. I'm just trying to keep it simple ;)

bold

b{
color:#EEEEEE;}

The selector for bold is b.
In this code I have made bold words this color.
To use it in your text you use this code:


italics

i{
color:#EEEEEE;}

The selector for italics is i.
In this code I have made italic words this color.
To use it in your text you use this code:


underline

u{
color:#EEEEEE;}

The selector for underline is u.
In this code I have made underlined words this color.
To use it in your text you use this code:


headings

h1{
color:#EEEEEE;
font-family:tahoma;
font-size:10pt;
font-style:italics;
text-transform:uppercase;
letter-spacing:2px;}

The selector for headings is h1, h2, h3, etc...
In this code I have made a heading
LOOK LIKE THIS

To use it in your text you use this code:


More properties and values can be used to edit headings, however these are later in the guide. There will be a note saying they can also be used in headings. :)






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