Reverting to default CSS after change.

[contiw]

A portion of my page needs a modified style like the following:

<style>
A:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto.gif) no-repeat 100% 60%; }
A:visited:hover {text-decoration: none; color: navy; background-image: url(images/visto.gif)}
</style>

which works OK.

Now: the rest of the pages should go back to the standard style:

<style>
A:visited {text-decoration: none; color: navy;}
</style>

Putting this at the end of the modifies page does not work.
How should I do it?

Thanks very much for helping.
ContiW

[mwinter]

A portion of my page needs a modified style like the following:

<style>

First things, first: style elements require a type attribute:

<style type="text/css">
  /* ... */
</style>

A:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto.gif) no-repeat 100% 60%; }
A:visited:hover {text-decoration: none; color: navy; background-image: url(images/visto.gif)}

In both rules above, you have neglected to include a background colour. This means that the default, transparent, will be used. You should ensure that the link text is still readable if the background image isn't displayed, or specify an adequate substitute colour.

Now: the rest of the pages should go back to the standard style:

<style>
A:visited {text-decoration: none; color: navy;}
</style>

Putting this at the end of the modifies page does not work.
How should I do it?

The previous comments also apply here: a color property declaration should always be accompanied by a background declaration. This avoids readability problems that may occur should a visitor have an unexpected default colour scheme. The common axiom you'll find in Usenet groups is, "If you set one colour, set them all."

Another markup problem: you cannot add a style element to the end of a document. A style element may only occur within the head element, nowhere else.

What you don't seem to realise is that CSS depends upon structure; the hierarchy that is an inherent part of HTML documents. If you want to limit the scope of a CSS rule to some subset of the document, you first must ensure that this subset can be identified structurally. For example, these links of yours could be part of a menu marked-up within a list element:

<ul class="menu">
  <li class="current"><a href="/">Home</a></li>
  <li><a href="/products">Products</a></li>
  <li><a href="/support">Support</a></li>
  <li><a href="/about-us">About Us</a></li>
</ul>

This snippet demonstrates a well-written menu[1], providing several useful hooks for any CSS rules. To style such a list distinctly, we can use the following selector:

ul.menu {
  /* Declarations here will only apply to lists that are 'menus'. */
}

Similarly, to only style the links within a menu, rather than all links, a descendant selector is used:

ul.menu a:link {
  /* Only applies to links within a 'menu'. */
}

You need to establish similar structure, if you haven't done so already, and alter the CSS selectors appropriately. This structure may be acheived by dividing your document into sections (use div elements) and applying the first two rules to only specific sections, or perhaps by adding class attributes to these special links. Without seeing the document in question, I couldn't tell you the best way.

Mike


[1] Strictly speaking, the 'Home' menu item, which is shown as the 'current' item (that is, the visitor would be on the Home page), shouldn't be marked-up as a link. Documents shouldn't link to themselves.

[contiw]

Thank you mWinter for taking the time and patience to explain CSS mechanics. You are restating nice and clean what I have been learning in the last couple of days, reinforcing it. So little by little I have come out with the following solution to my problem:

Created two classes with different background images:

A.visto:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto_0.gif) no-repeat 100% 60%;}
A.vistohover:visited {text-decoration: none; color: navy; padding-right: 40px; background: url(images/visto_1.gif) no-repeat 100% 60%;}

then:

<a class="visto"
onMouseover="this.className='vistohover'" onMouseout="this.className='visto'"
href="...">#Title#</a>

Works neat with "visited" links.
Have a nice weekend
WalterC