LINKS

Rekkefølgen som anbefales

The :link signifies unvisited hyperlinks.
The :visited signifies visited hyperlinks.
The :hover signifies an element that currently has the user's mouse pointer hovering over it.
The :active signifies an element on which the user is currently clicking.

Fra w3schools.com

a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked

Standard originale farger

a:link {color: blue:}
a:visited {color: purple;}
a:hover {color: cyan;}
a:active {color: red;}

Basic Link Styles

Fra: https://www.internetingishard.com/html-and-css/css-selectors/ (som har mye bra!).

:link – A link the user has never visited.
:visited – A link the user has visited before.
:hover – A link with the user’s mouse over it.
:active – A link that’s being pressed down by a mouse (or finger).

a:link {
  color: blue;
  text-decoration: none;
}
a:visited {
  color: purple;
}
a:hover {
  color: aqua;
  text-decoration: underline;
}
a:active {
  color: red;
}

If you’ve never been to the InternetingIsHard.com home page, you should see a blue link. Otherwise, you’ll see a purple link. When you hover over the link, it will turn aqua, and when you push down on it, it’ll turn red.

Visited Hover State

The above snippet is just fine for most websites, but take a closer look at the a:visited behavior by changing the href attribute to a URL that you’ve been to before. Our a:hover style is applied to both visited and unvisited links. We can refine our links even more by stringing pseudo-classes together. Add this below the previous snippet:

a:visited:hover {
  color: orange;
}

Som gir følgende InternetingIsHard.com resultat.

This creates a dedicated hover style for visited links. Hovering over an unvisited link changes it to aqua, while hovering over a visited link will turn it orange. Fantastic! Except for the fact that this breaks our a:active style due to some complicated CSS internals that you’ll never want to read about. When you click down, our link won’t turn red anymore.

Visited Active State

We can fix that with a:visited:active. Add the following to the end of our stylesheet. Note that, as with our .call-to-action class, the order in which these are defined in styles.css matters:

a:visited:active {
  color: red;
}

Som gir følgende InternetingIsHard.com resultat.

These last two sections let you style visited links entirely separately from unvisited ones. It’s a nice option to have, but again, you’re welcome to stop at basic link styles if that’s all you need.

Tester med og uten LINK, med CLASS i CSS

a.testing1 {color: blue; text-decoration: none;}
a.testing1:visited {color: yellow;}
a.testing1:hover {color: fuchsia;}
a.testing1:active {color: red;}

a.testing2:link {color: green; text-decoration: none;}
a.testing2:visited {color: yellow;}
a.testing2:hover {color: orange;}
a.testing2:active {color: fuschia;}

Tester rekkefølge og plassering av CLASS i CSS

a:link.tester1,
a:visited.tester1,
a:active.tester1 {
  color: DeepPink;
}
a:hover.tester1 {
  color: Black;
}

a.tester2:link,
a.tester2:visited,
a.tester2:active {
  color: DeepPink;
}
a.tester2:hover {
  color: Black;
}

.tester3:link,
.tester3:visited,
.tester3:active {
  color: DeepPink;
}
.tester3:hover {
  color: Black;
}

.tester4 a:link,
.tester4 a:visited,
.tester4 a:active {
  color: DeepPink;
}
.tester4 a:hover {
  color: Black;
}

<ol>
  <li><a class="tester1" href="nettside1.no/">a:link.CLASS1</a></li>
  <li><a class="tester2" href="nettside2.no/">a.CLASS2:link</a></li>
  <li><a class="tester3" href="nettside3.no/">.CLASS3:link</a></li>
  <li><a class="tester4" href="nettside4.no/">.CLASS4 a:link</a></li>
</ol>

<div class="tester1">
<ol><li><a href="nettside1.no/">a:link.CLASS1</a></li></ol>
</div>
<div class="tester2">
<ol><li><a href="nettside2.no/">a.CLASS2:link</a></li></ol>
</div>
<div class="tester3">
<ol><li><a href="nettside3.no/">.CLASS3:link</a></li></ol>
</div>
<div class="tester4">
<ol><li><a href="nettside4.no/">.CLASS4 a:link</a></li></ol>
</div>

a:link.CLASS1

a.CLASS2:link

.CLASS3:link

.CLASS4 a:link

Endre standard CSS til CLASS eller ID

DET BESTE og ENKLESTE er å samle innholdet i en DIV, og så knytte den til hver av tagene i den.

h1 { }
p { }
a { }
a:hover { }

.samling h1 { }
.samling p { }
.samling a { }
.samling a:hover { }

