My first CSS isn't working

S

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!
 
E

Edwin van der Vaart

Steven said:
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;}
Click to expand...

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.
 
E

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>
Click to expand...
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;}
Click to expand...

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 :)
 
S

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
 
S

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.
 
S

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.

Els said:
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>
Click to expand...
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;}
Click to expand...

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 -
Click to expand...
 
E

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.
Click to expand...

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).
 
T

Toby A Inkster

Steven said:
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.
Click to expand...

Does your browser have a mimimum font size?
 
B

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
Click to expand...

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
 
S

Steven Bourne

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

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Interfering CSS 1
<Button ...> display is fine, except for two things 1
How to position the *tooltip* comment on these buttons? 9
Help with my responsive home page 2
Image on header 2
Justify-content not working 1
I need help fixing my website 2
Slideshow not working properly 2

Members online

No members online now.
Total: 261 (members: 1, guests: 260)
Robots: 87

Forum statistics

Threads
474,266
Messages
2,571,073
Members
48,772
Latest member
Backspace Studios

Latest Threads

Top