passionflower
09-30-2006, 10:15 PM
I have changed the color of the links on my page from the default browser color to white. Now I want to change one of the links to a different color than all the rest. I am trying to do this using CSS and it is not working. In hopes that specificity could save the day, I have tried specifying the particular link I would like to change by scripting the exact <div>. Maybe my syntax is off:
a#footer{
color:#fff;
}
I apprecite any thoughts. Thanks.
THE CSS
html{
white-space:pre;
}
body {
font-family: sans-serif;
color: #333;
margin: .4em 10%;
padding:0;
}
div#header{
color: #6A6155;
background-color: transparent;
font-size:14px;
}
div#menu_container{
margin:0px 0px 10px 200px;
width:300px;
position:relative;
top:35px;
}
div#menu{
color:#fff;
text-align:center;
font-style:italic;
background-color:#6A6155;
color:white;
}
div#container{
width:780px;
position:relative;
bottom:50px;
text-align: left;
}
div#content{
width:100%;
overflow:auto;
background-color:none;
}
div#image{
float:left;
padding:0 0 0 4em;
}
div#info{
padding: 0 1em 0 .5em;
float:right;
background-color:none;
}
div#buttons{
width:400px;
position:relative;
bottom:50px;
}
ul{
list-style-type:none;
width:100%;
}
li{
float:left;
width: 100px;
}
a {
color:#fff;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
a:hover{
color:black;
}
p{
margin:0 0 0 0;
padding: 0 0 0 0;
}
div#footer{
float:left;
position:relative;
bottom:50px;
font-size:10px;
}
THE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>E X H I B I T I O N S</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="header"><p><b>3 0 1 B O C A N A </b>| G A L L E R Y | 3 0 1 B o c a n a S t r e e t | S a n F r a n c i s c o C A 9 4 1 1 0 </p></div>
<div id="container">
<div id="menu_container"><div id="menu"><p><a href="index.html"> HOME </a><a href="gallery.html">EXHIBITIONS </a><a href="info.html">INFO</a></p></div></div>
<div id ="content">
<div id="image"><img id="placeholder" src="images/james_invite.jpg" alt="my image gallery" /></div>
<div id="info"><p id="description">September- McNeeley </p>
<p>This art show is up from may to june</p>
<p>write-ups</p>
<p>artist statement</p>
</div>
<div id="buttons">
<ul id="imagegallery">
<li>
<h3><a href="images/james_invite.jpg" title="A fireworks display">
<img src="images/thumbnail_james_invite.jpg" alt="Fireworks" /></h3>
</a>
</li>
<li>
<h3><a href="images/james_cart.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_james_cart.jpg" alt="Coffee" /></h3>
</a>
</li>
<li>
<h3><a href="images/james_birds.jpg" title="A red, red rose">
<img src="images/thumbnail_james_birds.jpg" alt="Rose" /></h3>
</a>
</li>
<li>
<h3><a href="images/mung_diamond.jpg" title="The famous clock">
<img src="images/thumbnail_mung_diamond.jpg" alt="Big Ben" /></h3>
</a>
</li>
</ul></div>
<div id="footer"><p>
G a l l e r y H o u r s : F r i d a y & S a t u r d a y 1 1 - 5 | Ph 4 1 5 . 2 2 5 . 5 4 2 7 | <a href="mailto:teresa@gmail.com" color="#A62823">t e r e s a @ g m a i l . c o m</a>
</p></div>
</div>
</body>
</html>
a#footer{
color:#fff;
}
I apprecite any thoughts. Thanks.
THE CSS
html{
white-space:pre;
}
body {
font-family: sans-serif;
color: #333;
margin: .4em 10%;
padding:0;
}
div#header{
color: #6A6155;
background-color: transparent;
font-size:14px;
}
div#menu_container{
margin:0px 0px 10px 200px;
width:300px;
position:relative;
top:35px;
}
div#menu{
color:#fff;
text-align:center;
font-style:italic;
background-color:#6A6155;
color:white;
}
div#container{
width:780px;
position:relative;
bottom:50px;
text-align: left;
}
div#content{
width:100%;
overflow:auto;
background-color:none;
}
div#image{
float:left;
padding:0 0 0 4em;
}
div#info{
padding: 0 1em 0 .5em;
float:right;
background-color:none;
}
div#buttons{
width:400px;
position:relative;
bottom:50px;
}
ul{
list-style-type:none;
width:100%;
}
li{
float:left;
width: 100px;
}
a {
color:#fff;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
a:hover{
color:black;
}
p{
margin:0 0 0 0;
padding: 0 0 0 0;
}
div#footer{
float:left;
position:relative;
bottom:50px;
font-size:10px;
}
THE HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>E X H I B I T I O N S</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
<link rel="stylesheet" href="styles/layout.css" type="text/css" media="screen" />
</head>
<body>
<div id="header"><p><b>3 0 1 B O C A N A </b>| G A L L E R Y | 3 0 1 B o c a n a S t r e e t | S a n F r a n c i s c o C A 9 4 1 1 0 </p></div>
<div id="container">
<div id="menu_container"><div id="menu"><p><a href="index.html"> HOME </a><a href="gallery.html">EXHIBITIONS </a><a href="info.html">INFO</a></p></div></div>
<div id ="content">
<div id="image"><img id="placeholder" src="images/james_invite.jpg" alt="my image gallery" /></div>
<div id="info"><p id="description">September- McNeeley </p>
<p>This art show is up from may to june</p>
<p>write-ups</p>
<p>artist statement</p>
</div>
<div id="buttons">
<ul id="imagegallery">
<li>
<h3><a href="images/james_invite.jpg" title="A fireworks display">
<img src="images/thumbnail_james_invite.jpg" alt="Fireworks" /></h3>
</a>
</li>
<li>
<h3><a href="images/james_cart.jpg" title="A cup of black coffee" >
<img src="images/thumbnail_james_cart.jpg" alt="Coffee" /></h3>
</a>
</li>
<li>
<h3><a href="images/james_birds.jpg" title="A red, red rose">
<img src="images/thumbnail_james_birds.jpg" alt="Rose" /></h3>
</a>
</li>
<li>
<h3><a href="images/mung_diamond.jpg" title="The famous clock">
<img src="images/thumbnail_mung_diamond.jpg" alt="Big Ben" /></h3>
</a>
</li>
</ul></div>
<div id="footer"><p>
G a l l e r y H o u r s : F r i d a y & S a t u r d a y 1 1 - 5 | Ph 4 1 5 . 2 2 5 . 5 4 2 7 | <a href="mailto:teresa@gmail.com" color="#A62823">t e r e s a @ g m a i l . c o m</a>
</p></div>
</div>
</body>
</html>