<div class="samling">
<h1>Bla...
<p>Bla...
<a href...
</div>

Det nedenfor er det jeg testet innledningsvis, før jeg fant ut av det nevnt over. Lar det stå. Kan også brukes slik.

En a:link kan endres til a.classnavn:link for CSS. Tilhørende HTML vil da bli gitt en <a class="classnavn" href....

Eventuelt så kan en a:link endres til #idnavn a:link for CSS. Tilhørende HTML vil da bli gitt en <a id="idnavn" href....

Knytte sammen en A HREF i en H1 med en kombinert CSS

Styling a heading as a link:

The A element is an inline element and can’t contain block elements. The Hx elements are all block elements and can contain inline elements.

h1 a {
  color: #EBE6C8;
  text-decoration: none; 
}
h1 a:hover {
  color: blue;
}

Med h1 a {...}, styres alle <a> som er på innsiden av <h1> elementer.

En ren <a> og en ren <h1> påvirkes ikke av stylingen.

Heading as a link

Link skal plasseres inne i en Header, ikke motsatt.

Kombinert som CLASS i CSS

En h1 a {...} multi-tag kombinasjon kan også settes opp som en CLASS: h1.a-inni-hx.

.a-inni-hx a {
    color: #EBE6C8;
    text-decoration: none; 
}
.a-inni-hx a:hover {
    color: #FFFF20;
}

Uten h1 foran .a-inni-hx kan den gjenbrukes på flere forskjellige elementer, eksempelvis en h3 tag.

<h3 class="a-inni-hx"><a href="#">Link Inside Heading</a></h3>

Clean Heading

Clean Links

Link Inside Heading

Hver for seg i CSS

Dersom a {...} blir stående alene, vil alle rene <a href... bli styrt med stylingen som den viser. Samtidig vil h1 a:hover {...} styre alle a:hover {...} som befinner seg inne i <h1> tager. Det betyr at <a href> mister sin hover-funksjon, hvis den da ikke også er definert som en egen a:hover {...}.

a {
  color: #EBE6C8;
  text-decoration: none; 
}
h1 a:hover {
  color: #FFFF20;
}

<a href="/hvasomhelst/notvisited">Styled Links</a>
<h3 class="a-inni-hx"><a href="#">Link Inside Heading</a></h3>

Clean Heading

Styled Links

Link Inside Heading

Intern linking, nytt i HTML5

https://way2tutorial.com/html/html_internal_links.php

Notes: You can not use name attribute instead of id attribute. Because name attribute not supported in HTML5. Use the id attribute instead of.

Create a Bookmark in HTML

First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="#C4">Jump to Chapter 4</a>

You can also add a link to a bookmark on another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Annet eksempel

PB: Bruk av ID for intern-linking.

<div id="en-stilsetting">
 <div class="annen">Which paragraph do you want to scroll to?</div>
 <ul>
  <li><a href="#one">Paragraph One</a></li>
  <li><a href="#two">Paragraph Two</a></li>
  <li><a href="#three">Paragraph Three</a></li>
  <li><a href="#four">Paragraph Four</a></li>
  <li><a href="#five">Paragraph Five</a></li>
 </ul>
 </div>
<p id="one">Enerens tekst.</p>
<p id="two">Toerens tekst.</p>
<p id="three">Treerens tekst.</p>
<p id="four">Firerens tekst.</p>
<p id="five">Femerens tekst.</p>
</div>

Which paragraph do you want to scroll to?

Paragraph One
Paragraph Two
Paragraph Three
Paragraph Four
Paragraph Five

1. Enerens tekst.

2. Toerens tekst.

3. Treerens tekst.

4. Firerens tekst.

5. Femerens tekst.

Inline hover (fake hover)

Fra stackoverflow.com (forum)

As mentioned before, you can't use inline elements for styling pseudo classes. Before and after pseudo classes are states of elements, not actual elements. You could only possibly use JavaScript for this.

<a href="#" 
onmouseover = "this.style.textDecoration = 'none'"
onmouseout  = "this.style.textDecoration = 'underline'">Hello</a>

<a href="#" 
onmouseover = "this.style.background = '#d5efc2'"
onmouseout  = "this.style.background = 'SandyBrown'">Hello</a>

<a href="#" 
onmouseover = "this.style.color = '#090'"
onmouseout  = "this.style.color = '#900'">Hello</a>

It's not CSS but it works for :hover using mouseover and mouseout, :focus using onfocus and onblur, and :active using onclick. Dette er javascript.

Hello Hello Hello

