Learn CSS (Cascading Style Sheets)

One way to use css is with an external stylesheet, which puts all your css on a separate page with ONLY css on it. This way you only have to change one page, which is very helpful. Make a file titled css.css (or anything as long as the file extension is .css) and add the following code to each of your pages:

<link rel="stylesheet" href="css.css" type="text/css" />

If you use an external stylesheet, all you do is put in the css codes as is. This is what a sample external stylesheet would look like:

h5 {
font: bold 20px helvetica;
color:#654458;
line-height: 1px;
}
body {
background-color: #654458;
text-align: center;
}
#content {
float: left;
width: 630px;
text-align: left;
margin-top: 5px;
padding-left: 80px;
}

The alternative is an internal style sheet and it would look like this: (the only difference is the style tags surrounding it)

<style>
h5 {
font: bold 20px helvetica;
color:#654458;
line-height: 1px;
}
body {
background-color: #654458;
text-align: center;
}
#content {
float: left;
width: 630px;
text-align: left;
margin-top: 5px;
padding-left: 80px;
}
</style>

This is fine if you only have a few pages, but after a while it gets really tedious to change the css on all your pages each time you change the layout.
The last way to use css is on individual tags, called inline styling. I wouldn't recommend doing all your css like this, but if you want to for example, get rid of the border on an image link, this is easier than having to set up something in your css just for one picture. Here is an example with the css part italicized:

<a href="http://www.smileyhelper.com"><img src="kitten.gif alt="" style="border: 0px" /></a>

Coding CSS
Let's start coding some css! It's not to hard if you remember this order. It's like building a hamburger (or veggie burger :D)

