Tutorial #9:
The Basics of CSS

Other tutorials
The Basics
The Basics - Part II
Working With Text
Text - Part II
Making Links
Images
Lists
Tables
CSS
CSS Text Control
CSS-P
Frames
Forms
JSS
Layers
Colors
Marquees

CSS (that stands for Cascading Style Sheets) is a nifty application that is rather new and was released with HTML 4.0. It is not widespread yet, but it will be big someday.

Do you want an example of CSS? If your browser supports frames, look at the header. The yellow background, font size and face are all aspects of CSS.

WARNING!!

Let me tell you that I am not an expert at this. It is very new to me, and what I am going to show you just scratches the surface of what you can do.

Okay, that's over with. Now, back to the CSS... (By the way, 'warning' was CSS)

General Information

The stuff that you define to show later goes in between the <head> and the </head> tags. In between those tags, this is necessary:

<style type="text/css">
<--
Your CSS stuff goes here
-->
</style>

You'd probably like me to translate that for you. Okay, the first line defines what is going on. Style type means the CSS type is being defined. text/css says that text is going to be modified using CSS. the <-- and --> make the text "invisible". And of course, </style> finishes off the whole deal.

What about the content?

There are different ways to make CSS to work. The first is to take an HTML tag that already exists and change it. Have a look...

Confused yet?

Okay, right off the bat, let me tell you this: If you use the body tag in CSS, you are controlling everything on the web page, so son't use it unless you really want to.

You should know what the body tag is now. The word 'body' is known as a selector. Other selectors include img and a. You can use CSS to modify what these selectors do. Now, don't confuse selectors with attributes. img is a selector, while src, width, height, and name are attributes. Your CSS must always have the little curly braces at the beginning and the end of the definitions, as seen above.
The first thing that I put in the definition is font-size: 16pt;. One of the nice things about CSS is that you can define a font size just like in a program like Microsoft Word. It is not limited to seven font sizes like in HTML. You could put in 150pt or 300pt if you really wanted to, but if you put it too big, it would get really annoying. The next thing that I put in was the font-family. This is the equivalent of the font face in HTML, and it is pretty much the same. The color is the same as the font color of HTML, and you can use either hexadecimal or the normal colors.

IDs and Classes

You can use existing selectors such as the body tag to use CSS. But what if you want to make your own? Well, you can, and there are two different ways. For basic purposes like I am teaching you, they are basically the same.

Here is how to define an ID:

When defining an ID, you need to put a # sign before the name that you give your ID. Once you have created the ID, you need to call it up when you need it. It goes like this:

Hello!!!

Do you see why they call it an ID? An alternative to typing in div id is to type in span id. They are basically the same. They can be compared to the

and
tags; the div tag separates itself while the span tag doesn't. I put in a couple of new things in the definition. There is only one other font style other than italic that is available, and that is oblique. It is exactly the same thing, except that it doesn't work in Netscape Navigator 4 or in IE 3. So don't use it unless you really want to. One thing to remember with IDs are that you don't include the '#' when you call it up in the body. The same appiles with...

Classes

Classes, for a beginner like myself, are basically the same as IDs. The only difference is that in stead of the '#' symbol that you put in the header, you put in a '.'. The other difference is instead of putting div or span id, you put in div or span class.