Dang, but it took me forever to learn CSS. Maybe I should have used a book. Here, I'm going to share with you the hard-found knowledge.

What is Cascading Style Sheets (CSS)? It's a way to separate the way a page looks from the the underlying XML, which roughly describes the structure of the document.

That's vague enough to say nothing at all! Here are some applications for CSS that describe how you might use CSS. Maybe this will clarify how CSS works, and be a starting point to understanding.

- You can alter the "look" of a site by changing only one file, called a style sheet.
- You can manage all the fonts and colors in one file, making it easier to have consistent colors across pages.
- You can group your page elements into "classes" and identify these elements in your HTML with the "class" attribute.
- You can apply styling to single elements on a page, identified by the "id" attribute.

[b]Developer Perspectives[/b]

If you program in a web language like PHP, you can use CSS to avoid putting boldface, italic, and font tags in your output. You'll often use the "style" attribute to format your output.

If you like fancy layouts, you can use CSS to move your boxes around the page, without using tables. You generally use the "id" attribute to do this.

If you are into Javascript, you can manipulate the CSS attributed in real time to move objects around the page, or to hide and show elements. You will use the "id" attribute a lot, and the Javascript GetElementByID() function to get a reference to the tag.

[b]Linking versus Embedding[/b]

You can link a style sheet by using the following tag in the HEAD:

<link rel=StyleSheet href="style.css">

You can also embed a style sheet like this:

<style type=text/css>
</style>

Which to use? Usually, the linked is preferable because it can be used across pages, and also gets cached, so you save on download time. Of course, there are some things that apply to only one page, and then, you might want to embed it. This is not a clear-cut answer, though, because you may want to put some infrequently used styles in the linked sheet, just so it's in one file.

The most common thing that exists on only one page is a box of text. Here's some code that defines a box that sits to the right of the text.

<style type=text/css>
#sidebar {
width: 130px;
float: right;
}
</style>
<div id=sidebar>
This is the sidebar text.
</div>

Of course, you probably want all the sidebars to look the same on all your pages. For this, you can use a linked style sheet. Here's the code for a linked style sheet, [b]style.css[/b]

.sb {
font-size: 130%;
font-weight: bold;
margin: 10px;
}

You can link this into the document with the link tag:

<link rel=StyleSheet href=style.css>
<style type=text/css>
#sidebar {
width: 130px;
float: right;
}
</style>
<div id=sidebar class=sb>
This is the sidebar text.
</div>
This is the actual text of the article.

That's right: you can link and embed in the same document. The styles defined later override those defined earlier.

Note the addition of the "class=sb" attribute. That will cause the .sb styles to be applied. The "." seems to mean "class"... kind of like object oriented programming, or something. The "#" means the identified object, kind of like the # in URLs means a specific anchor in the text.

Anyway, the effect of the above is to create a sidebar box with larger, bolder text, and a 10 pixel margin so you get some white space. The box is 130 pixels wide, and will float to the right of the text below it. The text will wrap around the "float".

[b]A More Trippy Situation[/b]

Suppose you want two pull quotes. You can use the "#" to refer to each separately, and style each slightly differently (below, one floats left, the other, right).

<link rel=StyleSheet href=style.css>
<style type=text/css>
#sidebar1 {
width: 130px;
float: right;
}
#sidebar2 {
width: 130px;
float: left;
}
</style>
<div id=sidebar1 class=sb>
This is the sidebar text.
</div>
<div id=sidebar2 class=sb>
This is the sidebar text. Floats to the left.
</div>
This is the actual text of the article.

Another way to do this, if they are the same style, is to tack on another class style.

<link rel=StyleSheet href=style.css>
<style type=text/css>
.sb {
width: 130px;
float: right;
}
</style>
<div id=sidebar1 class=sb>
This is the sidebar text.
</div>
<div id=sidebar2 class=sb>
This is the sidebar text. Floats to the left.
</div>
This is the actual text of the article.

Note the difference in the embedded style. First, we completely ignore the "id"s of each sidebar. Second, we extend the definition of .sb, by adding the width and float attributes.

I think this shows the subtle difference between the "id" and the "class" attributes. As I used CSS more, with this understanding, I learned that there's a balance between the two. There's more on this in the next section.

[b]Using CSS from code[/b]

When you are using some programming language to emit xhtml, you should use CSS exclusively to style your output. Here's some pseudo-code with xhtml/css output:

foreach ( x in list ) {
print "<div class='bluetext'>" . x . "</div>"
}

That emits a list of items, all styled using div tags. There is one minor problem with this, though -- it uses a class for 'bluetext'. Don't use classes to define fancy styling; use them to define styles that can be applied to more than one html element on a page or across a site. We should use a class specifically tailored for this output.

foreach ( x in list ) {
print "<div class='listdata'>" . x . "</div>"
}

With the above, the designer can specify a style for .listdata, and it will only affect this output.

You can take this one more level, and put a div around the output, and assign it an ID.

print "<div id=theoutput>"
foreach ( x in list ) {
print "<div class='listdata'>" . x . "</div>"
}
print "</div>"

This can be generalized into a function, which could be written like this:

function aList( id, list )
{
  out = "<div id=" . id . ">"
  foreach ( x in list ) {
  out = out . "<div class='listdata'>" . x . "</div>"
  }
  out = out . "</div>"
}

This function would let you emit several lists, each with a unique ID. Then, in that output, you could also add the CSS code to style each block of output.

print "
<style>
#list1 {
  margin-left: 0px;
  width: 100px;
}
#list2 {
  margin-left: 100px;
  width: 100px;
}
#list3 {
  margin-left: 200px;
  width: 100px;
}
</style>
"

print aList( "list1", array1 )
print aList( "list2", array2 )
print aList( "list3", array3 )

[b]Using CSS with manual HTML coding[/b]

If you're coding a page by hand, you'll probably use more 'id's than 'class'es. Put a unique ID on every major block of HTML, then you can move it around manually with CSS.

[b]<b> or <span class="bol">[/b]

Well, that's a toughie. If you are coding HTML, you'll probably use the former.
If you are emiting output from code, you should use the latter, but linked to a style sheet.

Unlike other CSS examples, I have no actual examples. You will need to go elsewhere for these.