11

## 11.2

I need to backtrack a little here, there’s some stuff to do with links that I haven’t covered yet, and although I looked at links very briefly in § 5.2 they just had that standard web page appearance that has been around since the 90s:

I.e. the links are all underlined and are in blue; these turn purple if I’ve already clicked the link. And that’s exactly what I had in first-site example that was built in sections 5 and 6. It looked like this if you remember:

The two links and have exactly that appearance.

Nowadays, websites have moved on and this blue, underlined link is nowhere to be seen — except Google, they still use it (or something very similar):

Hey, that’s my site (second one down).

So how do we get rid of it?

Well, CSS allows us to modify the styles applied to a link (and other elements) when we do different things to it — e.g. hover a mouse over it, click it &c.

### :link, :visited, :hover and :active selectors

These selectors are most commonly applied to the anchor element <a ...> which, if you remember is used to provide links on a web page.

There are four of these:

 a:link a normal, unvisited link a:visited a link the user has already visited a:hover a link when the user moves the mouse over it (but doesn’t click) a:active a link at the moment it is clicked (and while the mouse button is pressed)

To demonstrate, let’s take our basic web page and put a link in it. The basic web page currently has the following:

html
<!DOCTYPE html>                    <!-- HTML 5 file -->

<html lang="en">                   <!-- Declare language                              -->
<meta charset="utf-8">     <!-- Use unicode char set (< 1024 char from SOF)   -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- **************************************************************************
***********************************************************************-->

<!-- **************************************************************************
TITLE
***********************************************************************-->
<title>A work in progress | PracticalSeries: Web Development</title>

<body>
***********************************************************************-->

<a href="https://practicalseries.com">Practical Series website</a>
<!-- ========================================================================== [WP END] -->

</body>
</html>
Code 11.2   A single link on the web page

It looks like this:

And if the link is clicked and the back key pressed it looks like this:

It goes from blue to purple if the site has been visited (i.e. is in the web browsers history).

Right, all well and good, very Tim Berners-Lee. Now let’s tinker with it a bit; we’ll do this in CSS, specifically in style.css. Add the following (near the start after the body definition).

style.css
body {
max-width: 1276px;
margin: 0 auto;
background-color: #fff;                 /* make content area background white */
border-left: 1px solid #ededed;
border-right: 1px solid #ededed;
}

font-family: 'conc-t3-r';
text-decoration: none;
color: #4C6C9C;
}


This changes the font to Concourse in a different blue colour and removes the underline.

Most of these properties you have seen before (font-family and color), the

    text-decoration: none;

text-decoration property is responsible for changing the underlining arrangements (none stops all decorations, other options are line-through, overline and underline; you can guess what they do)

Now, only the :link selector has changed, but if you hover a mouse over the link or click it and go back to the page, you will see that while the colour changes, some other properties don’t, it remains in the concourse font and the underlining doesn’t come back. This is because the :link defines various properties that are inherited by the other selectors; color however is an exception, it has to be defined for each selector.

style.css
a:link {
font-family: 'conc-t3-r';
text-decoration:none ;
color: #4C6C9C;
}
a:visited {
color: #ff0000;
}
a:hover {
color: #00ff00;
}
a:active {
color: #000;
}
Code 11.4   Link, visited, hover and active selectors

The basic (unclicked link) looks the same as before (Figure 11.8), however if you hover the mouse over the link you get a green link:

Click the link and hold down the mouse button, this turns the link black:

And finally, if you click the link (it will take you to a new page) and then hit the back button (), the visited link will be red:

These selectors (or more properly pseudo-classes) have certain rules:

1. :visited must come after :link and can only modify properties defined in :link†1

2. :hover must come after :link and :visited

3. :active must come after :hover

†1 This is a privacy issue; a malicious website could test the visual style of a link with JavaScript to report back to a server which sites the user has visited, violating the user’s privacy.

In practice, these four selectors tend to get grouped into pairs; :link and :visited are usually grouped together and :hover and :activeare grouped together. As follows:

style.css
a:link,
a:visited{
font-family: "eqty-ca-r";
text-decoration: none;
color: #404030;
background-color: #fff;
border-bottom: 1px solid transparent;
}
a:hover,
a:active {
background-color: #e8e8ff;
border-bottom: 1px solid #404030;
}
Code 11.5   Link, visited, hover and active selectors

This now gives a fairly consistent approach to links, the basic link looks like this:

And hovering or clicking the link produces:

Hovering (or clicking and holding) produces a blue (purple) background and a dark, grey line underneath the link.

This is because both selectors have a background-color property that sets the background colour (to white in the case of :link/:visited and blue for :hover/:active).

The :hover/:active css also sets a bottom border::hover/:active css also sets a bottom border:

    border-bottom: 1px solid #404030;

This puts a 1 pixel high border at the bottom. The more observant amongst you will also notice that the :link/:visited css has something similar:

    border-bottom: 1px solid transparent;

This also draws a 1 pixel high border at the bottom of the link; however, with the border set to transparent, nothing is actually displayed.

This may seem pointless, but it allows us to do something clever, we can use the transition property to change things.

• These pseudo-classes (:link, :visited, :hover and :active) can be applied to any class, not just links.

### The transition property

It’s easier to just show you what it does: add the following line:

style.css
a:link,
a:visited{
font-family: "eqty-ca-r";
text-decoration: none;
color: #404030;
background-color: #e8e8ff;
border-bottom: 1px solid transparent;
transition: background-color 0.2s, border-bottom 0.2s;
}
a:hover,
a:active {
background-color: #e8e8ff;
border-bottom: 1px solid #404030;
}
Code 11.6   Transition property

Now if you hover over the link, the background colour and the bottom border fade into existence (in this case over a period of 0.2 seconds). It’s a subtle effect, but it works and it looks good.

It is achieved with the transition property; this can be used to affect pretty much any other property applied with a pseudo-class, allowing it to change from one state to another, at its simplest, it has the following arrangement:

transition: [affected-property] [duration], [affected-property] [duration], ...

The transition property can change as many other properties as required, the only condition being that the properties must be applied in both applicable pseudo-classes (that is why there is a transparent border property in the :link selector, so it can transition from transparent in :link to dark grey in :hover). The duration just sets the time over which the transition occurs.

The full transition property structure has more components:

transition: [affected-property] [duration] [function] [delay], ...

Setting the affected-property to all will change all the properties that are defined in the pseudo-class selector.

The duration is in seconds (e.g.10.2s) or milliseconds (e.g. 534ms); the default value is 0s if no value is included (i.e. the transition is instantaneous).

The function is how the transform is applied; it can have the following values (most of which sound vaguely rude to me):

 ease-in slow to start and then speeds up ease-out fast to start and then slows down ease-in-out slow to start and stop, fast in the middle ease (default) a variation of ease-in-out (bit faster) linear steady change over the duration period step-start instantly jumps to final state and then waits step-end waits and then jumps to final state

The default (ease) looks the best and (pretty much) is the one everybody uses.

These functions all use some form of cubic Bezier curve and this can be specified too (if you know what you are doing — I’m afraid I don’t):

cubic-bezier(0, 0, 0.58, 1)

The delay is simply a delay before the transition starts again in seconds or milliseconds.