11

11Headers, footers and basic navigation

11.2

The fundamentals of navigation and links

I need to back­track a lit­tle here, there’s some stuff to do with links that I haven’t cov­ered yet, and al­though I looked at links very briefly in § 5.2 they just had that stan­dard web page ap­pear­ance that has been around since the 90s:

Figure 11.3 - The very first website (apparently)
Figure 11.3   The very first website (apparently)

I.e. the links are all un­der­lined and are in blue; these turn pur­ple if I’ve al­ready clicked the link. And that’s ex­actly what I had in first-site ex­am­ple that was built in sec­tions 5 and 6. It looked like this if you re­mem­ber:

Figure 11.4 - My final first-site website from section 6
Figure 11.4   My final first-site website from section 6

The two links google.​co.​uk and Henry have ex­actly that ap­pear­ance.

Nowa­days, web­sites have moved on and this blue, un­der­lined link is nowhere to be seen — ex­cept Google, they still use it (or some­thing very sim­i­lar):

Figure 11.5 - Links in google
Figure 11.5   Links in google

Hey, that’s my site (sec­ond one down).

So how do we get rid of it?

Well, CSS al­lows us to mod­ify the styles ap­plied to a link (and other el­e­ments) when we do dif­fer­ent things to it — e.g. hover a mouse over it, click it &c.

11.2.1

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

These se­lec­tors are most com­monly ap­plied to the an­chor el­e­ment <a ...> which, if you re­mem­ber is used to pro­vide links on a web page.

There are four of these:

  • a:link

a nor­mal, un­vis­ited link

  • a:vis­ited

a link the user has al­ready vis­ited

  • a:hover

a link when the user moves the mouse over it (but doesn’t click)

  • a:ac­tive

a link at the mo­ment it is clicked (and while the mouse but­ton is pressed)

To demon­strate, let’s take our basic web page and put a link in it. The basic web page cur­rently has the fol­low­ing:

html
  1. <!DOCTYPE html>            <!-- HTML 5 file -->
  2.  
  3. <html lang="en">            <!-- Declare language                              -->
  4.     <head>            <!-- Start of head section                        -->
  5.         <meta charset="utf-8">     <!-- Use unicode char set (< 1024 char from SOF)  -->
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7.  
  8.  
  9. <!-- **************************************************************************
  10.     HEAD CSS LOAD
  11.     ***********************************************************************-->
  12.        <link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css">
  13.        <link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
  14.        <link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
  15.        <link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">
  16.  
  17. <!-- **************************************************************************
  18.     TITLE
  19.     ***********************************************************************-->
  20.         <title>A work in progress | PracticalSeries: Web Development</title>
  21.     </head>
  22.  
  23.     <body> 
  24. <!-- ************************************************************************** [WP HEADER]
  25.     HEADER
  26.     ***********************************************************************-->
  27.  
  28.         <header id="js--000000">
  29.             <a href="https://practicalseries.com">Practical Series website</a>
  30.         </header>                                              <!-- End of header -->
  31. <!-- ========================================================================== [WP END] -->
  32.  
  33.     </body>
  34. </html>
Code 11.2   A single link on the web page

I’ve added a <header> sec­tion with a link in it.

It looks like this:

Figure 11.6 - Basic link on a web page
Figure 11.6   Basic link on a web page

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

Figure 11.7 - Basic visited link on a web page
Figure 11.7   Basic visited link on a web page

It goes from blue to pur­ple if the site has been vis­ited (i.e. is in the web browsers his­tory).

Right, all well and good, very Tim Berners-Lee. Now let’s tin­ker with it a bit; we’ll do this in CSS, specif­i­cally in style.​css. Add the fol­low­ing (near the start after the body de­f­i­n­i­tion).

style.css
  1. body {
  2.     max-width: 1276px;
  3.     margin: 0 auto;
  4.     background-color: #fff;                /* make content area background white */
  5.     border-left: 1px solid #ededed;
  6.     border-right: 1px solid #ededed;
  7. }
  8.  
  9.  
  10. a:link {
  11.     font-family: 'conc-t3-r';
  12.     text-decoration: none;
  13.     color: #4C6C9C;
  14. }
Code 11.3   Basic link selector

This changes the font to Con­course in a dif­fer­ent blue colour and re­moves the un­der­line.

Most of these prop­er­ties you have seen be­fore (font-fam­ily and color), the

    text-decoration: none;

text-dec­o­ra­tion prop­erty is re­spon­si­ble for chang­ing the un­der­lin­ing arrange­ments (none stops all dec­o­ra­tions, other op­tions are line-through, over­line and un­der­line; you can guess what they do)

Figure 11.8 - Modified link property
Figure 11.8   Modified link property

Now, only the :link se­lec­tor 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 prop­er­ties don’t, it re­mains in the con­course font and the un­der­lin­ing doesn’t come back. This is be­cause the :link de­fines var­i­ous prop­er­ties that are in­her­ited by the other se­lec­tors; color how­ever is an ex­cep­tion, it has to be de­fined for each se­lec­tor.

Add the fol­low­ing:

style.css
  1. a:link {
  2.     font-family: 'conc-t3-r';
  3.     text-decoration:none ;
  4.     color: #4C6C9C;
  5. }
  6. a:visited {
  7.     color: #ff0000;
  8. }
  9. a:hover {
  10.     color: #00ff00;
  11. }
  12. a:active {
  13.     color: #000;
  14. }
Code 11.4   Link, visited, hover and active selectors

