Cascading Style Sheet (CSS) Basics

So now you've learned how to create HTML links and fancy fonts to spice up your page. But we've used some shortcuts and some techniques that may no longer be valid on all browsers.

Here, we'll go over the very basics of CSS, the descriptive language used to describe the look and layout of elements on a HTML page.

The easiest way to influence your text using CSS, is to wrap the text you want to modify in a tag, then applying some style to your tag.

Example 1: This is red text results in this:
This is red text

Example 2: This is large red text results in this:
This is large red text

Example 3: This is large, red, funny-looking text results in this:
This is large, red, funny-looking text

You will have noticed the "style=xxxxx" text within the tag. This is the element that is specifying what the content of the span should look like.

In these examples, I've used the most common style components: color, font-size, and font-family. (Actually, the font-size and font-family can be combined into a single, more complex font element, but it is easier to discuss the two pieces which you are most likley to want to modify). Here is some info about these three pieces.

Color - Use a hex value, as dicussed above.
Font-Family - Common values include: arial, verdana, Sans-Serif, Courier, Serif. They can be put into a comma separated list like this:font-family:arial,verdana,sans-serif. The system will use the first one it finds.
font-size - can be specified in "px" or "pt" to indicate pixels or points. There are some quirks when using "pt". So expirement with values such as "18px", "18pt" to see which looks best to you.

Last, but most important: the separators. The color:#ff0000 item is a key-value pair. color is the key, and #ff0000 is the value. If you have more than one key value pair (as in examples 2 and 3), then you will need to separate the key-value pairs. This is done using a semi-colon.

So the browser first sees that you have specified a custom style definition using the "style=" command. It then breaks the style definition into its key-value pairs (3 pairs in the case of example 3). It then breaks the key-value pairs into the style element name and it's value ("color" and "#ff0000") and applies that style element to the items within the current tag (in this case, the tag).

CSS is a VERY complicated subject, but one which will allow you to do exactly what you want with your page. If you have more than just a passing fancy in web design, you should get a good reference book on CSS and practice.