To format the text I have used CSS only, it also controls what is termed as 'roll-overs'. That is when a hyperlink background changes, either colour or image. No javascript has been used to make this happen. Standard HTML has been used and the CSS changes the behavior, for example font style, colour and spacing.

By using standard HTML we are also taking in to account search engine optimization (SEO). For titles I used H1, for subtitles I use H2, for paragraphs I used P. For the menu I used a unordered list UL. Search engines take in to account heading tags (H1, H2 etc) and give importance to words within heading tags, H1 taken as the most important. However we will get more into SEO in the next step.

You can see the page and view the source code while following this article.

Possibly the most complicated bit of code is for the menu. Several lines of CSS has been used to create the 'roll-over' effect but still using simple HTML. Lets take a look at how it was done.

The HTML is as follows...

<ul class="nav">
<li><a href="index.htm">Home Page</a></li>
<li><a href="page2.htm">Accueil français</a></li>
<li><a href="page3.htm">Translation Services</a></li>
<li><a href="page4.htm">Interpreting/Spoken Services</a></li>
<li><a href="page5.htm">Contact</a></li>
</ul>

A single reference to the CSS command is made in the HTML for a list UL – class=”nav”

Lets break down the CSS and explain what the commands for the menu do.

.nav li {list-style-type:none;font-size:14px;font-family:"Century Gothic","Century School Book L",Helvetica, sans-serif;font-weight:normal;color:black;margin-bottom:4px;border-left:5px solid #d8e1e5;padding:2px;display:block;}

We specify in the CSS that any LI (list item) in the list (UL) is to be formatted. That way we do not have to add CSS to each LI. In other words the formatting 'cascades' down (hence the name, CSS – cascading style sheets).

The CSS command states the font to be used, remove the bullet points, place a border only on the left, pad out the line with 2 pixels and display it as a block. The block part is important when it comes to changing the background colour, more on that in a moment.

.nav li a:visited {text-decoration:none;}
.nav li a:active {text-decoration:none;}
.nav li a:link {text-decoration:none;}

The three lines change the way the hypertext link is displayed. Again the 'cascading' effect allows a single reference to change any hypertext link. In this case I have specified no underlines.

.nav li a:hover {text-decoration:none;background:#d8e1e5;display:block;}

This single line makes the 'roll-over' effect happen. When the mouse hovers over a hyperlink inside the list, it changes the background colour. The 'display:block' combined with the first CSS command I mentioned above makes the whole line line change colour and not just the background of the words. This I think makes for a better effect.

For the rest of the CSS, I changed the way the heading tags, other lists and the paragraph tags behave.

h1 {font-size:32px;font-family: "Century Gothic","Century School Book L",Helvetica, sans-serif;font-weight:normal;color:black;}

h2 {font-size:22px;font-family: "Century Gothic","Century School Book L",Helvetica, sans-serif;font-weight:normal;color:black;}

p {font-size:14px;font-family: "Century Gothic","Century School Book L",Helvetica, sans-serif;font-weight:normal;color:black;}

li {margin-bottom:5px;list-style-type:square;font-size:12px;font-family:"Century Gothic","Century School Book L",Helvetica, sans-serif;font-weight:normal;color:black;margin-bottom:5px;}

By specifying in CSS a way for the menu list to look, it has it's own identifier, I can alter how all other lists are displayed and make sure they all look the same without creating a new identifier.

Take a look at the page and it's source to try and match what you see on the screen to the CSS code.

In the next step I will examine search engine optimization and see what we can do to improve it.