The basic (unclicked link) looks the same as be­fore (Fig­ure 11.8), how­ever if you hover the mouse over the link you get a green link:

Figure 11.9 - Modified hover property
Figure 11.9   Modified hover property

Click the link and hold down the mouse but­ton, this turns the link black:

Figure 11.10 - Modified active property
Figure 11.10   Modified active property

And fi­nally, if you click the link (it will take you to a new page) and then hit the back but­ton (alt+left cur­sor key), the vis­ited link will be red:

Figure 11.11 - Modified visited property
Figure 11.11  Modified visited property

These se­lec­tors (or more prop­erly pseudo-classes) have cer­tain rules:

  1. :vis­ited must come after :link and can only mod­ify prop­er­ties de­fined in :link†1

  2. :hover must come after :link and :vis­ited

  3. :ac­tive 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 prac­tice, these four se­lec­tors tend to get grouped into pairs; :link and :vis­ited are usu­ally grouped to­gether and :hover and :ac­tiveare grouped to­gether. As fol­lows:

style.css
  1. a:link,
  2. a:visited{
  3.     font-family: "eqty-ca-r";
  4.     text-decoration: none;
  5.     color: #404030;
  6.     background-color: #fff;
  7.     border-bottom: 1px solid transparent;
  8. }
  9. a:hover,
  10. a:active {
  11.     background-color: #e8e8ff;
  12.     border-bottom: 1px solid #404030;
  13. }
Code 11.5   Link, visited, hover and active selectors

This now gives a fairly con­sis­tent ap­proach to links, the basic link looks like this:

Figure 11.12 - Combined link and visited properties
Figure 11.12  Combined link and visited properties

And hov­er­ing or click­ing the link pro­duces:

Figure 11.13 - Combined hover and active properties
Figure 11.13  Combined hover and active properties

Hov­er­ing (or click­ing and hold­ing) pro­duces a blue (pur­ple) back­ground and a dark, grey line un­der­neath the link.

This is be­cause both se­lec­tors have a back­ground-color prop­erty that sets the back­ground colour (to white in the case of :link/:vis­ited and blue for :hover/:ac­tive).

The :hover/:ac­tive css also sets a bot­tom bor­der::hover/:ac­tive css also sets a bot­tom bor­der:

    border-bottom: 1px solid #404030;

This puts a 1 pixel high bor­der at the bot­tom. The more ob­ser­vant amongst you will also no­tice that the :link/:vis­ited css has some­thing sim­i­lar:

    border-bottom: 1px solid transparent;

This also draws a 1 pixel high bor­der at the bot­tom of the link; how­ever, with the bor­der set to trans­par­ent, noth­ing is ac­tu­ally dis­played.

This may seem point­less, but it al­lows us to do some­thing clever, we can use the tran­si­tion prop­erty to change things.

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

11.2.2

The transition property

It’s eas­ier to just show you what it does: add the fol­low­ing line:

style.css
  1. a:link,
  2. a:visited{
  3.     font-family: "eqty-ca-r";
  4.     text-decoration: none;
  5.     color: #404030;
  6.     background-color: #e8e8ff;
  7.     border-bottom: 1px solid transparent;
  8.     transition: background-color 0.2s, border-bottom 0.2s;
  9. }
  10. a:hover,
  11. a:active {
  12.     background-color: #e8e8ff;
  13.     border-bottom: 1px solid #404030;
  14. }
Code 11.6   Transition property

Now if you hover over the link, the back­ground colour and the bot­tom bor­der fade into ex­is­tence (in this case over a pe­riod of 0.2 sec­onds). It’s a sub­tle ef­fect, but it works and it looks good.

It is achieved with the tran­si­tion prop­erty; this can be used to af­fect pretty much any other prop­erty ap­plied with a pseudo-class, al­low­ing it to change from one state to an­other, at its sim­plest, it has the fol­low­ing arrange­ment:

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

The tran­si­tion prop­erty can change as many other prop­er­ties as re­quired, the only con­di­tion being that the prop­er­ties must be ap­plied in both ap­plic­a­ble pseudo-classes (that is why there is a trans­par­ent bor­der prop­erty in the :link se­lec­tor, so it can tran­si­tion from trans­par­ent in :link to dark grey in :hover). The du­ra­tion just sets the time over which the tran­si­tion oc­curs.

The full tran­si­tion prop­erty struc­ture has more com­po­nents:

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

Set­ting the af­fected-prop­erty to all will change all the prop­er­ties that are de­fined in the pseudo-class se­lec­tor.

The du­ra­tion is in sec­onds (e.g.10.2s) or mil­lisec­onds (e.g. 534ms); the de­fault value is 0s if no value is in­cluded (i.e. the tran­si­tion is in­stan­ta­neous).

The func­tion is how the trans­form is ap­plied; it can have the fol­low­ing val­ues (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 mid­dle

  • ease

(de­fault) a vari­a­tion of ease-in-out (bit faster)

  • lin­ear

steady change over the du­ra­tion pe­riod

  • step-start

in­stantly jumps to final state and then waits

  • step-end

waits and then jumps to final state

The de­fault (ease) looks the best and (pretty much) is the one every­body uses.

These func­tions all use some form of cubic Bezier curve and this can be spec­i­fied too (if you know what you are doing — I’m afraid I don’t):

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

The delay is sim­ply a delay be­fore the tran­si­tion starts again in sec­onds or mil­lisec­onds.



End flourish image