13Links

Of all the different types of link discussed in this chapter, external links are the most straight forward, and that’s what I’m starting with.

An external link is a direct link to a page on another website (an offsite link). For example, this is a link to Mr Butterick’s Practical Typography website:
Practical Typography.

If the mouse is hovered over the link, it looks like this:
Practical Typography

You’re probably thinking “well that looks alright, it’s just what we did with the nav bar and the TOC” and you are exactly right. It’s simple.

The link is inserted into a standard paragraph of body text, this is the HTML:

<p class="hyp">The following is a typical external (offsite) link: 
<a class="hlink" href="http://practicaltypography.com/">Practical Typography</a>. Such links have the following form:</p>

The link is the bit inside the anchor element <a>...</a>:

<a class="hlink" href="http://practicaltypography.com/">Practical Typography</a>

This is just a bog standard link (exactly like the ones discussed in §§ 5.2 & 11.2). The website address to which the link will take us is after the href= attribute and in this case it is the web address (URL) http://practicaltypography.com/, this is the address of the home page of the Practical Typography website.

The text that is displayed for the website is between the closing bracket of <a> and the opening bracket of </a> and in this case is the text Practical Typography.

• If you hold down the control key while clicking the link, it will open the target web page in a new tab (this works on most web browsers).

The anchor element has the class hlink (it’s my abbreviation for hyperlink) and this is similar to what we did with the nav bar and the TOC (section 11), it’s where we manipulate the link, visited, hover and active pseudo-classes. It looks like this:

.hlink {font-family: "eqty-ca-r"; }         /* TEXT STYLE - hyperlink */
.hlink:link,
.hlink:visited{
    background-color: #f8f8f8;
    border-bottom: 1px solid transparent;
    transition: background-color 0.2s, border-bottom 0.2s;
}
.hlink:hover,
.hlink:active { background-color: #f8f8f8; border-bottom: 1px solid #404030; }

The first thing is the basic hlink class, this just sets the font to a small caps serif font (in this case Equity small caps).

.hlink {font-family: "eqty-ca-r"; }

Nothing else changes, the text will be the same size as the body text and the colour will also be the same as the body text (this is because I’ve done nothing to change them).

Next is all the hlink pseudo-classes:

.hlink:link,
.hlink:visited{
    background-color: #f8f8f8;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s;
}
.hlink:hover,
.hlink:active { border-bottom: 1px solid #404030; }

Again, this is exactly what we’ve done before with the nav bar (§ 11.3.3) and TOC (§ 11.5), the link and visited selectors are defined together as are the hover and active selectors; this is the usual arrangement for links.

The basic properties are set in the link/visited selector, this gives a light grey background colour (#f8f8f8) and draws a transparent, 1 pixel border underneath the text.

It also sets a transition condition, this fades in the darker underline border when the mouse hovers over the link:

    background-color: #f8f8f8;
    border-bottom: 1px solid transparent;
    transition: border-bottom 0.2s;

The transition goes from a transparent border to the border defined in the hover/active selector which is the same colour as the text (#404030)

And that is it.

To use an external link, simply copy the HTML text above, the format is:

<a class="hlink" href="WEBSITE-URL">VISIBLE TEXT</a>

Insert the website-url (this is the web address beginning either https:// or http://). The visible text is the visible, clickable text that shows up on the web page.