Now that you're becoming a "talented-honed" type of HTML artist, maybe we should give you something to really feel proud of. Next, we're going to work on cascading style sheets to further the enhancement where JavaScript left off, forms so your users can leave you messages or order products from you, and frames to make multiple pages come together at once. One word of warning before we go into these next three, some browsers (Netscape, Internet Explorer, AOL, UNIX, etc) don't allow some things to be rendered the way you want. Find out what your browser supports before you go out of your way to learn some of these things.

Style Sheets

Cascading style sheets are one way of controlling how your viewers see your page. CSS works in much the same way as most word processors do. They have programming behind the editor that allows you to change the font, color, and size of text as well as how you want it aligned and where you put any images should you choose to add them. When using style sheets, you have a few different ways of how to implement them. The simplest form allows you to insert style sheets in a way that's known as "inline", which, in hierarchy terms, will override any embedded or external style sheets. In this way, everything is part of the tag you want to alter. For instance, you could type:

<P STYLE="text-indent: 1em; font-family: sans-serif /">

As a rule, if you are using single line, non-closing tag, and you are using CSS, DHTML, or Ajax, you need to make the tags self-closing by adding the "/" as shown in the example above. Another rule is to use double quotes ("...") around your declarations and single quotes ('...') around any values in your declarations so as to not confuse the browser. The colon (:) in CSS acts as an equal sign, while the semi-colon (;) acts as an ending to your declaration, which works the same as it does in other programming languages.

You can also place the <STYLE TYPE="text/css" MEDIA="all"></STYLE> tags just above the </HEAD> tag. This is what is known as "embedding" the style sheets. Where this is useful is that you can control multiple tags in just one code. For example, if you want all of your paragraph tags to be indented, instead of adding &nbsp; in front of each paragraph, type: P {text-indent: 1em}. This will find every <P> tag and indent it one equal measure (whatever your browser renders it as). This is called defining HTML tags. To show how this works, we'll add more text, indent the paragraphs, then reformat the heading in our Demo. We'll also show you below in the next paragraph what it looks like when we use CSS to indent. Notice how much easier it is to localize all your formats in one small area than it is to individually format each thing that you want to change.

There are several ways to define tags. One way is to use classes. There are two ways of doing this which will give the same results:

.className {...}
tag.className {...}

In the example above, .className {...} defines a class that can be used globally wherever the class name appears in a tag such as <tag class="className">. The second example, tag.className {...} specifies the tag and the class name that is associated with that tag. You can also define tags by ID by typing #className {...} or div#className {...}. You can also have multiple definitions, such as: tag,.className,#classNameTwo {...}.

Another way of formatting with style sheets is with positioning. For example, if you want an image positioned in exactly one spot, in your style block you could type #imagelayer1 {position:absolute; top:20px; left:350px}, where "#imagelayer1" is the first layer of the image that is going to be formatted, the position is absolute which means this is exactly where it's going to reside, and you have it set to be at 20 pixels from the top and 350 pixels from the left. You can then got to the image tag and do one of two things:

<IMG SRC="yourimage.gif" id=imagelayer1>

or

<SPAN id=imagelayer1>
<IMG SRC="yourimage.gif">
</SPAN>

Either will produce the same result, but the latter example allows you to encompass more that one item at a time. Using two absolute values for different tags will result in their own positioning. However, if you use <SPAN></SPAN> as a container and another within the container, the containing element becomes the parent and sets up all new coordinate systems for the children elements. If you used relative positioning, your elements are positioned relative to each other. For instance, if you positioned your first layer at 20 pixels from the top(absolute) and your second at 10 pixels from the top(relative), the second layer would start at 30 pixels from the top, 10 pixels below your first layer. To understand, look at the example below:

#imagelayer1 {position:absolute; top:20px; left:350px}
#imagelayer2 {position:relative; top:10px}

<SPAN id=imagelayer1>
This is my image.
<IMG SRC="yourimage.gif" id=imagelayer2>
</SPAN>

Two other positioning values we are going to talk about are static and floating. With "static", it acts as if you never even typed the code. Static cannot be positioned or repositioned, nor does it become a parent and set up new coordinates for other elements. Although this may seem unnecessary, it is useful if you want to add other absolute or relative elements around it or use it as the secondary element. As for "floating" values, this can also be viewed as unnecessary. It is assumed that it exists in CSS and that images that have text wrapped around them are floating. You can set one text as "relative", and if it wraps around the other text or image, it could be considered as floating.

You can align text by adding:

text-align:yourchoice(left, center, right, or justify).

Another alignment property is by adding:

vertical-align:yourchoice(baseline, bottom, middle, sub, super, text-bottom, text-top, or top).

Think we have the top off the can of worms? Not yet. You can decorate or undecorate text with CSS. Below are three ways to alter the decoration of your text:

• text-decoration:yourchoice(none, underline, overline, or line-through)
• text-transform:yourchoice(capitalize, lowercase, uppercase, or none)
• font-variant:yourchoice(small-caps, or none)

Although this may seem a little odd, we did this to prove a new point. This section of text was created to have a colored background. Many sites on the Internet have columns that look similar. Here's how we did it:

Instead of using the <P> paragraph tag, we used a similar set of tags called <BLOCKQUOTE></BLOCKQUOTE> tags. We then went up to our CSS section of our <HEAD> and added the following line:

blockquote {background-color:rgb(253,210,153)}

There are a few ways of specifying the color:

• blockquote {background-color:teal}(name of color)
• blockquote {background-color:#008080}(hexidecimal color number)
• blockquote {background-color:rgb(0,128,128)}(red, green, blue color values)
• blockquote {background-color:rgb(0%,50%,50%)}(RGB percentage values)

Ever wondered how our links have no underline and turn red when your cursor goes over one? If not, give it a try now. That's because we also formatted our links. There are several formats you can add. Below is a list of things you can do:

• A {font-size:0.65em; color:green}(small font colored green)
• A {text-decoration:none}(removes the underline)
• A:visited {color:red}(any visited links will be red)
• A:link {color:green}(any unvisited links will be green)
• A:active {color:blue}(currenlty selected link will be blue)
• A:hover {color:red; text-transform:uppercase; font-weight:bold}(when your cursor goes over the link, it changes to these values)

If you're wondering how we added the teal dots, here's how:

ul {list-style: circle url(tealdot.gif) outside}

This replaces all the bullets in your unordered list with the tealdot.gif image. outside refers to the placement of these bullets according to the list block, either inside the block or outside.

Although putting the style sheet codes in the <HEAD> of your document is a good way of altering your page, if you have many style sheet codes doing different things, the <HEAD> of your document may be longer than the <BODY>. This is where creating an external style sheet source comes in handy. To do so, you'd create a file ending with the extention ".css"(i.e. mystyles.css). In this instance, you link the style sheet to the page you want to have rendered. To do this, you'd type:

<LINK HREF="mystyles.css" REL="stylesheet" TYPE="text/css" MEDIA="all" />

Another way to use an outside style sheet is to import it. To import a style sheet, you'd type:

@import url(mystyles.css);

You can also import a style sheet into a style sheet. You use a similar line as the one above, but the main rule for this line is it needs to be the placed before all other CSS code. This is what your import line should look like:

@import {mystyles.css}

If you'd like to learn a lot more about basic and advanced cascading style sheet, visit our CSS Tutorial page.

Click to see Demo 10

Question: I can't believe I did things the hard way all this time. I like how I can add cool things to make my site stand out from others. But, how can I interact with the people who come to my site?

Answer: You can do a lot with style sheets. Now you are ready to learn how to create forms.