SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: Styling Links...HELP PLZ
-
Sep 4, 2007, 13:15 #1
- Join Date
- Oct 2004
- Location
- NYC
- Posts
- 306
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Styling Links...HELP PLZ
Hello,
I have a paragraph class, and I would like this class to style the URL Links. Here is my class:
PHP Code:
.paragraph
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style:normal;
font-variant: normal;
color: #000000;
}
Appreciate all the help.
Thanks.
-
Sep 4, 2007, 14:33 #2
- Join Date
- May 2007
- Location
- Houston, Texas USA
- Posts
- 28
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.Visit our web design site at http://www.pixelita.com
Visit Serbia's biggest and best internet forum at
http://www.burek.co.yu
-
Sep 4, 2007, 14:37 #3
- Join Date
- Dec 2004
- Location
- Derbyshire - UK
- Posts
- 2,651
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:.paragraph { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style:normal; font-variant: normal; color: #000000; }
Usually though I'd declare most of those on the body so that it formats all the document and then adjust things accordingly.
Code:body { font-family: arial, helvetica, sans-serif; font-size: 85%; color: #000; }
Now for the links. I'll usually start off by declaring a default colour for links for the entire site
Code:a, a:link { color: #009; } a:hover { color: #C00; }
For example, say you have the following HTML
Code:<div id="footer"> <p>Designed by <a href="#">Dave Woods</a></p> </div>
Code:#footer a, #footer a:link { color: #000; }
You could also change the colour of the hover by using
Code:#footer a:hover { color: #00C; }
Hope that helps?
-
Sep 4, 2007, 14:38 #4
- Join Date
- Oct 2004
- Location
- NYC
- Posts
- 306
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Sep 4, 2007, 14:44 #5
- Join Date
- Jun 2004
- Location
- "Then I figure the most good good guy will win."
- Posts
- 1,666
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
Code HTML4Strict:<p class="paragraph">blah<a href="#">ddd</a>blah</p>
...then I would suggest you do this:
Code CSS:/* ** 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; }
Last edited by mhulse; Sep 6, 2007 at 09:49.
-
Sep 4, 2007, 14:50 #6
- Join Date
- Jun 2004
- Location
- "Then I figure the most good good guy will win."
- Posts
- 1,666
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here is a working example... only tested via Firefox 2.x on XP.
Bookmarks