Changing Outlook of Link


  • To change color, create the following CSS :

a:link {
color: green;
font-weight: bold;
}
a:hover {
background-color: yellow;
}


And the result : A link with text green and background yellow : Obrist Europe swiss wines in Germany

Another link with snapshot of the target : Obrist best swiss wines


  • Removing the underline, define a class for anchor and remove border :

a.udl {
border: 0px none;
text-decoration: none;
}


And the result, without underline : Schenk The Wine Experts

Another link with snapshot of the target : Schenk is Switzerland's leader in the wine sector


  • Using CSS without class or id change the links for all the page


CSS Pseudo-classes with class


  • Formally, the oulook of link is defined with CSS Pseudo-classes
  • Pseudo-classes must be written in this order link, visited, hover and active (LoVe - HAte)
  • Pseudo-classes can be combined with CSS classes
  • The :focus pseudo-class adds a special style to an element while the element has focus (Does not work with IE)
  • We can now write a style sheet for a class s_link

/* pseudo class with css class s_link */

a.s_link:link
{
color: #009926;
font-weight: bold;
text-decoration: none;
border: 0 none;
}

a.s_link:visited
{
color: #997300;
text-decoration: none;
border: 0 none;
}

a.s_link:hover
{
color: #990026;
font-weight: bold;
text-decoration: none;
border: 0 none;
background-color: #ffc414;
}

a.s_link:active
{
color: red;
font-weight: bold;
text-decoration: solid;
}

a.s_link:focus
{
color: #009926;
font-weight: bold;
}


  • To use this style we just add class="s_link" to the anchor which must be changed


<a href="URL" class="s_link" ...>Link</a>


And the result : Bolle Source de vin depuis 1865

And the same link, with snapshot of the target : Bolle Source de vin depuis 1865


  • Visit the link, you will see the different style. Compare the previous visited link with this one : Domaine du Mont d'Or


Loading the Style Sheet


  • The normal way to use an external style sheet is to use a <link> tag :


<link rel="stylesheet" type="text/css" href="http://YOURSITE.googlepages.com/external_sheet.css">

  • GPC remove this tag, we must call the external sheet using a script
  • Write this javascript in the first editable section of the page, after the header :

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/external_sheet.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for outlook of link';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>



Defining the Color


  • Using color, either by name, by code or using RGB :

background-color: yellow;

background-color: #ff0000;

background-color: rgb(0,0,255);



More Informations



One Day - One Label - One Wine

Add this gadget to Google



Using GPC