1. Top bun- the selector and the opening curly bracket { (the bracket is like the bun, since we have another on the bottom, and the selector part is like the sesame seeds since they're only on the top)


2. Soy patty, lettuce, tomato, pickles, soy cheese, vegenaise, etc- attributes (you can have as many as you want of these, like getting extra condiments or patties on your burger)


3. Bottom bun- closing curly bracket }

Selectors, the sesame seeds on the top bun, are basically what controls everything in your css. You have to use a selector so the computer knows what you're trying to change. Without a selector, there is no burger (nothing will happen to your code)!

If you have a code like font-weight: bold, an attribute or the beefy stuff in the middle, that you want to add to your style sheet, you have to add a selector to it to select what you want to change about your page. Like how buns are necessary to surround a patty, you have to have selectors and curly brackets around your attributes. Here are some common selectors:

For a link... a.name {
For a div box... div.name {
For a header... h1 {
For the body... body {

There are others too, but those are the basics. Replace name with a unique name, then add a } to close that portion of the css, and then in your html (unless it is a header or the body) you add class="name". Here is what your style sheet might look like with different types of selectors:

h1 {
font-weight: bold;
width: 50px;
}
body, html {
color: #cc00cc;
}
div.potato {
text-align: center;
}

And then the code for this page might contain this:

<h1>Hello world</h1>
normal body text
<div class="potato">blah blah this is centered now</div>

So here's a basic recap: css is called cascading because it has a specific order for processing the information and if the next type of specification is present, it will win over all the previous ones. The three types of using css are external style sheets, internal style sheets, and inline styling. For coding css, you start with a selector (including an opening { curly bracket), add your attributes, and finish with a closing curly bracket }.

Using css to style your text is great, and here are some codes to help you out (these codes are for individual tags - you can just add <span> and </span> around the text if you don't have any other selectors - but you can copy the text inside the quotes for a style sheet). Example:

<span style="font-weight: bold;"> Hello world! </span>

Make your text bold

style="font-weight: bold;"

Make your text underlined

style="text-decoration: underlined;"

Make your text lined through

style="text-decoration: line-through;"

Make your text underlined

style="text-decoration: underlined;"

Make your text italicized

style="font-style: italic;"

Make your text overlined

style="text-decoration: overline;"

Make your text overlined and underlined

style="text-decoration: overline underline;"

Make your text red

style="color: #ff0000;"

Make your text bigger

style="font: 16px tahoma;"

Make your text smaller

style="font: 8px tahoma;"

Make your text uppercase

style="text-transform: uppercase;"

Make your text lowercase

style="text-transform: lowercase;"

Make your text capitalized

style="text-transform: capitalize;"

Make your text courier new

style="font-family: courier new;"

Here are some css codes you can use for styling links (these codes are for style sheets). Feel free to customize them as much as you want.

Edit your links

a:link {
font-weight: bold;
color: #ff0000;
text-decoration:none;
}

Edit your links on hover

a:hover {
font-weight: bold;
color: #0000ff;
text-decoration:none;
}

Edit your visited links

a:visited {
font-weight: bold;
color: #ff3399;
text-decoration:none;
}

With css you can add nifty backgrounds to your website. These are for style sheets and they go in between the body { } code of the css (though it is possible to also use these for headers or div boxes, among other things).

Make your background color yellow

background-color: yellow;

Set an image for your background

background-image: url('blah.gif');

Make the background fixed (not scrolling)

background-image: url('blah.gif') fixed;

Make the background repeat all over

background-image: url('blah.gif') repeat;

Make the background repeat vertically

background-image: url('blah.gif') repeat-y;

Make the background repeat horizontally

background-image: url('blah.gif') repeat-x;

Make the background not repeat

background-image: url('blah.gif') no-repeat;

Make the background positioned in a certain place

background-image: url('blah.gif') fixed;
background-position: 100px 100px;

Center the background (the other options instead of center center are top left, top center, top right, center left, center right, bottom left, bottom center, and bottom left)

background-image: url('blah.gif') fixed;
background-position: center center;

CSS can be used to change the cursor of your website. Here are all the available options, or if you make your own custom cursor there is a code for that too. Hover your mouse over the word for a preview. These are for style sheets.

Crosshair

body{cursor:crosshair;}
a{cursor:crosshair;}

Hand

body{cursor:hand;}
a{cursor:hand;}

Help

body{cursor:help;}
a{cursor:help;}

Move

body{cursor:move;}
a{cursor:move;}

N-resize

body{cursor:n-resize;}
a{cursor:n-resize;}

NE-resize

body{cursor:ne-resize;}
a{cursor:ne-resize;}

NW-resize

body{cursor:nw-resize;}
a{cursor:nw-resize;}

S-resize

body{cursor:s-resize;}
a{cursor:s-resize;}

SE-resize

body{cursor:se-resize;}
a{cursor:se-resize;}

SW-resize

body{cursor:sw-resize;}
a{cursor:sw-resize;}

W-resize

body{cursor:w-resize;}
a{cursor:w-resize;}

Wait

body{cursor:wait;}
a{cursor:wait;}

Text

body{cursor:text;}
a{cursor:text;}

Custom Cursor

body{cursor: url(IMAGE URL ENDING IN CUR OR ANI);}
a {cursor: url(SAME IMAGE URL ENDING IN CUR OR ANI);}

Divs are useful boxes that can be used to store pretty much anything, position items, or even make an entire css layout. There are two types of div attributes, ids and classes. Ids are used for making a single, unique div box (the same id cannot be used again) and classes are used for multiple div boxes (you can use the same class for many divs). Here is the code for id divs:

<div id="name"> blah blah blah </div>

And here is the code for class divs:

<div class="name"> blah blah blah </div>

You can put anything in the css for these, but here is an example for id (these goes in between your style tags or on your separate css page):

#name {
width: 200px;
height: 200px;
background: red;
align: right;
}

And here is the same style sheet code but for a class div:

div.name {
width: 200px;
height: 200px;
background: red;
align: right;
}

So you see the only part that makes them different is the # and the div. method of defining them.
Most of the normal css codes work for divs too, plus you can have padding in the boxes and borders around them. You can also use divs as a place to store your links or images so they have a creative backdrop.

Div Positioning

Another handy feature of div boxes is being able to position elements on a page. Just add this to your div code in the css:

position:absolute;
top:0px;
left:0px;

Top is how many pixels away from the top you want the element to be, and left is how many pixels away from the left you want it to be. You can just put in approximate numbers and adjust from there (100 pixels is about 1 inch square). It's that simple.
If you need a point of reference for help with the numbers, this is what 100px by 100px looks like:

Note: If your layout is centered, this won't work because centered is at a different spot depending on the browser size.

Scrolling Div Boxes

You can also use div boxes to make scrolling div boxes (or blogs, or scroll boxes) simply by adding overflow: auto; to the css. Just add this code between the style tags or on your separate css page:

div.name {
width: 200px;
height: 100px;
background: #ffff99;
overflow: auto;
}

And then to make the div box show up, add this code where you want the box to be:

<div class="name"> blah blah blah </div>

Blogs

You might have seen blogs that look something like this. It's just a graphic combined with a scroll box. For these it's easier to use the css right with the html instead of using an external style sheet like before. (:



While you can use tables along with a scrolling div box to accomplish this, that's a real pain in the tushy and an easier way is to put a scrolling div inside of another div. Start with this code. We're going to put the image url for the graphic in the background of a div. Also replace HEIGHT HERE and WIDTH HERE with the height and width of your graphic.

<div style="background-image: url('IMAGE URL HERE'); height: HEIGHT HEREpx; width: WIDTH HEREpx;">
</div>

In between the tags (in the blank space) we're adding a simple scroll box with div positioning in its css. Now we're combining lots of codes! Here is the whole code:

<div style="background-image: url('IMAGE URL HERE'); height: HEIGHT HEREpx; width: WIDTH HEREpx;">
<div style="width: 323px; height: 135px; position: relative; left: 25px; top: 135px; overflow: auto">Your snazzy text goes here</div>
</div>

If you look closely you can see that instead of using position: absolute like we did before (see 'Div Positioning' above), we're using position: relative. Absolute positioning makes the div go somewhere specifically on the page, but relative positioning lets you position something in regards to its position inside the other div. For us this means that we can put it wherever we want on the blog graphic.

I have the numbers that go with the example gummy bear blog in the code, but yours will be different. Just experiment with changing the width, height, left, and top of the inner div until you get it positioned correctly (hint: at first, change the number by 10 or 50 px at a time and refine it from there). The height and width are for the dimensions of the scroll box, and the top and left are how far away from the top and left it is positioned on the blog.

Probably the most useful function of divs is for css layouts, which is what we'll get to in another tutorial.

All right, so if you want to make a website layout using css and minimal html, divs are the way to go. I'm going to assume you already have the basic code for a webpage, and this will just go into the body section.

We'll be making a centered two column layout like this one, though with a little experimenting you can get other types of layouts too (such as using percentages instead of pixels for a fluid layout). We start off with a container in the style sheet to hold everything and center the layout. Remember, these codes can be changed, such as the width and background color. We will also add a centering code for the body.

#container {
margin: 0px auto 0px auto;
width: 900px;
background: #ffffff;
}
body {
text-align: center;
}

Next we need the left column, content column, and a clearer so the layout isn't cut off short.

#leftside {
float: left;
text-align: left;
padding: 15px;
width: 200px;
background-color: #ffff99;
}
#content {
float: left;
text-align: left;
padding: 15px;
background: #fff;
width: 640px;
}
#clearer {
clear: both;
}

Now in your regular html you add this code, which has the container, the left side, and the clearer.

<div id="container">
<img src="website banner here" alt="" />
<div id="leftside">
left side
</div>
<div id="content">
text here
</div>
<div id="clearer">&ampnbsp;</div>
</div>

Now just add your css and content like normal, and that's all there is to it!

Faux Columns Cheat

If you want your columns to extend down all the way with color, you'll need to make an image that looks like the layout and make that the background of the container.
If you are using the layout on this page, this image will work for the faux columns (if you highlight the image, you'll see that it's actually 900px wide). Otherwise adjust it as needed (and feel free to change the colors). The left side should be the same width as your leftside div.
When you have an image that works, add it to your container:

#container {
background-image: url('image address here');
}