• 20 hours
  • Easy

Free online content available in this course.


Got it!

Last updated on 11/12/18

Creating dynamic appearances

Log in or subscribe for free to enjoy all this course has to offer!

This is one of its strong points: CSS also allows us to change the appearance of items dynamically, in other words, items can change shape once the page has been loaded. We're going to use one of CSS' powerful features: pseudo-formats.

In this chapter, we're going to see how to change the appearance:

  • when hovering;

  • on clicking;

  • on focusing (selected item);

  • when a link has been visited.

You'll see that CSS still has plenty of surprises in store!

When hovering

In this chapter, we're going to find out about several CSS pseudo-formats. The first I'm going to show you is called :hover. Like all the other pseudo-formats we're going to see, it's information that is added after the tag name (or class) in the CSS, like this:


:hover can be interpreted as: "When the mouse pointer is over the link" (when you point to it).

From there, it's up to you to define the appearance that links take when you click on them. Give a free rein to your imagination, there's no limit.

Here's an example of link presentation, but feel free to invent your own:

a /* Default links (when not hovered over) */
text-decoration: none;
color: red;
font-style: italic;
a:hover /* Appearance of links when hovered over */
text-decoration: underline;
color: green;

We've defined two versions of styles for links:

  • for default links (when not hovered over);

  • for links when hovered over.

The result is shown in the next figure.

Change of appearance when hovered over with the mouse
Change of appearance when hovered over with the mouse

Nice, isn't it?

While it's often used on links, you can change the appearance of any item. For example, you can change the appearance of paragraphs when you point to them:

p:hover /* When you point to a paragraph */

On clicking and selecting

You can interact even more finely in CSS. We're going to see that we can change the appearance of items when clicked and when selected!

:active: when clicked

The :active pseudo-format allows you to apply a particular style when you click. In practice, it's only used on links.

The link won't keep this appearance for very long: in fact, the change takes effect when the mouse button is pressed. Clearly, this won't necessarily always be very visible.

You can, for example, change the link's background color when it's clicked:

a:active /* When the visitor clicks the link */
background-color: #FFCC66;

:focus: when the item is selected

In this case, it's a bit different. The :focus pseudo-format applies a style when the item is selected.

In other words?

Once clicked, the link remains "selected" (it has a little dotted border around it). That's the selection.

Let's try it for now on links:

a:focus /* When the visitor selects the link */
background-color: #FFCC66;

When the link has already been visited

You can apply a style to a link to a page that has already been visited. As default, the browser changes the link color to a pretty ugly purple (in my view, at least!).

You can change this appearance with :visited. In practice, for visited links, you can't change a lot apart from the color (next figure).

a:visited /* When the visitor has already seen the page concerned */
color: #AAA; /* Apply a grey color */
Visited links in grey
Visited links in grey

If you don't want already visited links to be colored in a different way, you have to apply the same color to them as normal links. Many websites do this. One notable exception: Google... which is quite handy, as you can see in the search results whether or not you've already visited the websites found by Google.

Summing up

  • In CSS, you can change the appearance of certain sections dynamically, after the page is loaded, when certain events occur. For this purpose, pseudo-formats are used.

  • The :hover pseudo-format is used to change the appearance on hovering (for example: a:hover to change the appearance of links when the mouse hovers over them).

  • The :active pseudo-format changes the appearance of links when you click on them, :visited when a link has already been visited.

  • The :focus pseudo-format is used to change the appearance of a selected item.

Example of certificate of achievement
Example of certificate of achievement