Sunday, November 28, 2004

Styling the Cursor

On November 06, 2004 we discussed "How do I change my cursor?" In summary, we learned that by using HTML elements such as <acronym>, its title attribute, and a style we can provide additional content, definitions and meaning to our publishings. Hover your mouse over HTML and see how the cursor changes to an arrow with a question mark and the words "HyperText Markup Language" appear. We wrote HTML as <acronym title="HyperText Markup Language" style="cursor:help;">HTML</acronym>. The extra typing pays off in readability and extra information for the search engines.
We will continue to use <acronym> in today's example. Be aware there are many other tags that make great opportunities for this technique:

The W3C in section 9.2 Structured Text devotes a sub-section to Phrase elements. These include: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM. In this article alone I have made use of EM, STRONG, DFN, CODE, CITE, ABBR, and ACRONYM.

Typing style="cursor:help;" everytime we make an acronym, abbreviation, definition or other reference that deserves further explanation can be tedious business. Fortunately, CSS comes to our rescue. By using a <style> block toward the top of your document, ideally within the <head>, we can type cursor:help; once and have it applied throughout our document. Your code would look like:
<style type="text/css">
   acronym {
      cursor:help;
   }
</style>
With that code in place, now instead of referencing HTML as
<acronym title="HyperText Markup Language" style="cursor:help;">HTML</acronym>
we can simply use
<acronym title="HyperText Markup Language">HTML</acronym>.

We can now apply the same style to other elements and even classes by simply adding them into the <style> definition separated by commas:
<style type="text/css">
   abbr, acronym, .help {
      cursor:help;
   }
</style>

By providing your readers with help and definitions within your document you will be providing those readers a more satisfying experience. Special thanks to Terreus for the use of his style sheet.

In upcoming articles, I will discuss:
The inspiration for this article came from frequent visits to Terreus who uses this technique and inspired me to ask "How does he do that?!" Terreus has to be one of the most exceptionally well marked up sites I have visited in recent times. Kudos to the developer!
djuggler's personal blog is Reality Me


Posted by: djuggler | 1:41 AM |