PB ... test ut i forskjellige kombinasjoner. Kan være greit å bruke dette på testsiden her, fremfor CSS under STYLE på toppen av siden!

PB: Andre alternativ funnet:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>

Google

<a href="http://www.google.com" id="gLink">Google</a>
<style>
  #gLink:hover {
     text-decoration: none;
  }
</style>

Google Text

<h2>Litt testmoro, funnet på nett og modifisert</h2>

<p>Har fått samlet noe mer sammen enn originalen som hadde alt fordelt med full standard pakke på alle 4 x 4, og da uten 0. 
Det var ingen CLASS heller, alt som standard for alle linker på siden. 
Testet ut forskjellige plasseringer av CLASS i CSS. Slik det ligger fremme fungerer det. 
Også med egen <code>text-decoration: underline;</code> på den samlede biten.</p>

<pre>
.testmoro0 a:link,
.testmoro0 a:visited,
.testmoro0 a:active {
  font-size: 52pt;
  color: DeepPink;
  text-decoration: none;
}
.testmoro0 a:hover {
  color: Black;
  text-decoration: underline;
}

a:link .testmoro1,
a:visited .testmoro1,
a:active .testmoro1 {
  color: #708090;
  text-decoration: none;
}
a:hover .testmoro1 {
  color: cyan;
  text-decoration: none;
}

a:link .testmoro2,
a:visited .testmoro2,
a:active .testmoro2 {
  color: #708090;
  text-decoration: none;
}
a:hover .testmoro2 {
  color: magenta;
  text-decoration: none;
}

a:link .testmoro3,
a:visited .testmoro3,
a:active .testmoro3 {
  color: #708090;
  text-decoration: none;
}
a:hover .testmoro3 {
  color: lime;
  text-decoration: none;
}

a:link .testmoro4,
a:visited .testmoro4,
a:active .testmoro4 {
  color: #708090;
  text-decoration: none;
}
a:hover .testmoro4 {
  color: SandyBrown;
  text-decoration: none;
}
</pre>

<h2>STYLING LINKS</h2>

<p>CSS allows us to style links as desired. We can format text, by adding colors, background, increase size, etc. 
Furthermore, animations can be added to create a pleasant visual effect.</p>

<p>For proper functionality, the order of pseudo selectors is given by:- :link, :visited, :hover, :active.</p>

<h3>Annen måte å lage linker på, som ID.</h3>

<pre>
p {
   margin: 25px;
}
#mod {
   padding: 10px;
   color: darkturquoise;
   border: thin solid;
   background-color: lemonchiffon;
}
#mod:hover {
   color: white;
   box-shadow: 0 0 0 1px black;
   background-color: slateblue;
}
</pre>

<pre>
<p>
<a href="mailto:user@example.com">Demo link</a>
</p>
<p>
<a id="mod" href="mailto:user@example.com">Modified demo link</a>
</p>
</pre>

<div class="div-eksempler">
<p style="margin: 25px;">
<a href="mailto:user@example.com">Demo link</a>
</p>
<p style="margin: 25px;">
<a id="mod-1" href="mailto:user@example.com">Modified demo link</a>
</p>
</div>

<pre>
div {
   margin: 25px;
   display: flex;
   float: left;
   border: thin solid;
   background-color: snow;
   padding: 20px;
}
body * {
   border-radius: 5%;
}
#mod {
   padding: 10px;
   color: royalblue;
   text-decoration: none;
}
#mod:hover {
   box-shadow: 0 0 10px 2px black;
   text-decoration: overline;
   font-size: 1.2em;
}
</pre>

<h2>Common Pseudo-Classes for Link Styling</h2>

<p>Here are the <strong>states</strong> you can change link color for with CSS:</p>

<ul>
 <li><code>a:link</code> – represents a link that the user hasn't visited.</li>
 <li><code>a:visited</code> – indicates a link that's been visited by the user before.</li>
 <li><code>a:hover</code> – shows a link with the user's cursor over it.</li>
 <li><code>a:active</code> – marks a link that's being pressed down.</li>
</ul>

<h1>CSS Links (w3schools.com)</h1>

<h2>Styling Links</h2>

<p>Links can be styled with any CSS property (e.g. <code>color</code>, <code>font-family</code>, <code>background</code>, etc.).</p>

<h3>Example (0)</h3>

<pre>
a {
  color: hotpink;
}
</pre>

<p>In addition, links can be styled differently depending on what <strong>state</strong> they are in.</p>

<p>The four links states are:</p>

