Two different links in css.

**james1978** · 02-14-2005, 03:43 PM

I am using Dreamweaver for my site and have created css link styles. I need another link style for my headings in the site. How do I do this? Has any one got a link to a tutorial?

**CasaPages** · 02-14-2005, 04:24 PM

you can do this a bunch of different ways

using h1 h2 h3 or h4

you can do it using classes and you can also do it using division tags

The following link is to an excellent tutorial on CSS http://www.w3schools.com/css/default.asp

lastly if you want post the code and I can try to solve your problem and explain how.

**ghettobert** · 02-14-2005, 06:03 PM

Why not setting the linking attributes of the used tag ? While doing that it's just a matter of setting the different states. You're familiar with the different link states ? a:link, a:visited a:hover and a:active ?

Let's say you would want all the h3 formatted links to be red when the page 'loads', blue when visited, yellow on rollover and green when you actually click it that would turn into the following;

<style type="text/css">

</style>

Now modify these as you had in mind, because this obviously looks terrible

**CasaPages** · 08:38 PM

true you could do it that way but the divsion tag might be better for something like that. The reason being this way you can signafy which menus are which and you can have many more variations. for example:

your XHTML would look like this

HTML Code:

<!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
 
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 <title>Menu with divisions</title>
 
 <link rel="stylesheet" type="text/css" href="style.css" />
 
 </head>
 <body>
 
 <h1 class="center">Menus with divisions</h1>
 <hr />
 
 <br />
 
 <div id="sidenav">
 <p class="sub">Menu 1<br />
 <a href="#">Menu Item 1</a><br />
 <a href="#">Menu Item 2</a><br />
 <a href="#">Menu Item 3</a><br />
 <a href="#">Menu Item 4</a>
 </p>
 </div>
 
 <hr align="left" width="200" />
    
 <div id="sidenav2">
 <p class="sub">Menu 2<br />
 <a href="#">Menu Item 1</a><br />
 <a href="#">Menu Item 2</a><br />
 <a href="#">Menu item 3</a>
 </p>
 </div>
 
 </body>
 
 </html>

and your style.css file would be this

Code:

body
 {
 background-color: #000000;
 }
 
 .left {text-align: left}
 .right {text-align: right}
 .center {text-align: center}
 
 .sub
 {
 font-family: times;
 text-align: left;
 font-style: normal;
 font-weight: bold;
 color:white;
 font-size: 125%;
 }
 
 
 
 h1
 {
 font-family: times;
 font-size: 200%;
 color:white
 }
 
 p
 {
 text-align: left;
 font-family: times; 
 color:white
 }
 
 ol
 {
 list-style: none;
 }
 
 #sidenav a:link 
 {
 color:white;
 text-decoration: none;
 font-family: times;
 font-style: normal;
 font-weight: bold;
 font-size: 125%
 }
 
 #sidenav a:visited 
 {
 color:white;
 text-decoration: none;
 font-family: times;
 font-style: normal;
 font-weight: bold;
 font-size: 125%
 }
 
 #sidenav a:hover 
 {
 color: #C0C0C0;
 text-decoration: none;
 font-family: arial;
 font-style: italic;
 font-weight: bold;
 font-size: 150%
 }
 
 #sidenav a:active 
 {
 color:red; 
 font-family: times;
 text-decoration: none;
 font-style: italic;
 }
 
 	#sidenav2 a:link	
 	{
 	color: #999999; 
 	text-decoration: none;
 	font-family: times;
 	font-style: italic;
 	font-weight: normal;
 	font-size: 75%;
 	}
 
 	#sidenav2 a:visited 
 	{
 	color: #999999;
 	font-family: times;
 	text-decoration: none;
 	font-style: italic;
 	font-weight: normal;
 	font-size: 75%;
 	}
 
 	#sidenav2 a:hover
 	{
 	color: #C0C0C0;
 	text-decoration: none;
 	font-family: arial;
 	font-style: italic;
 	font-weight: bold;
 	font-size: 100%;
 	}
 	
 	#sidenav2 a:active  
 	{
 	color: red; 
 	font-family: times;
 	text-decoration: none;
 	font-size: 100%;
 	}

Granted that looks like alot but it's really not. The plus side of doing it like this, is that you have alot more options availble for tweaking each item separately. The previous is just a sample it's nothing special.

**james1978** · 02-17-2005, 05:28 AM

Thank you for these examples guys.