CSS within PHP file Problems!! Help... :(

albobis · #1 (**permalink**) 05-23-06, 01:20 AM

Hi,

I have used some open source php code for a business directory. I have no real experience with CSS and the styles allocated to the links i do not understand.

I basically want some links to have a certain color and then another set of links to have another style. How can i achieve this and assign different styles to text links within php file? Below is what is currently what is there.

Code:

<link href="3/linkbox.css" rel="stylesheet" type="text/css">
	<HTML>
	<HEAD>
	<TITLE>Health & Medical - Health & Medical - Booyah!</TITLE><br>
	<STYLE TYPE="text/css">
  	unanmed1 { font-size: 12px; color: #FFFFFF}
  	H2 { font-size: large; color: blue }
	</STYLE>

	<META NAME="description" CONTENT="Health & Medical listings">
	<META NAME="keywords" CONTENT="Health & Medical listings">
	<STYLE>
	.unnamed1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
}
		BODY {margin: 5% 12%}
	BODY, TD {font-family: Arial; font-size: 12px; color: #666666}
	H1 {font-size: 22px; color: #297CA5; padding-bottom: 10px; border-bottom: 1px solid}
	A:link {color: #216387}
	A:visited {color: #216387}
	A:hover {color: #7ABBDE}
}
.style5 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
<style type="text/css">
<!--
.style1 {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
-->
</style>

Any help would be much appreciated

Christian · #2 (**permalink**) 05-23-06, 12:48 PM

In this example I'm gonna assign style1 to have a link/visited/hover. The bold code is changed/added(btw, I cleaned up your code for you, but you also might consider a adding DOCTYPE

).

Code:

	<HTML>
	<HEAD>
	<TITLE>Health & Medical - Health & Medical - Booyah!</TITLE><br>
	<META NAME="description" CONTENT="Health & Medical listings">
	<META NAME="keywords" CONTENT="Health & Medical listings">
	<link href="3/linkbox.css" rel="stylesheet" type="text/css">
	<style type="text/css">
	<!--
	.unnamed1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	text-decoration: underline;
	}
	BODY {margin: 5% 12%}
	BODY, TD {font-family: Arial; font-size: 12px; color: #666666}
	H1 {font-size: 22px; color: #297CA5; padding-bottom: 10px; border-bottom: 1px solid}
	A:link {color: #216387}
	A:visited {color: #216387}
	A:hover {color: #7ABBDE}
	.unanmed2 { font-size: 12px; color: #FFFFFF}
  	H2 { font-size: large; color: blue }
	.style5 {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	}
	.style1 a:link {color: #000000}
	.style1 a:visited {color: #FFFFFF}
	.style1 a:hover {color: #CCCCCC}
	-->
	</style>

Now, I'm not the best with CSS, but if you have a link with the class of style1 it should change the color for the hover & visited.

Code:

<a href="page.php" class="style1">Text</a>

jfulton · #3 (**permalink**) 05-23-06, 03:46 PM

Code:

	.style1 a:link {color: #000000}
	.style1 a:visited {color: #FFFFFF}
	.style1 a:hover {color: #CCCCCC}

should be

Code:

	a.style1:link {color: #000000}
	a.style1:visited {color: #FFFFFF}
	a.style1:hover {color: #CCCCCC}

eg

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
	<title>Test</title>

		<style type="text/css">
		<!--
		body {background-color:#000000;}
	
		a.style1:link {color: #000000}
		a.style1:visited {color: #FFFFFF}
		a.style1:hover {color: #CCCCCC}
	
		a.style2:link {color: #FF000}
		a.style2:visited {color: #C3EAD4}
		a.style2:hover {color: #FFFF00}
	
		a:link {color: #216387}
		a:visited {color: #216387}
		a:hover {color: #7ABBDE}
		-->
		</style>
		
	</head>
	<body>
		<p>
			<a href="#">no style</a>
		</p>	
		<p>
			<a class="style1" href="#">style1</a>
		</p>
		<p>
			<a class="style2" href="#">style2</a>
		</p>
	</body>
</html>

Christian · #4 (**permalink**) 05-23-06, 04:25 PM

Quote:

Originally Posted by jfulton

Code:

	.style1 a:link {color: #000000}
	.style1 a:visited {color: #FFFFFF}
	.style1 a:hover {color: #CCCCCC}

should be

Code:

	a.style1:link {color: #000000}
	a.style1:visited {color: #FFFFFF}
	a.style1:hover {color: #CCCCCC}

Thanks for setting me straight.

I really need to work on my CSS.

albobis · #5 (**permalink**) 05-24-06, 06:52 PM

I will implement the changes now and see how i go.

Thanks for your replys.

Albob

albobis · #6 (**permalink**) 05-24-06, 07:18 PM

Problem solved!

However how do i add the underline on rollover effect?

This code works great.

.style1 a:link {color: #000000}
.style1 a:visited {color: #FFFFFF}
.style1 a:hover {color: #CCCCCC}

When i try to add an underline state with this code still remains the same as above.

.style1 a:link {color: #FFFFFF}
.style1 a:visited {color: #FFFFFF}
.style1 a:hover {text-decoration: underline; color: #FFFFFF;

Once again any help greatly accepted.

Albob

Christian · #7 (**permalink**) 05-24-06, 07:26 PM

Correct me if I'm wrong, but doesn't a link have an underline normally? To make that code word you have to add text-decoration: none; to the others.

eg.

Code:

a.style1:link {text-decoration: none; color: #000000}
a.style1:visited {text-decoration: none; color: #FFFFFF}
a.style1:hover {text-decoration: underline; color: #CCCCCC}