My first CSS isn't working

[Steven Bourne]

I don't really know much about CSS since I've always been hesitant to use
it, but I downloded Style Master and tried to create a basic CSS sheet.
Everything looks great, except that I want one set of links to look
different from another. So I defined it as a "footer" link, and in my html
page I specified <a class=footer> before the link. My problem is that it is
not following any of the rules in my CSS. It should be size 10px and it
should underline on an active hover. However it is always underlined, and
doesn't change when you hover it. I also can not change the size of the
font on it.

Would anyone mind taking a look at it for me? The CSS is fairly basic, and
I was able to get it to work before, so I don't know what's wrong. It is
the very bottom link that says "webmaster" at this site:

http://www.gottadancesc.com/index.html

The code looks like this:

<A class="footer" href="mailto:[email protected]">webmaster</a>

Here's my CSS:
----------------------------------------

body { color: #000000;
background-color: #ffffff;
margin: 0px;
padding: 0px;
border-style: none;
border-width: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.2em;

text-align: left;}

a.footer:link {color: #000000;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;}

a.footer:visited {color: #000000;
text-decoration: underline}

a.footer:hover {color: #000000;
text-decoration: underline;
font-weight: normal;}

a:link {color: #000084;
background-color: #ffffff;
text-decoration: none;
font-size: 16px;}

a:hover {color: #ff84ff;
text-decoration: none;}


Thanks for any help!

 

[Edwin van der Vaart]

I don't really know much about CSS since I've always been hesitant to use
it, but I downloded Style Master and tried to create a basic CSS sheet.
Everything looks great, except that I want one set of links to look
different from another. So I defined it as a "footer" link, and in my html
page I specified <a class=footer> before the link. My problem is that it is
not following any of the rules in my CSS. It should be size 10px and it
should underline on an active hover. However it is always underlined, and
doesn't change when you hover it. I also can not change the size of the
font on it.

Would anyone mind taking a look at it for me? The CSS is fairly basic, and
I was able to get it to work before, so I don't know what's wrong. It is
the very bottom link that says "webmaster" at this site:

http://www.gottadancesc.com/index.html

[snip]

a.footer:link {color: #000000;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;}

a.footer:visited {color: #000000;
text-decoration: underline}

a.footer:hover {color: #000000;
text-decoration: underline;
font-weight: normal;}

Why don't you try to put the a.footer:hover above the a.footer:visited.
Also a advise to add a background by the color. If you already have
specified a background e.g. in the body, you can use transparent as
background.

 

[David Dorward]

Why don't you try to put the a.footer:hover above the a.footer:visited.

"Note that the A:hover must be placed after the A:link and A:visited rules"
- http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

 

[Els]

Steven Bourne wrote:

[link at the bottom]

It should be size 10px and it
should underline on an active hover. However it is always underlined, and
doesn't change when you hover it. I also can not change the size of the
font on it.

http://www.gottadancesc.com/index.html

The code looks like this:

<A class="footer" href="mailto:[email protected]">webmaster</a>

a.footer:link {color: #000000;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;}

a.footer:visited {color: #000000;
text-decoration: underline}

a.footer:hover {color: #000000;
text-decoration: underline;
font-weight: normal;}

Here on my pc, the text is 10px, and the link isn't
underlined until hovered.
I think the link has been visited on your pc, (even though I
don't know how that works with a mailto link) which means it
will have underlining.
If you change text-decoration:underline; to
text-decoration:none; for a.footer:visited, your copy will
loose the underlining too, I suppose

 

[Edwin van der Vaart]

Edwin van der Vaart wrote:




"Note that the A:hover must be placed after the A:link and A:visited rules"
- http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Thanx for the confirmation.
I wasn't sure, because I normally use A.foo instead of A.foo:link.

 

[Sid Ismail]

: My problem is that it is
: not following any of the rules in my CSS. It should be size 10px and it
: should underline on an active hover. However it is always underlined, and
: doesn't change when you hover it. I also can not change the size of the
: font on it.


http://www.westciv.com/style_master/academy/hands_on_tutorial/

Sid

 

[Steven Bourne]

My page background if plain white, specified in the top of the css file. So
should I specify the background for the links to be white? Or should I
specify them to be transparent? And what does that do? Won't they be
transparent by default?Won't they just d

 

[Steven Bourne]

I've read that, it doesn't explain why my footer link is the same size as my
body text, even though I have the body text specified to be 16px and the
footer to be 10px.

 

[Steven Bourne]

Thanks so much! That fixed it. I'm not sure why the link is 10px on your
computer. I have the body text specified to be 16px and the footer links to
be 10px, but for some reason they're the same size.

Steven Bourne wrote:

[link at the bottom]

It should be size 10px and it
should underline on an active hover. However it is always underlined, and
doesn't change when you hover it. I also can not change the size of the
font on it.

http://www.gottadancesc.com/index.html

The code looks like this:

<A class="footer" href="mailto:[email protected]">webmaster</a>

a.footer:link {color: #000000;
text-decoration: none;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: normal;}

a.footer:visited {color: #000000;
text-decoration: underline}

a.footer:hover {color: #000000;
text-decoration: underline;
font-weight: normal;}

Here on my pc, the text is 10px, and the link isn't
underlined until hovered.
I think the link has been visited on your pc, (even though I
don't know how that works with a mailto link) which means it
will have underlining.
If you change text-decoration:underline; to
text-decoration:none; for a.footer:visited, your copy will
loose the underlining too, I suppose

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

 

[Eric Bohlman]

I've read that, it doesn't explain why my footer link is the same size
as my body text, even though I have the body text specified to be 16px
and the footer to be 10px.

Are you using a modern browser like Opera or Mozilla? If so, you've
probably got a default setting for minimum font size enabled (for example,
your 10px text would render at 13px on my copy of Opera).

 

[Toby A Inkster]

I've read that, it doesn't explain why my footer link is the same size as my
body text, even though I have the body text specified to be 16px and the
footer to be 10px.

Does your browser have a mimimum font size?

 

[Beauregard T. Shagnasty]

Quoth the raven named Steven Bourne:

My page background if plain white, specified in the top of the css
file. So should I specify the background for the links to be
white? Or should I specify them to be transparent? And what does
that do? Won't they be transparent by default?Won't they just d

Rather than specify a background-color for everything, use transparent
for everything relative to the body. Then you can change the
background in only one place. Personally, I'd recommend using a bit
off-white, it is easier on the eyes.

body, td, th {
background-color: #f5f5f5;
}


Please don't top post.
http://www.allmyfaqs.com/faq.pl?How_to_post

 

[Steven Bourne]

Wierd. I don't know what happened but I rebooted my computer and now it
works.