YES!

a general css tutorial
YES! is a handy page for anyone who understands the concept CSS, but sometimes forgets one thing or another.

About

YES! is a guide for you to use and refer to when using CSS.
The main goal of YES! is to help you with CSS coding by making it easy and to give you ideas to make your pages even spiffier.

Before You Start...

The Quick Jump Navigation to the right is handy for when you know what you're looking for in particular.
Otherwise, I would suggest using this guide in the order in which it appears.

*If you found this tutorial helpful or used some of the CSS given, linking back to this page is greatly appreciated.

Getting Started

Here is a basic CSS template that you can fill in with the coding you learn from this tutorial.

Here you have the
selector {property: value;}

book {author: title;}

It's like you order a chocolate cake (selector)
and you want to change the icing (property)
to vanilla (value).

That was a lame comparison, and hopefully it will make more sense as we go on.

Colors/ Hex Codes

Color is love.
In order to have a fun looking page, you probably want to change the colors of your text or headers or backgrounds or borders. You do that with a little something called HEX codes.
HEX codes are six-digit numbers that represent colors with the value or red, blue, and yellow in the color.

When giving an element a color, you must remember to precede the HEX code with a number sign (#), otherwise, it won't work.

That is my HEX color page with a bunch of colors and their HEX codes that you can chose from.

Backgrounds

Backgrounds go in the body selector*. You can have a solid color background, or you can have an image as a background.

Solid Color:

Usually if you have an image for your background you have a color as a backup because the color is what shows while the background is loading. But you don't have to, and if you don't want a backup color you can remove the HEX color code part.

More elements you can change:

Fixed background, it doesn't move as you scroll the page.
The bottom/top/center right/left fixes the image wherever you place it. It's a simple version of absolute value.
No-repeat means that the image is only displayed once, it doesn't repeat to fill the screen.

*generally, backgrounds are in the body selector.
But you can use them anywhere. You can have backgrounds on anything that use them, such as a body background or a div background.

Divs

Here's a good illustration for a div and what it contains.

You can have many different divs on a page, using positioning to place them where you want, and adding borders and fun font effects for decoration.
You can name divs whatever you like, to create them you put

In your style tags.
The overflow:auto makes it so that if your content takes up more room than your height and width, the div will have scroll bars to let people scroll through the rest of your content. An alternative it overflow:fixed.
Then to make them show up in your page, you would put overflow:fixed. That makes it so that if the content goes over the area of the box, it just freezes and you can't scroll through.

Here's what you put in your body to make the div show up.

You can put pictures or text or anything you want in your divs, and you can have as many divs as you want.

Borders

There are eight types of borders, and they are:

*NOTE: The 'double' border only works with a width of at least 2px
You will often see borders around headers, divs, etc.

Here's what you put in your coding to add borders around text, divs, or whatever else you want a border on.

The elements you can change are

You can change the color, the location of the border (left, top, bottom, right), and the width.
I have a 1px dashed bottom-border on my underlinings.

Fonts

Arial, Georgia, Tahoma, Verdana, Times New Roman, Helvetica, Courier New, Lucida Console,
Century Gothic, Century, Candara, Calibri

Font Weight

Bold, Italics, and Underline are all font effects that you can use to add style and emphasis to your text.
You may notice that my font weights are colored, and that's because I altered them in my style tags.

Example

You can change colors and size, add borders, and more.

More

You can insert a negative or positive number for the letter spacing. I really like this element because I think pages look spiffy when headers are specific parts of a page have text real close together or far apart.

Links

Links are listed in the style tags as a:link.
You can change the color, font-weight, border, and all the rest of the font-effects you feel like adding.
There are four different types of links.

A regular link just sitting on a page is a:link
A link that your mouse is hovering over is a:hover
When you've clicked a link on a previous visit to a page, it's considered a visited link, therefore you get a:visited
A link turns a color when you click on it. When it's clicked on, it's a:active

I like to have my a:link, a:visited, and a:active links all the same color, and then my a:hover links a different color so that my links are always the same color, but change when you hover. That way you know it's a link.

Headers

At the top of each section I have the name of the section in bigger print. Those are called headers. On this page, I have generic headers with no designing by me, but honestly, I think headers are about the funnest thing to code in CSS.
You put this in your content to signify a header

You can have as many headers as you want. If you don't code your headers, the generic protocol is that the lower the number, starting at one, is the biggest header. As you change the number, h2, h3, h4, etc., they get smaller and smaller.
But you can code them to have different fonts and colors and sizes, which this section is going to teach you how to do.

You code your headers in your style tags, like so

You can change the font face, the border, the background, and the size.

Margins

A margin is a transparent border that clears out an area around an element. Like when you type an essay on the computer and you have the one inch border around the paper that it doesn't let you type in, CSS margins are pretty much the same thing. You can have them around divs, textboxes, scrollboxes, and pretty much whatever you want them around.

Or you can use a shorthand property to make it simpler, this example will put a 25px border around all four sides.

Padding

The padding is like an inner margin.
It clears out an area around the content, like in a div it would leave some room from the edges and the text.
Also like margins, you can specify specifics for the top, bottom, left, and right; or you can use the shorthand property.

Shorthand

Changing Text Areas and Scroll Boxes

You can change many physical properties for scroll boxes and text areas, like the size, color, and border.

Then in your coding you would have
(remove spaces)

Remove spaces and add underscores in between 'text' and 'area

Absolute Positioning

Absolute Positioning lets you place an element wherever you want it at. For example, you can have many different divs all in different positions on your page. One in the top right corner, one in the middle of the bottom, and you get my point. You can place them anywhere.

You don't have to use absolute positioning to place things, though. If you're making a cantered or nice simple layout, it can be difficult. An easier alternative is demonstrated in the background section. It's positioning with simple commands; top-right, bottom-left, etc.

Page Anchors

Page Anchors are difficult to explain, but very easy to use once you get the concept.
I'm using them on this page. Up at the top I have Quick Nav, which jumps from one part of the page to another. That's what page anchors do, they let you click to different parts of the same page.

This is what you put instead of the regular a href, you have this special anchor href.

The #START is what I named the anchor. That means when you go to 'http://www.neopets.com/~imadiscokacheek#PA' it will take you to the Page Anchors section of the page.
The Page Anchors part is what shows up, just like in a regular link. Also like a regular link, you have your ending the link.

Now you need to designate where on the page the anchor leads to. I label my headers, but you can designate any text or even just empty space.

I have my anchor leading to the beginning of this section, that's why the code is wrapped around the words Page Anchors. The a name="PA" is naming that as the beginning of the PA anchor. You do need to have a /a to end the 'link', because it signifies the end of the anchor.

*NOTE: Make sure you stay consistent with your CAPS, because if you a href something #YAY and a name it "yay", it won't work. The links are CAPS sensitive.

THANK YOUS

w3schools for teaching ME CSS

rita1111 for coming to every board I've ever made asking a CSS related question, and not only answering my questions but teaching me why certain things are, bringing up other points, and basically being my personal editor and helped. I owe her big thanks.

My bffflf JEN for looking every time I IM her a link to my page, which is possibly-probably every 3 or 4 minutes or so- just every time I update anything, even if it's just editing punctuation- and always giving her opinion and telling me what she thinks. Or possibly-probably just telling me what she knows I want to hear. IJLTG, JEN!!

And of course, all my NFs and the kind people of the HC for their patience and help and suggestions and advice and criticism and comments and compliments (:

Link Backs

Affies

Affies

YES!

About

Before You Start...

Getting Started

Colors/ Hex Codes

Backgrounds

Divs

Borders

Fonts

Font Weight

Links

Headers

Margins

Padding

Changing Text Areas and Scroll Boxes

Absolute Positioning

Page Anchors

THANK YOUS

Quick Jump

The Page

Fonts

More

Can't Find It?

To Add: