CSS INTRO: COMPLICATED AT FIRST, THEN MUCH SIMPLER

"CSS": it stands for "Cascading Styel Sheets." A "style sheet" is any organized document that puts forth rules for the appearance and grammar of text documents; in HTML, it's less about grammar, and more about controlling format by setting rules for the various elements (such as tags) in an HTML document. With what you know now, you can go inside a paragraph, let's say, and change the text appearance with a <font> tag. With CSS, you might choose, instead, to code the <p> paragraph tag itself to carry the text appearance info … and make EVERY bit of text within EVERY pair of paragraph tags change. Wow. Powerful. You have to learn it, which is a drag, but once you do, you can instantly format large chunks of your pages.

Incidently, CSS is at the heart of "Dynamic HTML" or "DHTML" which is HTML code that actually can be dynamic, that is, be animated and respond to user input. We won't learn that aspect of it. Personally, when I want that kind of animation and interactivity, I use Flash, which can do it better.

CSS INFO IN THE "HEAD" PORTION OF THE PAGE

Mostly it's in the head. Actually it can be written "in-line" as well. We'll start with writing it in the head, between tags that look like this: <style type="text/css"></style>. This code tells the browser to watch for text formatting cues written in the CSS style.The code below goes in the head, in between our style tags.

WRITING CSS TO FORMAT ALL YOUR PARAGRAPHS

The first kind of CSS formatting we'll learn is how to name a tag type, then write simple code that formats the text that appears within it. We'll do the paragraph tag first. Take a look at this CSS paragraph code:

p {color:#000000;font-family:times,times new roman,serif;font-size:12px}

What's the code do? the "p" addresses the code to all <p> tags on your page, and tells them to use what's between the "{}" or curly brackets to format the text there. This code sets font color to black, the font face to either Times, Times New Roman or at least to a serifed font, and sets the font size to 12 pixels. Compare it to a similar HTML font tag:

<font color="#000000" face="times,times new roman,serif" size="12px"></font>

Instead of "=" signs, CSS uses ":" colons. Instead of a space between attribute names, CSS must have have a ";" or semi-colon. HTML must have quotation marks around attribute values, while CSS does not need these. The other difference is that in CSS, instead of "font face", it's written "font-family". (NOTE the dash -- CSS doesn't like spaces in its expressions for the most part.)

BTW: Look at the "12px" in both lines of code: this, again, means "12 pixels." Pixel units are the units that remain the most uniform in size across all platforms, since they name font size in terms of the pixels on a user's screen. I recommend them.

TO WRITE FOR A TAG, JUST GET RID OF THE CARETS ("< >"); so it's p, h1, span, div, etc.

OTHER CSS ATTRIBUTES FOR A TEXT

• weight -- written {font-weight:bold} set to "bold", bolder","boldest", "lighter" or a value between 100-900.
• style -- written {font-style:italic} -- set to "normal", "italic" or "oblique".
• variant -- written {font-variant:small-caps} -- set to "small-caps"
• word-spacing -- kerning: space between words, written {word-spacing:8px}
• letter-spacing -- kerning: space between letters, written {word-spacing:8px}
• line-height -- leading: space between lines of text, written {line-height:10px}, the value can also be "2" for double-spaced or "3" for triple-spaced, etc.

WRITING A CSS "CLASS"

Don't panic: all this means is instead of writing directly to a type of tag, you can create a "class" of format that can be applied to anything. You can call this class anything you like. How about "big"?

.big {color:#000000;font-family:times,times new roman,serif;font-size:12px}

I've just created a class called "big" that can be applied to any tag that can take a "class" attribute (yes, including a paragraph tag) with the same attributes as the CSS above for a paragraph tag. NOTE: check out the dot in front of the word "big" -- that's to tell the browser that "big" is not a tag name, it's a class. To apply it, I just click inside a tag, hit the space bar, and I get the usual drop-down boxes. From the list, I choose "class" as below.

Then when I double click "class", it's added to the paragraph tag, I get the list of all the classes I've created to choose as the attribute value. I choose "big." Easy.

CREATING A "LAYER" OR ABSOLUTE POSITIONING

Won't spend too long on this, but objects can be created that can be stacked! And positioned "absolutely"!

Go to Insert > Layer. This will created a bounding box in the page view that is really <div></div> tags in the code view. The code looks like this:

<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 415px; top: 1524px;"></div>

Anything you put between the "div" tags can be grabbed and moved around the page. Look where it says "position:absolute" -- look, it's CSS. the pixel values are taken from the upper-left-hand corner of ANY browser window. You can also type in "left" and "top" values by hand. The "z-index" refers to they front-to-back postition of objects or layers. The bottom of the stack is 1, and layers on top of it are 2, 3, 4, etc. In our example, the z-index:1.

USING IN-LINE CSS TO STOP A BACKGROUND FROM TILING

Normally, when you ask for a background image in the "head" tag, you get the image all right, but you also get the image repeated again and again; this is called "tiling". You can write a simple bit of "in-line" CSS to stop tiling and give your page one single background image. "In-line" means that the code is in the same line as the tag, not up in the "head" section of the page. Right in the body tag, write "style="background-repeat:no-repeat"" before you write your background image attribute. The whole thing looks like this:

<body style="background-repeat:no-repeat" background="images/bkgds/home_bg1.gif" ></body>