Hyperlink
When you apply a link to an item in html, it inserts an 'a' class. This may then be targetted using css to apply desired formatting etc.
For example:
<a href="CSS1_Properties.html">hyperlink</a>
displays the text "hyperlink" and clicking on it with a mouse will move your focus to the top of the file "CSS1_Properties.html". The text "hyperlink" is initially formatted in the default style for the particular browser you are using to view the html, usually blue with a blue underscore, with font size and weight depending on the default setting also. Text colour will be as inherited or black as default.
I will now create some css to modify the appearance of this hyperlink text:
I note that it is within the
< div id="mainContent" >
so this will be reflected in the css rule I construct.
I select the
".twoColFixLtHdr #mainContent"
rule where I can add what I want. Because I want to direct the settings specifically to the "a" items in the main content are, and not to anything else, I will create a new rule by copy-pasting the existing CSS rule, adding 'a' to it, deleting the repeated rules already there, and inserting the new ones I want, like so:
.twoColFixLtHdr #mainContent a {
font-weight:bold;
font-size:large;
font-style:italic;
color: #D19A1C;
}
Thus I have changed the default to a bold, italic text, still underlined (as default) but of a different colour to the default blue viz #D19A1C.
Hyperlinks can also be made more interesting and informative, by using the four link states "link, visited, hover, and active".
I have applied this to the hyperlinks in the menu bar, by creating the following CSS code:
#sidebar1 a:link {color:#442CA5;text-decoration:none;} /* unvisited link */
#sidebar1 a:visited {color:#6D4C00;text-decoration:none;} /* visited link */
#sidebar1 a:hover {color:#10014B;text-decoration:underline;} /* mouse over link */
#sidebar1 a:active {color:#002A45;text-decoration:underline;background-color:#18699E;} /* selected link */
Note: When setting the style for several link states, there are some order rules:
1/ a:hover MUST come after a:link and a:visited
2/ a:active MUST come after a:hover