SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Help With Css Please
-
Aug 23, 2004, 08:09 #1
- Join Date
- Sep 2003
- Location
- Sydney Australia
- Posts
- 90
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Help With Css Please
Hi,
Following is my working style sheet
BODY { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
COLOR: #333333; FONT-SIZE: 10px; }
TD { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
FONT-SIZE: 10px;
COLOR: #333333; }
A { COLOR: #000099; text-decoration: NONE}
A:HOVER {
text-decoration: none;
color: Red; }
A:visited { color: #666666; text-decoration: none}
A:VISITED:HOVER { color: Red; text-decoration: underline }
H1 {FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 17px; COLOR: #000066; }
Following (not working) is where I am trying to add a "class" thing so that I can have certain links in different colour and different hover colour etc
.color01 {
/* new colour link*/
A: color: Green;
A: visited color: #666666;
text-decoration: none
A:VISITED:HOVER {color: black; text-decoration: underline;
}
Also, when I want to apply the class thing in the html page that links to the style sheet, where in (or in relation to ) the link tag do I put the class="colour01"
With text it is easy to go <p class="another_colour"> example text</P>
but where in the link tag goeth the class thing please?
-
Aug 23, 2004, 08:22 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
I think it better id I send you to the faq here:
http://www.sitepoint.com/forums/showthread.php?t=171943#
Which answers all your questions and shows you various ways to do it.
Its worth noting that you can never put selectors inside a style decaration as you have done here:
Code:color01 { /* new colour link*/ A: color: Green; A: visited color: #666666; text-decoration: none A:VISITED:HOVER {color: black; text-decoration: underline; }
Code:.color01 a:link {color:green} .color01 a:visited {colour:red} .color01 a:hover {colour:white} .color01 a:active {colour:yellow}
Code:<div class="color01"> <a href="#">This link will be green</a> <a href="#">This link will be green</a> <a href="#">This link will be green</a> </div>
Code:a.color01:link {color:green} a.color01:visited {colour:red} a.color01:hover {colour:white} a.color01:active {colour:yellow}
Code:<div> <a class="color01" href="#">This link will be green</a> <a href="#">This will be default color</a> <a href="#">This will be default color</a> </div>
paulLast edited by Paul O'B; Aug 25, 2004 at 07:23.
-
Aug 23, 2004, 08:55 #3
- Join Date
- Sep 2003
- Location
- Sydney Australia
- Posts
- 90
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thank you very much Paul. clear answer and will study FAQ
-
Aug 23, 2004, 08:57 #4
- Join Date
- Sep 2003
- Location
- Sydney Australia
- Posts
- 90
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
What is the significance of the div tag here? Do I have to use it?
R
-
Aug 23, 2004, 09:05 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
If you mean the last example then it has no significance.
This is fine:
Code:<a class="color01" href="#">This link will be green</a> <a href="#">This will be default color</a> <a href="#">This will be default color</a>
Last edited by Paul O'B; Aug 25, 2004 at 07:23.
-
Aug 25, 2004, 06:45 #6
- Join Date
- Sep 2003
- Location
- Sydney Australia
- Posts
- 90
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul.
I had tried this but I had a quote after the class name.
<a class="color01" href="#">This link will be green</a>
Curious how you can have a seemingly "orphaned" quote mark.
R
-
Aug 25, 2004, 07:25 #7
- Join Date
- Aug 2004
- Location
- georgetown, tx
- Posts
- 86
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by rockerz
Paul just made a simple mistake. The quote should be around the class parameter.
-
Aug 25, 2004, 07:25 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
<a class="color01" href="#">
Paul
Bookmarks