Cascading Style Sheets - Classifications

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
         Type and possibilities
         Background
         Text, Dimension
         Font
         Border
         Padding, list
         Classification
         Positioning
         Hyperlinks
         Misc.
         Multiple CSS
         You try it
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

In this lesson you'll learn a few very useful bits of css programming.

Showing and hiding paragraphs
It's very easy to hide everything on a page. You can specify code to hide a section as follows: In the head you'd put:

and in the body,

<div class="hide">
I bet you can't find this line anywhere else in the text.
</div>

And this is what you see:
Notice that nothing's there? I'm not sure you'll need this, but if you can find a good way to use it, let me know.

No spacing between paragraphs
I have no idea why on earth you want to do this either, but you can make paragraphs run together like single lines. (It would be much easier to just type it as one line.) Here's how it's done:
In the head you put:

and in the body,

<p class="runon">
Here is the first paragraph. Notice
</p>

<p class="runon">
that these two paragraphs run together.
</p>

And you see:

Here is the first paragraph. Notice

that these two paragraphs run together.

Picture captions
Finally, something useful. One difficult thing to do with web pages is to create a caption for a picture. It can be done with tables, but even that is sometimes difficult. Now, with CSS, it's possible. Here's how to do it:

In the head:

Ok, all that nonsense means that it will make a division that floats to the right at a width of 120 pixels. There's some padding and a border (style negotiable). Text will be centered under the picture.

In the body:

<div class="pic">
<img src="peng.jpg">
Captions, at last!
</div>

<p> This is the text. It is only here so you can see that the picture with the caption are hanging out to the right of the text.
</p>

And so you see...

Captions, at last!

This is the text. It is only here so you can see that the picture with the caption are hanging out to the right of the text.

Placing an item
You can change the position of an item to the right or left of where it would normally be. You must specify the number of pixels you want it shifted, but the code is reltively simple. Not only can this be done for pictures, but text as well.
In the head:

Here we have a heading shifted left, and one shifted right. Here's how that works in the body:

<h1>
Normal heading
</h1>

<h1 class="left">
Heading shifted left
</h1>

<h1 class="right">
Heading shifted right
</h1>

Normal Heading

Heading shifted left

Heading shifted right

Cursors

For your supreme patience in getting through this page, you get to learn how to mess with your cursors!!! This is horribly fun to do to people.

So, here's how you use these. Suppose you want to make an entire paragraph have the pointy cursor, so it looks like a link. You need no tag in the head, and only have to add one thing to the paragraph tag. Here's how you would do that:

<p style="cursor:pointer">
Your crazy, paragraph text goes here.
</p>

And you see:

Your crazy, paragraph text goes here.

Mouse over the font and you'll notice that it shows the pointer, like a ling. It's not, but it's fun to change the pointer sometimes. You can change it on a link too. Here's an example:

And you see: This is the link text

Mousing over that should produce a question mark over the link. Fun stuff. Try not to be too annoying with that.

Below are the different types of cursors you can specify. Mouse over them to see what the cursors look like.

style="cursor:auto"
style="cursor:crosshair"
style="cursor:default"
style="cursor:pointer"
style="cursor:move"
style="cursor:e-resize"
style="cursor:ne-resize"
style="cursor:nw-resize"
style="cursor:n-resize"
style="cursor:se-resize"
style="cursor:sw-resize"
style="cursor:s-resize"
style="cursor:w-resize"
style="cursor:text"
style="cursor:wait"
style="cursor:help"

This page relied heavily on W3schools.com