last updated: 01.09.2017

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 this:
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.

Fonts that can Be Edited

Now that you have seen how to make a font, 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 later in the guide I will show you more ways to change your fonts!

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;
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:


links

a{
color: #EEEEEE;}

The selector for links is a.
In this code I have made links this color.

To use it in your text you use this code:


Links can also be edited based on what state they are in. Here is an example of the different link states being used:
a:link, a:visited, a:active{
color:#000000;
font-weight:normal;}

a:visited{
font-weight:bold;}

In this code I have made links bold when hovered.

The different states are:
:link is an unvisited link
:active is the moment a link is clicked
:visited is a visited link
:hover is a link when hovered.

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

.font{
text-decoration:underline;}

Text decoration allows you to add an underline or overline to your text. The following values can be used:
normal which makes text appear normal
overline which makes text have an overline
underline which makes text have an underline
line-through which makes the text have a line through

Text-decoration is often used to remove the underline from links.

font-variant

.font{
font-variant:small-caps;}

Font variant allows you to make words appear in all capitals, but the capital letters are smaller than the original capital letters of the font. The following values can be used:
normal which makes text appear normal
small-caps which makes the text appear in small capital letters

Creating Boxes

Now that you have learned how to make your fonts all pretty and aligned ^___^ It is time to show you how to place all that pretty text where you want it on the page.
To do this we need to make a box.

Basic Box Properties

.box{
top:100px;
left:150px;
width:750px;
height:auto;
background-color:#ffffff;}


.box is the name of your box. This can be changed to any name as long as the dot (.) stays at the front.

Top and Left indicate how far you want the box to be from the top and left of the page. In this case I have chosen 100px (100 pixels) from the top and 150px from the left.

Width and Height indicate how wide and high the box should be. In this case I have chosen 750px wide and the height is automatic by how much text is in the box.

Background-Color is self explanatory. In this case I have chosen white (#ffffff).

To use the box you use this code:


Editing Paragraphs

Now that you have learned how to edit fonts and put them where you want on the page you will need to think about how they will look in a paragraph. Here are some ways to edit paragraphs appear on the page.

line-height


Coming Soon

text-align


Coming Soon

Padding, Margins, Borders

Padding, Margins and Borders are important properties of the box model. They can be used with many different elements of a webpage included div's, classes, images and links.

padding

.paddedbox{
width:400px;
height:400px;
padding:5px;}

Padding adds a "pad" (for lack of a better word) between the text inside an element and the edge of that element.

Here is a box with 5px of padding

And here is a box with 20px of padding

If you want the padding to be different for each side of the box, you can use differnt properties to seperate them. They are padding-top, padding-bottom, padding-left, and padding-right.

margin

.marginbox{
width:400px;
height:400px;
margin:8px;}

Margin adds a pad around the outside of an element. In this example the margin extends 8px from the edge of a box. This pushes everything away from the edge of an element by 8 pixels.

If you want the margin to be different for each side of your element then you use properties the same way as the padding properties. The margin properties are: margin-top, margin-bottom, margin-left, and margin-right.

borders

.borderbox{
width:400px;
height:400px;
border:1px solid #000000;}

Borders add, you guessed it! a border around your element.

1px is the width of the border. This can be changed to 2px, 3px, 4px, etc..

#000000 is the colour of the border. This can be changed to any colour, eg. red or any hex code eg. #999444.

Solid refers to the type of border. A solid border is a line. There are many different borders. Here are the commonly used borders:
dashed is a dashed border

dotted is a dotted border

double is a double border

none means there is no border
hidden means the border will be hidden.

You can also specify if you only want the border on one side, the same as with the padding and margins. The properties are border-top, border-bottom, border-left and border-right.

Here is a box with a 4px dashed red border at the top.


More Coming Soon!





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-2017.
® 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