<ul>
<li><code>a:link</code> - a normal, unvisited link</li>
<li><code>a:visited</code> - a link the user has visited</li>
<li><code>a:hover</code> - a link when the user mouses over it</li>
<li><code>a:active</code> - a link the moment it is clicked</li>
</ul>

<h3>Example (1)</h3>

<pre>
 /* unvisited link */
a:link {
  color: <span style="color: red;">red;</span>
}

/* visited link */
a:visited {
  color: <span style="color: green;">green;</span>
}

/* mouse over link */
a:hover {
  color: <span style="color: hotpink;">hotpink;</span>
}

/* selected link */
a:active {
  color: <span style="color: blue;">blue;</span>
} 
</pre>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

<h2>Text Decoration</h2>

<p>The <code>text-decoration</code> property is mostly used to remove underlines from links:</p>

<h3>Example (2)</h3>

<pre>
a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: <span style="text-decoration: underline;">underline;</span>
}

a:active {
  text-decoration: <span style="text-decoration: underline;">underline;</span>
}
</pre>

<h2>Background Color</h2>

<p>The <code>background-color</code> property can be used to specify a background color for links:</p>

<h3>Example (3)</h3>

<pre>
a:link {
  background-color: <span style="background-color: yellow;">yellow;</span>
}

a:visited {
  background-color: <span style="background-color: cyan;">cyan;</span>
}

a:hover {
  background-color: <span style="background-color: lightgreen;">lightgreen;</span>
}

a:active {
  background-color: <span style="background-color: hotpink;">hotpink;</span>
}
</pre>

<h2>Link Buttons</h2>

<p>This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:</p>

<h3>Example (4)</h3>

<pre>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</pre>

<h2>More Examples</h2>

<h3>Example (5)</h3>

<h4>Example one:</h4>

<pre>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
</pre>

<pre>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
</pre>

<div class="div-eksempler">
<p><b><a class="w3-links-ex5-one" href="default.asp" target="_blank">This link changes color</a></b></p>
</div>

<h4>Example two:</h4>

<pre>
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
</pre>

<pre>
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
</pre>

<div class="div-eksempler">
<p><b><a class="w3-links-ex5-two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
</div>

<h4>Example three:</h4>

<pre>
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
</pre>

<pre>
<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
</pre>

<div class="div-eksempler">
<p><b><a class="w3-links-ex5-three" href="default.asp" target="_blank">This link changes background-color</a></b></p>
</div>

<h4>Example four:</h4>

<pre>
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
</pre>

<pre>
<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
</pre>

<div class="div-eksempler">
<p><b><a class="w3-links-ex5-four" href="default.asp" target="_blank">This link changes font-family</a></b></p>
</div>

<h4>Example five:</h4>

<pre>
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</pre>

<pre>
<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</pre>

<div class="div-eksempler">
<p><b><a class="w3-links-ex5-five" href="default.asp" target="_blank">This link changes text-decoration</a></b></p>
</div>

<h3>Example (6)</h3>

<p>Another example of how to create link boxes/buttons:</p>

<pre>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</pre>

<h3>Example (7)</h3>

<p>This example demonstrates the different types of cursors (can be useful for links):</p>

<pre>
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span> 
</pre>

<div class="div-eksempler">
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span> 
</div>

<h3>Target - Åpne i nytt vindu</h3>

<pre>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
</pre>

<div class="div-eksempler">
<p>Dette er en ekstern link-tekst: 
<a style="color:blue;" href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a> 
som åpnes i nytt vindu/tab.</p>
</div>

<h3>Button as a Link</h3>

<p>
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
</p>

<pre>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</pre>

<div class="div-eksempler">
<p>Click the button to go to the HTML tutorial.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
</div>

<pre>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
</pre>

<div class="div-eksempler">
<a style="color:blue;" href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>
</div>

<h3>Bilde som link</h3>

<h2>EPOST</h2>

<p>The link will only work if you have email installed.</p>

<pre>
<p>Dette er en epost-adresse:
 <a href="mailto:someone@example.com">
Send email</a></p>
</pre>

<div class="div-eksempler">
<code>mailto:someone@example.com</code>
<p>Dette er en epost-adresse: <a style="color:blue;" href="mailto:someone@example.com">Send email</a></p>
</div>

<h3>Link to email with Subject</h3>

<p>Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.</p>

<pre>
This is an email link:
<p><a href=
"mailto:someone@example.com?Subject=Hello%20again"
 target="_top">
Send Mail</a></p>
</pre>

<div class="div-eksempler">
<code>mailto:someone@example.com?Subject=Hello%20again</code>
<p>This is an email link: <a style="color:blue;" href="mailto:someone@example.com?Subject=Hello%20again" target="_top">Send Mail</a></p>
</div>

