Styling Links...HELP PLZ

[ultrajeeps]

Hello,

I have a paragraph class, and I would like this class to style the URL Links. Here is my class:

.paragraph
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style:normal;
    font-variant: normal;
    color: #000000;
    } 

I don't know how to declare the links within this class so when I apply this class, I would have options to assing color and font size for the links.

Appreciate all the help.

Thanks.

[pixelita]

First of all make the name shorter, .para!

When modifying the link pseudo-classes, be careful when doing things like changing font size or font weight. The effect can be jarring. You'd set them up like this:

a.para, a.para:link {
[your style elements here]
}

a.para:visited {
[your style elements here]
}

a.para:active {
[your style elements here]
}

a.para:hover {
[your style elements here]
}


Read more about it here:
http://www.w3.org/TR/CSS21/selector....seudo-elements

HTH.

[DaveWoods]

 .paragraph
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style:normal;
    font-variant: normal;
    color: #000000;
    }

This code will colour anything with class="paragraph" assigned to it.

Usually though I'd declare most of those on the body so that it formats all the document and then adjust things accordingly.

body {
  font-family: arial, helvetica, sans-serif;
  font-size: 85%;
  color: #000;
}

You don't need to declare font-style or font-variant as normal unless you're applying it to an element that doesn't have that as default.

Now for the links. I'll usually start off by declaring a default colour for links for the entire site

a, a:link {
  color: #009;
}
a:hover {
  color: #C00;
}

This will set all links in your page to blue with a red hover. If you then have an instance of a link which you want to be different then you can change that accordingly, usually using an id or class on it's parent.

For example, say you have the following HTML

<div id="footer">
<p>Designed by <a href="#">Dave Woods</a></p>
</div>

You could then change the style of this link by using

#footer a, #footer a:link {
  color: #000;
}

This will change anylinks inside the div with an id of footer to black but leave the hover as red.

You could also change the colour of the hover by using

#footer a:hover {
  color: #00C;
}

This would change the hover in the footer to blue. Obviously you're not just limited to colours but for the purpose of this example it should demonstrate enough to get you started.

Hope that helps?

[ultrajeeps]

Thanks Pixelita,

for you help. Can you please clear this first line that you published :

a.para, a.para:link {
[your style elements here]
}

I don't follow a.para, a.para

Thanks.

[mhulse]

In reference to pixelita's first post, a.para is for applying a class to the href...

Based on my understanding of your question, if you do this:

<p class="paragraph">blah<a href="#">ddd</a>blah</p>

...then I would suggest you do this:

/*
** Remember, links have to be in this order in your stylesheet:
** 		a:link
** 		a:visited
** 		a:visited:hover
** 		a:focus
** 		a:hover
** 		a:active
*/
p.paragraph a,
p.paragraph a:link {
	color: red;
	text-decoration: none;
}
p.paragraph a:visited { color: blue; }
p.paragraph a:visited:hover,
p.paragraph a:hover { color: green; }
p.paragraph a:active { color: yellow; }

[mhulse]

Here is a working example... only tested via Firefox 2.x on XP.