PDA

View Full Version : Need Help Styling Link List Text


Matthew
2nd Nov 2009, 04:09 pm
Ok, I think I've looked at this to long to see the forest for the trees. I was styling a list of links and wanted to changed the colour of the text in the link but could only change the colour of the bullet on any list item. I'll put a code below so you can see what I'm taking about. You should be able to copy/paste it into your web editor to see what it does.

---------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Styling Link Text</title>

<style type="text/css">

#design { list-style-type:disc; color: #FF9900;text-transform:uppercase;}
a:link {text-decoration:none;}

</style>

</head>

<body>

<ul>
<li id="design"><a href="html/week1-what-is-webdesign/what-is-web-desing.html" title="Week 1 - What is Web Design?">Week 1 - What is Web Design?</a></li>

</ul>

</body>
</html>
David
2nd Nov 2009, 05:53 pm
OK, the rule you used changes the colour of the list item and that's why the bullet changes and any text that isn't inside the anchor tag.

In order to change the link colour, you need to target it like this:



<style type="text/css">

#design { list-style-type:disc; color: #FF9900;text-transform:uppercase;}
#design a {color: #FF9900;}
a:link {text-decoration:none;}

</style>
Matthew
2nd Nov 2009, 06:22 pm
Thanks for that, I thought the answer would be simple. I managed to change the colour of the text using a "a:link {color:xxxxx;} rule but that obviously styled all links, not what I wanted to do.

Also, thanks for reporting back on the positioniseverything.