<h3>Link to email with Subject incl. Text + Copy</h3>

<pre>
<p>
This is another mailto link:
<a href="mailto:someone@example.com
?cc=someoneelse@example.com
&bcc=andsomeoneelse@example.com
&subject=Summer%20Party
&body=You%20are%20invited%20to%20a%20big%20summer%20party!"
 target="_top">Send mail!</a>
</p>
</pre>

<div class="div-eksempler">
<code>mailto:someone@example.com<br />
?cc=someoneelse@example.com<br />
&bcc=andsomeoneelse@example.com<br />
&subject=Summer%20Party<br />
&body=You%20are%20invited%20to%20a%20big%20summer%20party!</code>
<p>
This is another mailto link:
<a style="color:blue;" href="mailto:someone@example.com
?cc=someoneelse@example.com
&bcc=andsomeoneelse@example.com
&subject=Summer%20Party
&body=You%20are%20invited%20to%20a%20big%20summer%20party!"
 target="_top">Send mail!</a>
</p>
</div>

<h3>Basic</h3>

<pre>
<a href="mailto:
someone@yoursite.com">
Email Us</a>
</pre>

<div class="div-eksempler">
<a style="color:blue;" href="mailto:
someone@yoursite.com">
Email Us</a>
</div>

<h3>Adding a subject</h3>

<pre>
<a href="mailto:
someone@yoursite.com
?subject=Mail from Our Site">Email Us</a> 
</pre>

<div class="div-eksempler">
<a style="color:blue;" href="mailto:
someone@yoursite.com
?subject=Mail from Our Site">Email Us</a> 
</div>

<h3>Adding CC and BCC</h3>

<pre>
<a href="mailto:
someone@yoursite.com
?cc=someoneelse@theirsite.com,
 another@thatsite.com,
 me@mysite.com
 &bcc=lastperson@theirsite.com
 &subject=Big%20News">Email Us</a>
</pre>

<div class="div-eksempler">
<a style="color:blue;" href="mailto:
someone@yoursite.com
?cc=someoneelse@theirsite.com,
 another@thatsite.com,
 me@mysite.com
 &bcc=lastperson@theirsite.com
 &subject=Big%20News">Email Us</a>
</div>

<h2>DIVERSE EKSEMPLER:</h2>

<pre>
a.homepage:link, a.homepage:visited {
   padding: 1px 10px 1px 10px;
   color: #fff;
   background: #666;
   border-radius: 3px;
   border: 1px outset rgba(50,50,50,.5);
   font-family: georgia, serif;
   font-size: 14px;
   font-style: italic;
   text-decoration: none;
 }

a.homepage:hover, a.homepage:focus, a.homepage:active {
   background-color: #333;
 }
</pre>

<pre>
a:link {color:teal;}      /* unvisited links are this blue-green */
a:visited {color:red;}    /* already visited links will be red */
a:hover {color:gold;}     /* hover the mouse over a link, it turns gold */
a:active {color:orange;}  /* click the link, it turns orange */ 
</pre>

<div class="div-eksempler">
<a style="color:teal;" href="">Link</a>
<a style="color:red;" href="">Visited</a>
<a style="color:gold;" href="">Hover</a>
<a style="color:orange;" href="">Active</a>
</div>

<pre>
a.nav:link {color: blue; text-decoration: none; }
a.nav:visited {color: purple; text-decoration: none; }
a.nav:hover {color: orange; text-decoration: underline; }
a.nav:active {color: red; } 
</pre>

<div class="div-eksempler">
<a style="color: blue; text-decoration: none;" href="">Link</a>
<a style="color: purple; text-decoration: none;" href="">Visited</a>
<a style="color: orange; text-decoration: underline;" href="">Hover</a>
<a style="color: red; text-decoration: underline;" href="">Active</a>
</div>

