Getting Started

Start up Arachnophilia, or another HTML editor. This will also work with FrontPage, if you view the HTML source, and type everything in by hand. Just avoid using that font increase or decrease button, and leave Times New Roman as the default font face when actually writing your content.

Open up a new blank web page document, or start with one you have already written. If it is one you have already written, remove all of the font tags, as they can interfere with the CSS formatting that we are going to implement. So it might be easier for this to start with a new, blank web page.

Illustration 3: Arachnophilia Ready for Rules

As shown in Illustration 3, clicking on the "Style" button lays out an area that begins and closes with Style Tags.

1. First place the blinking cursor just before, or above, the closing (/head) tag
2. Then click on the "Frames" button on the lower row of buttons to make the upper row of buttons with the "Style" button appear
3. Click on the Style button to make Arachnophilia write the tags and clear some space as shown in Illustration 3, and we are ready to key in our first rule in the blank area shown

Rules

Let's start with the basic block of text, the paragraph, which is defined in HTML by the P tag. Arachnophilia writes this tag when you click on the "P" button.

Begin the definition of the Rule with a "p" in the area defined by the style tags. Then add a couple of squiggle brackets. You will find these right next to the p on your computer keyboard.

p	{	}

Like the example above. Now let's put something in the brackets. Make the font face ARIAL by adding:

p	{ font-family: arial;	}

And set the size with:

p	{ font-family: arial; 
	  font-size:12pt; }

That will set the size of all text in paragraphs to twelve points and the type face to arial. Notice that the COLON acts as an equals sign and the SEMICOLON separates each declaration in the block.

We can do the same thing with links. The HTML tag that we will use as the selector is A for anchor, and we will apply the same declarations.

a	{ font-family: arial; 
	  font-size:12pt; }

To change the color and control the underlining:

a	{ font-family: arial; 
	  font-size:12pt;
	  color:navy;
	  text-decoration:none; }

This will change all of your links to navy blue, font to arial, and remove the underline as well as set the size to twelve points. Illustration 4 should give you an idea of what the complete style sheet information will look like.

Illustration 4: All Done

You can View Source on your browser when you visit other web sites to see how other examples work. There are many different ways to use CSS.

Troubleshooting

What if some of my text is formatted the way I want, and some is not?

Some of it may not be in paragraphs defined by the "p" tag. Web pages made with word processors or WYSIWYG Editors will do this if the text is in tables. You can go through the code by hand and add the tags, and then watch as the word processor removes them again. Or you can add:

p,td	{ font-family: arial; 
	  font-size:12pt; }

And the headers or list items will not be affected unless you add selectors for every type of tag that you use:

p,td,li,dd,dt,h1,h2,h3,h4,h5,h6

	{ font-family: arial, sans-serif; }

And make separate rules for size declarations if you want something other than the default sizes.

We added the sans-serif family just in case the viewer does not have the arial font face on his or her computer that you have on yours. There is a way to load a font the same way applets and background files are loaded, but that is a more advanced topic.

Whoa! The whole page just went blank. What happened?

You left out the closing style tag, or a bracket, or used a colon in place of a semicolon. CSS is not as forgiving as HTML.

There is still something in a different font.

I'll bet you are using a WYSIWYG editor amd have been playing with the buttons again without knowing what they do. Well, just keep experimenting.

Resources

That is the end of this brief introduction, but there is much more that can be done with CSS. The ultimate resource for CSS can be found at W3C.ORG.

by David E. Freeman

dfremail@yahoo.com

home projects writing contact resume