Hello!And welcome to my tutorial. This tutorial is a pretty extensive guide to CSS, and it's still being edited and improved upon, so if you have any suggestions then go ahead and neomail me! Anyways, before you jump into my little guide here, there are some ground rules you should be aware of.

1. You need to have a fairly in-depth understanding of HTML. If not, I suggest brushing up on your HTML skills.
2. I'm wordy. If you hate reading, go watch tv or something.
3. This tutorial is meant to be read through. That means that sections which appear later in the tutorial assumes you have read through earlier sections already. Obviously, you might not have done that, but if I start talking about classes and IDs and you haven't read either of those sections and you're clueless, then you might want to go back.

Now that that's out of the way, I hope you learn something new today!

next section

Updates

11.21 I have a new affiliate, Caelum, a premade page and also a guild, as it turns out. She has some excellent premade pages, so her site is definitely worth checking out. I also got listed in another directory, The Neopian Directory. Nice, simple, straightforward. Good stuff. Also listed in another promising directory, Paper Thin! Very cute, and very promising.

10.07 Grr, Neopets' code filter is really starting to bust my bubble. It's getting a little too unreasonably impossible to make decent coding now and it's making me use really nasty inline styles to get around it. But on a happier note, I am Converse Allstarz Site of the week! Hooplah! I've also been listed in Landslide, a directory dedicated to all things CSS! Check both those directories out, because they are super helpful.

09.05 Received an award from Converse AllStarz Directory for being Leena's affiliate! I added it to the contact me page, because there wasn't much on that page to begin with.

08.30 Added a new affiliate, Visions! It's a really great site about how to make a petpage site. You should check it out if you're interested. I also dedicated an entire section to z-indices since lots of people have been asking questions about that. Woohoo!

07.27 Alright, just to make it official, I'm going to be taking a hiatus from this site. Don't freak out; I'll still be on neopets semi-regularly to check neomail and such, so don't hesitate if you have a question or want to become affiliates. But I'm not going to be working on this page until...well, I don't know when. If you have any suggestions for future sections, let me know! In the meantime, check out my affiliates!

06.20 Look! New layout! I promised it would happen, did I not? I finally figured out what the problem was. I had added a new section that, to make a long story short, was messing up my beautifully constructed code, haha. Anyways, hoping to impress more people with this new stylish layout, get more affiliates, listed in more directories, the whole shebang. ^^ I also cleaned out affiliates who had secretly removed my link from their site or led to deleted pages. Somewhat.

06.17 I'm back! These last few weeks have been really busy, and I was out of town for one of them too. To start things off, I have two new affiliates and a new layout coming soon! Hopefully by...sometime this week, haha.

05.25 Got listed in another wonderful directory, Miss Leah's Lovely Links. I'm thinking about opening a premades site, but first I have to actually make some usable premades. If you have any suggestions, please neomail me! I'm mostly thinking in asbtract concepts, like color schemes or layout styles, not necessarily "I want Harry Potter!" I also can't wait until I can really start getting the word out about this tutorial. I'm an optimist nowadays.

back | next section

Introduction to CSS

In order to understand CSS, you have to have a basic understanding of HTML. Why? Because CSS defines HTML properties. You see, for those who don't already know, HTML uses various codes to create "content." There are codes that create paragraphs, codes that create tables, etc. CSS simply takes these various codes and "defines" them; it gives them attributes and changes their colors and sizes, and then whenever you wish to use a table, instead of retyping all of those tiresome individual codes, you can just use CSS to modify everything for you everytime you use it in your content! This keeps your page nice and neat, and instead of having to go and search through your content to alter your code, you can just go to the CSS and alter that, and voila! your page is now complying with the new CSS.
Why would anyone use CSS? The answer is that CSS allows web designers and other such kinds of people to keep their coding separate from their content. You see, we define content as the part you actually want people to see and read. All of the words and examples in this tutorial is content. In HTML, if you wanted to make your content pretty, you'd have to use lengthy codes and you'd have to repeat them, and if you ever wanted to change them you'd have to go through all your content...it's a hassle. HTML coders know. That's why we have CSS! Yay!

back | home| next section

The Basics

I just realized I never defined CSS. I'm such a silly goose. CSS stands for Cascading Style Sheets.

Cascading: Your webpage follows a list of cascading-ranked in order- styles it will follow. The first and least important one is the web browser's default web sheet style. We all know how cute THAT is. *sarcasm* This style can be overriden with an external style sheet, which uses a .css extension and can be applied to multiple pages at a time. An internal style sheet can override the external, which is the type of style sheet you'll use to code on neopets. Inline style is the most important, so it overrides any previous style. Inline styles generate messy codes, however, so try to avoid them. Besides, anything you do with an inline style can be done in an internal or external style sheet.