<pre>
a.external:link {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.external:visited {color: #894f7b; font-weight: bold; }
a.external:hover {text-decoration: overline; background-color: #003399; }
a.external:active {color: red; }
</pre>

<div class="div-eksempler">
<a style="color: #0000ff; font-size: 18pt; font-weight: bold;" href="">Link</a>
<a style="color: #894f7b; font-size: 18pt; font-weight: bold;" href="">Visited</a>
<a style="color: #0000ff; font-size: 18pt; text-decoration: overline; background-color: #003399;" href="">Hover</a>
<a style="color: red; font-size: 18pt; text-decoration: overline; background-color: #003399;" href="">Active</a>
</div>

<pre>
a:link {
  background-color: coral;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: DarkMagenta;
  color:yellow;
  text-decoration: none;
}
a:active {
  background-color: DarkSalmon;
}
</pre>

<div class="div-eksempler">
<a style="background-color: coral;" href="">Link</a>
<a style="background-color: cyan;" href="">Visited</a>
<a style="background-color: DarkMagenta; color:yellow; text-decoration: none;" href="">Hover</a>
<a style="background-color: DarkSalmon; color:yellow; text-decoration: none;" href="">Active</a>
</div>

<pre>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</pre>

<div class="div-eksempler">
<a style="background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;" href="">Link</a>
<a style="background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;" href="">Visited</a>
<a style="background-color: red;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;" href="">Hover</a>
<a style="background-color: red;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;" href="">Active</a>
</div>

<pre>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</pre>

<div class="div-eksempler">
<a style="background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;" href="">Link</a>
<a style="background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;" href="">Visited</a>
<a style="background-color: green;
  color: white;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;" href="">Hover</a>
<a style="background-color: green;
  color: white;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;" href="">Active</a>
</div>

<pre>
 a:link, a:visited {
  background-color: purple;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  text-decoration: none;
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
}

a:hover, a:active {
  background-color: #6D0062;
}
</pre>

<p>PB: Her er det egentlig også en forsinkelse på fargeskiftet.</p>

<div class="div-eksempler">
<a style="background-color: purple;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;" href="">Link</a>
<a style="background-color: purple;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;" href="">Visited</a>
<a style="background-color: #6D0062;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;" href="">Hover</a>
<a style="background-color: #6D0062;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;" href="">Active</a>
</div>

<pre>
a:link, a:visited {
  background-color: DarkSalmon;
  border: none;
  color: #FFFFFF;
  padding: 25px 52px;
  text-align: center;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  text-decoration: none;
  font-size: 20px;
  text-align: center; 
  cursor: pointer;
  display: inline-block;
}
a:hover, a:active {
  background-color: DarkRed;
}
</pre>

<p>PB: Her er det egentlig også en forsinkelse på fargeskiftet.</p>

<div class="div-eksempler">
<a style="background-color: DarkSalmon;
 border: none;
 color: #FFFFFF;
 padding: 25px 52px;
 text-align: center;
 text-decoration: none;
 font-size: 20px;
 text-align: center;" href="">Link</a>
<a style="background-color: DarkSalmon;
 border: none;
 color: #FFFFFF;
 padding: 25px 52px;
 text-align: center;
 text-decoration: none;
 font-size: 20px;
 text-align: center;" href="">Visited</a>
<a style="background-color: DarkRed;
 border: none;
 color: #FFFFFF;
 padding: 25px 52px;
 text-align: center;
 text-decoration: none;
 font-size: 20px;
 text-align: center;" href="">Hover</a>
<a style="background-color: DarkRed;
 border: none;
 color: #FFFFFF;
 padding: 25px 52px;
 text-align: center;
 text-decoration: none;
 font-size: 20px;
 text-align: center;" href="">Active</a>
</div>

<pre>
a:link, a:visited {
  color: white;
  background-color: #1ebba3;
  display: inline-block;
  padding: 10px 20px;
  border: 2px solid #099983;
  text-decoration: none;
  text-align: center;
  font: 14px Arial, sans-serif;
}
a:hover, a:active {
  background-color: #9c6ae1;
  border-color: #7443b6;
}
</pre>

<div class="div-eksempler">
<a style="color: white;
 background-color: #1ebba3;
 display: inline-block;
 padding: 10px 20px;
 border: 2px solid #099983;
 text-decoration: none;
 text-align: center;
 font: 14px Arial, sans-serif;" href="">Link</a>
<a style="color: white;
 background-color: #1ebba3;
 display: inline-block;
 padding: 10px 20px;
 border: 2px solid #099983;
 text-decoration: none;
 text-align: center;
 font: 14px Arial, sans-serif;" href="">Visited</a>
<a style="color: white;
 background-color: #9c6ae1;
 display: inline-block;
 padding: 10px 20px;
 border: 2px solid #7443b6;
 text-decoration: none;
 text-align: center;
 font: 14px Arial, sans-serif;" href="">Hover</a>
<a style="color: white;
 background-color: #9c6ae1;
 display: inline-block;
 padding: 10px 20px;
 border: 2px solid #7443b6;
 text-decoration: none;
 text-align: center;
 font: 14px Arial, sans-serif;" href="">Active</a>
</div>

<pre>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 1px solid blue;
  padding: 30px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
  color: white;
}
</pre>

<div class="div-eksempler">
<a style="background-color: white;
 color: black;
 border: 1px solid blue;
 padding: 30px 30px;
 text-align: center;
 text-decoration: none;" href="">Link</a>
<a style="background-color: white;
 color: black;
 border: 1px solid blue;
 padding: 30px 30px;
 text-align: center;
 text-decoration: none;" href="">Visited</a>
<a style="background-color: red;
 color: white;
 border: 1px solid blue;
 padding: 30px 30px;
 text-align: center;
 text-decoration: none;" href="">Hover</a>
<a style="background-color: red;
 color: white;
 border: 1px solid blue;
 padding: 30px 30px;
 text-align: center;
 text-decoration: none;" href="">Active</a>
</div>

<pre>
a {
  background-color: RoyalBlue;
  color:white;
  padding:5px 5px;
  border-radius:5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  background-color: blue;
}
</pre>

<div class="div-eksempler">
<a style="background-color: RoyalBlue;
 color:white;
 padding:5px 5px;
 border-radius:5px;
 text-align: center;
 text-decoration: none;" href="">Link</a>
<a style="background-color: RoyalBlue;
 color:white;
 padding:5px 5px;
 border-radius:5px;
 text-align: center;
 text-decoration: none;" href="">Visited</a>
<a style="background-color: blue;
 color:white;
 padding:5px 5px;
 border-radius:5px;
 text-align: center;
 text-decoration: none;" href="">Hover</a>
<a style="background-color: blue;
 color:white;
 padding:5px 5px;
 border-radius:5px;
 text-align: center;
 text-decoration: none;" href="">Active</a>
</div>

<h3>https://www.tutora.no/hvordan-style-linker-i-css/</h3>

<p>...Hvis du vil at alle linkene dine skal være røde kan du skrive følgende CSS-regel.</p>

<pre>
a {
  color: <span style="color: red;">red;</span>
}
</pre>

<p>Eller du kan skrive den slik.</p>

<pre>
a:link {
  color: <span style="color: red;">red;</span>
}
</pre>

<p>Begge linjene gir samme resultat. Hvis du ikke trenger å style de andre tilstandene 
til linkene dine kan du godt bare ha en regel hvor du dropper <code>:link</code> men hvis du 
først har tenkt til å style alle tilstandene så ser det mer ryddig ut skrive den 
tilstanden med <code>:link</code>.</p>

<p>Standard farge på linker er blå i så og si alle nettlesere. Hvis du vil gjøre om 
fargen til det samme som resten av teksten kan du lage følgende CSS-regel.</p>

<pre>
a:link {
  color: #000;
}
</pre>

<p>Den vil fortsatt skille seg ut ved at den har en strek under seg men den vil nå gå 
litt mer i ett med teksten. Hvis det er det man ønsker seg. Så kan vi sette den aktive 
tilstanden til rød og gi den en litt gråaktig farge når den har vært besøkt.</p>

<pre>
a:active {
  color: <span style="color: #f00;">#f00;</span>
}
a:visited {
  color: <span style="color: #666;">#666;</span>
}
</pre>

<p>På Hover-tilstanden kan vi velge å ta bort understreken istedenfor å endre farge. 
Det er selvfølgelig mange andre ting du kan gjøre med linker, men det kan du 
eksperimentere med på egenhånd. Sett inn følgende kode på <code>a:hover</code>.</p>

<pre>
a:hover {
  text-decoration: none;
}
</pre>

<p>Legg også merke til at musepekeren forandrer seg nå den kommer over en link. 
Dette er også noe vi kan styre med CSS. Den vanlige musepekeren, pilen, kalles 
for default. Den musepekeren som kommer opp når den er over en link kalles pointer. 
Dette er CSS-regelen som ligger i alle nettlesere som gjør om musepekeren når den 
kommer over <code>a</code>-elementet.</p>

<pre>
a:hover {
  cursor: <span style="cursor: pointer">pointer</span>;
}
</pre>

<p>Ved å endre den til noe annet enn pointer kan du få mange forskjellige resultater.</p>

<h2>w3schools: How TO - Outline Buttons</h2>
<h3>https://www.w3schools.com/howto/howto_css_outline_buttons.asp</h3>

<pre>
.btn {
  border: 2px solid black;
  border-radius: 5px;
  background-color: white;
  color: black;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
}

/* Green */
.success {
  border-color: #4CAF50;
  color: green;
}

.success:hover {
  background-color: #4CAF50;
  color: white;
}

/* Blue */
.info {
  border-color: #2196F3;
  color: dodgerblue
}

.info:hover {
  background: #2196F3;
  color: white;
}

/* Orange */
.warning {
  border-color: #ff9800;
  color: orange;
}

.warning:hover {
  background: #ff9800;
  color: white;
}

/* Red */
.danger {
  border-color: #f44336;
  color: red
}

.danger:hover {
  background: #f44336;
  color: white;
}

/* Gray */
.default {
  border-color: #e7e7e7;
  color: black;
}

.default:hover {
  background: #e7e7e7;
}
</pre>

<pre>
<h1>Rounded Outline Buttons</h1>

<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>
</pre>

<div class="div-eksempler">
<div class="w3-outline">
<button class="btn success">Success</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>
</div>
</div>

<h2>w3schools: How TO - Split Buttons</h2>
<h3>https://www.w3schools.com/howto/howto_css_button_split.asp</h3>

<h3>Example Explained</h3>

<p>Use any element to open the dropdown menu, e.g. a <button>, <a> 
or <p> element.</p>

<p>Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside 
it.</p>

<p>Wrap a <div> element around the button and the <div> to position the dropdown 
menu correctly with CSS.</p>

<pre>
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}

.dropdown {
  position: absolute;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
  display: block;
}

.btn:hover, .dropdown:hover .btn {
  background-color: #0b7dda;
}
</pre>

<pre>
<h2>Split Button Dropdowns</h2>
<p>Move the mouse over the arrow icon to open the dropdown menu.</p>

<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid #0d8bf2">
  
    <i class="fa fa-caret-down"></i> <span style="color:red; font-size:26px;"><b>MANGLER</b></span>
	
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
</pre>

<h2>w3schools: How TO - Read More Read Less Button</h2>
<h3>https://www.w3schools.com/howto/howto_js_read_more.asp</h3>

<h1 style="color:red;">DENNE ER NYTTIG PÅ MUSIKKORDBOKENS STØRRE DELER!!!</h1>

<pre>
#more {display: none;}
</pre>

<pre>
<h2>Read More Read Less Button</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel
<span id="dots">...</span>
<span id="more">erisque enim ligula venenatis dolor. 
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. 
Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, 
sed ullamcorper ipsum dignissim ac. 
In at libero sed nunc venenatis imperdiet sed ornare turpis. 
Donec vitae dui eget tellus gravida venenatis. 
Integer fringilla congue eros non fermentum. 
Sed dapibus pulvinar nibh tempor porta.</span></p>

if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>
</pre>

<div class="div-eksempler">
<h2>Read More Read Less Button</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel
<span id="dots">...</span>
<span id="more" style="display: none;">erisque enim ligula venenatis dolor. 
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. 
Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, 
sed ullamcorper ipsum dignissim ac. 
In at libero sed nunc venenatis imperdiet sed ornare turpis. 
Donec vitae dui eget tellus gravida venenatis. 
Integer fringilla congue eros non fermentum. 
Sed dapibus pulvinar nibh tempor porta.</span></p>

<h2>w3schools: How TO - Next and Previous Buttons</h2>
<h3>https://www.w3schools.com/howto/howto_css_next_prev.asp</h3>

<pre>
a {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

.previous {
  background-color: #f1f1f1;
  color: black;
}

.next {
  background-color: #4CAF50;
  color: white;
}

.round {
  border-radius: 50%;
}
</pre>

<pre>
<a href="#" class="previous">« Previous</a>
<a href="#" class="next">Next »</a>

<div class="div-eksempler">
<div class="w3-next-prev">
<a href="#" class="previous">« Previous</a>
<a href="#" class="next">Next »</a>

<h3>https://www.tutorialspoint.com/how-to-style-block-buttons-full-width-with-css</h3>

<p>En stylet BUTTON til noe helt annet, med HOVER-effekt.</p>

<pre>
.blockBtn {
   display: block;
   width: 100%;
   border: none;
   background-color: rgb(19, 0, 105);
   color: white;
   padding: 14px 28px;
   font-size: 36px;
   cursor: pointer;
   text-align: center;
   font-weight: bold;
}

.blockBtn:hover {
   background-color: rgb(132, 161, 255);
   color: black;
}
</pre>

<pre>
<h2 style="text-align: center;">Block Button Example</h2>
<button class="blockBtn">Block Button</button>
</pre>

<div class="div-eksempler-null">
<h2 style="text-align: center;">Block Button Example</h2>
<button class="blockBtn">Block Button</button>
<br /><br />
<button>En vanlig button</button>
</div>

</body>
</html>