. . . . . . . . .

Welcome, guest, to so you think you can code? Since you're here, you must be looking for a nice guide so that you can learn how to code your own unique layouts. Am I right? Well, you've come to the right place. Here, you will learn everything you need to know and more. The guide is broken up into sections, so you have the freedom to read from beginning to end or jump around however you please. But before we begin, let's go over a few things.

this page;; was coded entirely by me, captain_kode, and I would appreciate it if you did not steal my coding.
firefox;; is the browser I use, therefore this page looks best in it. IE works too, but I'm not sure about other browsers.
disclaimer;; I do not guarantee that all of these codes will work if you do not use FF. Also, what you can do is not limited to the contents of this page. The more I learn, the more content this guide will have.

» U p d a t e s «

getting around

Use these links to get around if you're feeling jumpy.

back to top?

getting started

First, you're going to need to know how to build a code. Here's how to do so. A CSS code looks like this:

style;; All CSS must be between STYLE tags. Note that the way you see it is not technically correct, but because of neo's filter we must use it instead. The correct way has no spaces.
selector;; The selector is the name of the HTML tag that you are editing. For example, body, or p.
property;; A property is a specific part of the selector you want to change. Things like font and background.
attribute;; The attribute tells the property how it should look. Things like bold and 100px go here.
curly brackets, colons, and semicolons;; These are all very important. Forgetting to include one could ruin your whole code. Curly brackets must enclose properties and their attributes, colons must follow properties, and semicolons must follow attributes.

» t i p s «

» Multiple properties can go inside curly brackets. Just be sure to have a bracket before the first property and after the last attribute.
» Only one pair of style tags is needed. They should be at the top of the page, with HTML and content under, to make it more organized.
» Short on character space? The code doesn't have to be organized this way, it just makes it easier to read. There doesn't have to be any spaces or line breaks between anything, except for shorthand CSS. But we'll get to that later.

back to top?

shorthand

CSS shorthand is very useful for lowering the character space of your CSS and getting things more organized. What it does is combines all properties of a certain type (ex "font") into one line, with spaces separating each attribute. More on shorthand with the first example, in the next section.

back to top?

backgrounds

Backgrounds can be attached to pretty much anything. Tables, text areas, even text. Here is everything you can do with backgrounds.

color;; adds a plain color background. Hex codes (# followed by six letters/numbers) or common color names (red, black, etc) can be used. Transparent is default.
img;; specifies a certain image to be used as the background. upload an image and insert the "direct link" url inside the parentheses. No image is default.
position;; indicates where the background will be placed, from the top-left corner of it's selector. Use top/center/bottom followed by left/center/right, (horizontal)% followed by (vertical)%, or (horizontal)px followed by (vertical)px. (ex: top center; 5% 10%; 20px 14px). Top left is default.
attachment;; determines how the background will scroll. scroll makes it scroll with the content, and fixed makes the content scroll over it. Scroll is default.
repeat;; determines if the background will repeat. repeat makes it repeat both ways, repeat-x makes it repeat horizontally, repeat-y makes it repeat vertically, and no-repeat makes it not repeat at all. Repeat is default.

» s h o r t h a n d «

The background properties have a shorthand code that looks like this: example;; Say you want "body" to have a red background with image "http://neopets.com/myimage.png" in the center of the page that doesn't repeat, while the content scrolls over it. The code would look like this:
body {background: red url(http://neopets.com/myimage.png) no-repeat fixed center center;}
That would give you the effect you want.

» t i p s «

» Both colored backgrounds and images can be used together. On a slower computer, the color will be displayed until the image is loaded.
» It most cases, a fixed (attachment) background is better than a scrolling background.
» Where to upload? Photobucket, Imageshack, and Tinypic are all good choices.
» If you are happy with the default attribute, the property does not have to be mentioned.

back to top?

link back and contact

Did you find this guide useful? Have a comment, some feedback maybe? I'd love to hear it. Maybe there was something you didn't get or have a question? Ask away.

Wanna link back to this page? I'd appreciate it! Just grab one of these nifty buttons.

back to top?

listers and affies

You can find me on these pages. Directories on top, affiliates on bottom. Wanna be an affiliate? Neomail me with your name and site name/url. I'll add your button when I see you've added mine. Your button must be 88x31 to be added.

back to top?

reviews and awards

Check out my scores and awards!
Hover over for details.

so you think you can code? © koda (captain_kode)
established tuesday, august 4th, 2009
page hosted by neopets