Headings: [Skip]

Web-Design Tutorials by Dr Sam

CSS, the Cascade

Menu [Skip]

Pseudo-Classes

Applying Pseudo-Class Styles

Now, let's imagine that we want the same set of styles for a:link, a:visited, a:active, but a different set for a:hover:

Example

Styles

a.tuff0:link, a.tuff0:visited, a.tuff0:active {
background-color:#fff;
color:#00f;
text-decoration: underline;
}

a.tuff0:hover {
background-color:#000;
color:#fc0;

text-decoration: none;
}

p {
text-align: center;
font-family: verdana, sans-serif;
font-weight: bold;
}

.muff1 {
background-color:#fc0;
color:#000;
}

Mark-up

<p><span class="muff1"> Little Miss Muffett </span></p>

<p class="muff1">Sat on a <a class="tuff0" href="page.html">Tuffett</a></p>

Effect

Little Miss Muffett

Sat on a Tuffett