General syntax:
selector:pseudo-class {
property: value;
}
The following, if used, must be in this order:
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
A html element can have a class defined just for that element. This class can then have a pseudo-class added. The syntax is like this:
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style>
<a class="highlight" href="index.html">Index</a>
Which looks, and works, like this:
IndexHover over me.
And a tooltip appears!
The example above shows how styles can be used so that hovering over one element causes another one to appear. The code looks like this:
<style>
p.tooltip {
display: none;
background-color: yellow;
padding: 20px;
}
div.icon {
max-width: fit-content;
border: 5px solid blue;
padding: 5px;
}
div.icon:hover p {
display: inline-block;
}
</style>
<div class="icon">
<p>Hover over me.</p>
<p class="tooltip">
And a tooltip appears!
</p>
</div>
The above shows an important feature of how css works.
The last rule of the style section works like this:
the selectors match all p elements in a div with a class of icon
that is being hovered over. Then the rule changes the display style
of the matched p elements.
There are a few additional options called pseudo elements which can be used to style parts of elements. This is an advanced topic to be left to another day!