Style: In the introduction, I mentioned that CSS defines HTML. Well, it's giving it a style-that is, what it defines about the HTML is borders, backgrounds, fonts, etc. Various html codes get styles. These styles are made up of three parts: the selectors, the properties, and the values. Here's the breakdown
continue

Continued

selector {property:value}

When you want to combine multiple selectors, use this:
selector1, selector 2 {property:value}
To do multiple properties, you can do this:
selector {property1:value; property2:value}
Example:
td {color:000000}

Note that the selectors are separated by commas and the properties by semi-colons. The example would make the font in all of your tables black.
Sheet:Almost self-explanatory. It's a metaphorical sheet of coding. Specifically, awesome CSS coding. :P All your coding will go in-between the style tags.

back | home | next section

Classes

Sometimes we want to have two or more styles for any given selector. For example, there are two styles of links on this page: the ones that are here in the content that say 'home' and the ones in the navigation menu. But if you only have one selector, how could you possible have two styles?
The answer is classes. Classes are preceded by a period and are meant to be used more than once on a page. I have two classes of links. In your CSS classes will look like this:

selector.class1 {property:value}
selector.class2 {property:value}

Then, in my HTML code, I specify which class I want by adding it like so

You can name the class whatever you want, as long as you keep track of what they are called. Note that when naming the class in the HTML code there is no period.
Classes don't always need a selector in front of it. (Some properties overlap and can apply to various selectors. In this case, simply writing .class {property:value} will work to apply the same effect to a table, div layer, etc.)

back | home | next section

IDs

IDs are used only once in your coding. The # symbol comes before naming an ID. The only real difference between classes and IDs is that IDs are meant to be used once and only once. If you try to use an ID like a class and use it more than once, your coding will mess up and your page will end up looking pretty weird, not exaggerating. IDs do not have a selector name in front of it.
Other than that IDs work the same as classes. You list all the properties and values in { } brackets. Here is an example of what it looks like in CSS and how to apply the id in HTML.

back | home | next section

Inline Styles

Inline styles just stink altogether, really. Why? Well, as we've already discussed, a major ramification of CSS is that it keeps the majority of the coding separate from the content. Inline styles, however, are little bits of CSS code inserted into your content. Sometimes inline styles are the most reasonable route of coding any given element. But they're very frustrating, because if you want to change your content you'd have to hunt through your content to change that style...and yeah. Only use inline styles when necessary. Other than that, inline styles work similarly to regular CSS codes. Just use whatever properties for the specific element you're modifying. Oh! By the way, an element is just an individual object of a selector. It's an individual table, or an individual link, etc.

back | home | next section

Backgrounds

Backgrounds are so vital to making a page look polished and put together, it's hard to believe I almost left this section out. Shocking I know. The best way to make your pretty background to show up is to use the body selector. The body selector is really broad and usually only used for adding backgrounds or, for IE users, the cool scrollbar effect. I've not included the scrollbar because, well, I'm lazy.

body{background:#color;
background-image:url(image.url);
background-repeat:repeat-x, repeat-y, none(backgrounds automatically tile);
background-attachment:scroll, fixed}

back | home | next section

B/U/I

Alright, this is a neat little trick to add some spice to your page. Have you ever wondered how to make your bolded words or italicized words or underlined words a different color? Well, you can do this using CSS. You simply use the b selector to affect your bolded words, the i selector for italicized, and u for underlined.

