page with different links

edbr · 09-04-2008, 02:45 AM

I have made a page here with different link styles, styles included in the head.
Hopefully it will give examples to the much asked question re "can i have different types of links?"

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body{font-family:Georgia, "Times New Roman", Times, serif;
color:#000000; font-size:12pt;}

a {
color:#09c; font-size:10pt; font-family:book antiqua,Trebuchet MS;
font-weight:normal;}




#wrapper {
    position:relative;    width:80%;    height:auto; margin-left:10%; margin-right:10%;}

    #header {    position:relative;    width:100%;    height:50px; float:left; position:relative; clear:right    ; background-color:#00FF00;} 
      
#sidebar {    position:relative;    width:20%;    height:auto;    float:left;    background-color:#CCCCCC;}
    
    .two {font-family:book antiqua,Trebuchet MS;

}

#footer{width:100%; height:50px; background-color:#0000FF; float:left; clear:left;}


#footer a:link {color:#FFF; font-size:16px;}
#footer a:visited {color:#FFF;font-size:16px; }
#footer a:hover{color:#FFF;font-size:16px;font-size:150%;}


.two a:link {color:#000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;
font-weight:normal;
text-decoration:none;}
.two a:visited {color:#ff0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;
font-weight:normal;
text-decoration:none;}
.two a: hover{color:#FF0000;font-size:14pt;
font-family:book antiqua,Trebuchet MS;
font-weight:normal;
text-decoration:none;}

.content{width:80%; float:left; position:relative; border:#999999 solid 1px:}
-->
</style>
</head>

<body>
<div id="wrapper"> <div id="header"> This is the header</div> <!--end header-->
 
 
<div id="sidebar">
  <a href="a_page.html">this is a standard link</a>
       <br />
   <div class="two" ><a href="a_page.html" >this is two class link    </a></div> 
</div> <!--end sidebar-->
<div class"content">Content division<br />
<a href="a_page.html">this is a standard link</a></div>

<div id="footer">
  <p><a href="a_page.html">this is any link in the footer div</a></div><!-- end footer-->
</div><!-- end wrapper-->
</body>
</html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Switch to Hybrid Mode Threaded Mode