b {color:[this will be the color for your bolded words]}
i {color:[this will be the color for italicized words]}
u {color:[I think you've got it :D]}

You can actually apply any of the font attributes to your bold/italicized/underlined words, too.

back | home | next section

Margins

Margins exist around elements. This means that a margin can create space to separate the text from, say, an image by using a visual border of nothingness. The margin properties are inserted inside the selector that should have them. If you wanted a margin around a table, for example, your code would look something like this:

td {margin: insert a number here[cm, px]}

Margins can also be separated and dealt with individually, like so:
td {margin-top: this will modify the top margin;
margin-left: insert numerical value;
margin-right: insert numerical value;
margin-bottom: insert numerical value}

If you want to apply the same margin property to various selectors, all you would have to do is set the margin into a class unto itself. Otherwise, the default margins for Internet Explorer, Firefox, Netscape, etc. are 8px. Note! Opera, the internet browser kind, does not have a default margin of 8px but a default padding of 8px. The next section deals with padding.

back | home | next section

Padding

Padding is very similar to margins, except that the space is inside the element instead of outside. But other than that, it works pretty much the same way. It creates a visual border of nothingness inside the element.

td {padding: insert numerical value;
padding-top: insert numerical value;
padding-left: insert numerical value;
padding-right: insert numerical value;
padding-bottom: insert numerical value}

Please be aware that if you want all padding on all sides to be equal, you don't need the separate distinctions like "padding-top" and vice versa.

back | home | next section

Fonts

Fonts are pretty exciting, not gonna lie. After all, that's what most people look at. Sure, some may appreciate your visually asthetic graphics, but most take it for granted and proceed to read on. Luckily for me, most people who read this page WOULD appreciate visually pleasing graphics. :)

But anyways. Font properties can be listed in any selector that has text in it. You have tables, div layers, stuff with word in them? By placing these text-specific properties you can alter the text only inside tables, etc. The font selector is a general selector for any and all text.

font {font-family:insert a font name here, like arial or comic sans ms;
color: the color your font will be;
font-size: insert a number here, either a single digit such as 1 or 2, or a px value such as 12px;
letter-spacing: literally, affects the spaces between the letters. uses units of pt, so 3pt would be what appears in your code;
text-decoration: underline, line-through, etc;
text-transform:uppercase/lowercase [makes all your text either in UPPERCASE or in lower case letters]}

back | home | next section

Positioning

Positioning is possibly one of the most vital parts to any code, and it generally gives me a headache, especially when it starts to get a little iffy. -_- Nonetheless, positioning will make or break your page; either everything will be nice and organized or crazy and overlapping. Thankfully sometimes the hecticness will come from your actual content itself, and you won't have to revise your CSS completely.

selector/ID/class{position:absolute, relative, fixed;
top:percents, pixels;
left:percents, pixels;
right:percents, pixels;
bottom:percents, pixels}

Absolute: Easily the most commonly used type of positioning, it keeps whatever you specified a position for in that spot on your webpage. Done. Easy as pie.
Fixed and relative positioning are discussed in a later section.

back | home | next section

Borders

Borders can go on pretty much anything you want. The real decision is whether or not it is visually aesthetic to use a border. Borders can go around tables, images, link, headers, the whole shebang. You can place these properties inside a certain selector, or make a class for borders of this style. You can also isolate borders similar to the way we isolate margins or padding. I only showed the top border isolation.

border-style:solid, double, dashed, dotted, groove, ridge, outset, inset;
border-color:self explanatory;
border-width:I usually specify in px, though you don't have to. 5px is a pretty standard border width;
border-top:blah blah blah;

back | home | next section

Images

Sometimes, especially if you have a page that utilizes a lot of pictures, this selector is pretty vital to getting everything to look right. This selector will affect all images, though, so make sure you add a class if you only want certain images to get special treatment. Other than that, images can have lots of cool effects. They can be resized so that they are all the same, have borders, etc.

But my personal favorite thing to do with images is to make them float! Floating allows you to have an image off to the side without interrupting your text. Like that beautiful green circle is doing over to the left. I demonstrated a use of the float property in my example.

img {border:0;
float:left}

back | home | next section

Relative/fixed

Alright, these two positions are a little less common so I've decided to dedicate a section explaining what they do and how they differ from the easy one, absolute positioning. Fixed positioning essentially does the same thing that absolute positioning does; it places an element wherever you want it to appear and it will remain there regardless of scrolling. However, older browser versions sometimes don't actually respond to this CSS command, especially notable with old IE versions, hence absolute positioning.
Relative positioning is an odd concept. Your elements are positioned relative to where they would normally appear. So how does it work?
continue

Continued

Alright. Get your element in its "normal" position. You'll have to specify that either with absolute or fixed positioning. Since I used links, links will make up my example.

a.normal:link{position:absolute;left:50px}

Now, I want my next link to appear to the left of my original. That means I'll need a negative position. The greater the absolute value, the farther left it will go.

a.left:link{position:relative;left:-20px}

And if I want it to go to the right, then my positioning will have to be positive.

a.right:link{position:relative;left:20px}

Phew! That was a mouthful.

back | home | next section

Headers

Headers go before paragraphs as...well...headers. I mean, that's pretty self-explanatory. See the decorative image that reads "Headers" right above this? Well, I did that using the h1 selector. Anything that you can do with font you can do with a header. In the example I show how you would place the style within your CSS and how you would specify what kind of header you want. That way you can use multiple awesome headers, and alternate, and be all cool...I'm excited about the possibilities. :D

back | home | next section

Links

Links are really, super exciting because they are the means through which we navigate the web. Pretty importante, no? Well, here is how you can make your links specialized and custom-tailored to your own layout's scheme. Also, to learn how to make links different, such as the links in my navigation menu and the links here in the content redirecting you to the top, visit the classes section.
Other than that, links can have borders and any and all of the cool attributes fonts can have.

a:link {color:#000000;text-decoration:underline} [This will affect how your links look on the page]
a:visited {color:#000000;text-decoration:strike-through}[this will affect how your links look when they have already been clicked]
a:hover {color:#000000;text-transform:uppercase}[this will affect how your links look when the mouse is over them]

back | home | next section

Lists

Lists in the CSS world refer to bulleted lists. If you ever need to make a special bulleted list, you can either change the appearance of your very own bullet OR substitute it with your own image! Here we go.

ul{list-style-type: this will affect the appearance of your bullet using css only; [disc, circle, square, none, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha]
list-style-image:url(this is where your image url goes);
list-style-position:inside/outside[changes how much your list indents. inside=more indentation]}

back | home | next section

Tables

Tables! Tables are quite possibly my favorite things in the world. Well, at least when it comes to CSS. Tables provide an understandable way of presenting and organizing your content. So, tables are special when you apply the table selector because tables have cells. When it comes to cells, the padding will affect how much space is in-between your cells. Keep that in mind when your table looks wonky because your internet provider adds its standard cellpadding.

The td selector affects cells. The table selector affects tables in general.
td, table{color:#000000;
font:12px arial;
padding:5px;
border:2px solid}

back | home | next section

Div Layers

Div layers are a really popular and easy way of creating and organizing your page. Because they are layers however, you have to be careful how you order them in your CSS. If a div is placed farther in the code (closer to the content), then it will be more important. To get them to overlap, using a z-index will work wonders. 0 is the default. -1 makes it less important, and 1 makes it more important. To refresh on what cascading is again, check the basics again. Most people classify or identify their divs instead of using the div selector, but just in case I've created examples of all three.
continue

Continued

The Div Selector
div{background:ffffff;
width:400px;
overflow:auto}

Classified Div
.div{border-style:solid;
border-width:10px;
border-color:ffffff}

Identified Div
#div{
z-index:2}

back | home | next section

Z-Indices

By the way, the plural of "index" is "indices". So, this section is all about explaining z-indices a little more in-depth than the way it's worded in the Div Layer section.

A z-index is a property that can be attributed to any element. However, unlike most properties, where a unit such as px or pt needs to be added, a z-index is just a number without any kind of unit. It assigns a level of importance to whatever has the property. Z-indices can be negative, positive, or 0. 0 is the default index. We use z-indices to make everything appear the way it's supposed to. For example, the image in the background that has my site's title "How to Speak CSS" has a z-index that makes it less important than this div where all my content is. Continue

Continued

This is how you add a z-index to your CSS:
selector{z-index:1}

A negative z-index makes an element less important. A positive z-index makes an element more important. Z-indices can be attributed any number in either direction. So, here's a few possible z-indexes ranked in order from least to most important.

z-index:-10 [LEAST]
z-index:-5
z-index:1
z-index:8
z-index:12 [MOST]

back | home | next section

Selectors

This is a fairly extensive list of some common selectors. I haven't included any possibly classes or IDs, because then there would be an endless amount of possibilities. So...here it is!
font
body
td
table
p
img
h1 (and h2, etc.)
input
textarea
a:link
a:visited
a:active
a:hover
div

back | home | next section

CSS Vocabulary

Here is a reference list of some CSS vocabulary. These are all covered in the tutorial, but if you just need a quick explanation, then this is the place.

element: a given object on a page
property: an attribute for a selector
CSS: Cascading Style Sheet
cascading: following an order or hierarchy
selector: the overarching term for a type of element
value: the varieties of a property
HTML: hypertext markup language
style: a combination of properties given to a selector to customize the selector

back | home | next section

Link Back

Would you like to link me back? Aw, shucks! Thanks. :D Here are the copy/pasteable codes.
made by me
<a href="/~KiwiDoll"><img src="http://img.photobucket.com/albums/v227/dotted_green/CSSbanner.gif" border="0"></a> courtesy of Donatellia! <a href="/~KiwiDoll"><img src="http://i289.photobucket.com/albums/ll206/wolftamer_kisa/HowtospeakCSSfinished.gif"></a>

Plain, good ol' text link
<a href="/~KiwiDoll">How to Speak CSS</a>

back | home | next section

Contact Me

If you've spotted anything inaccurate, such as claiming that p and td are the same thing, or any typos (I usually type you instead of your) or you have a question OR you feel I should add something to my tutorial, feel free to neomail me!
Send me a neomail? Yes.
AWARDS

Well, I got an award! So I had to put it somewhere, and this page was rather empty. So here they go! Drag and drop to the address bar or right-click-properties-copy the url.

Award from Converse AllStarz

back | home | next section

Affiliates

These are all the websites who are affiliated with me! If you're interested in becoming my affiliate, please fill out the form below and send me a neomail .
I'm currently looking to be affiliated with basically, any site that offers a service, not an informational page. I'm also starting to become pickier about who I affiliate with- I prefer quality over quantity.

Please know I will add your link after you add mine! You don't have to add it before you are actually my affiliate, though. :)