Jump to content

Are Multiple 'a' classes possible?

Isaiah 40:31

By Isaiah 40:31
in CSS

Recommended Posts

Isaiah 40:31 Newbie

Isaiah 40:31

Posted
Posted

I've just gone through the CSS Basic Tutorial so I am VERY new to CSS.I am now familiar with multiple classes (I hope that's the correct term) for paragraphs. For example, I can code CSS for:p.first {color: white;}p.second {color: blue;}p.third {color: black;}And then call it in the HTML:<P class=first>Text in paragraph Class1</P><P class=second>Text in paragraph Class2</P>The question I have is: Can you do this with links for a:link, a:hover, a:active, etc - that is, can you have multiple styles for links?So some links will be Blue when you hover over them, and some will be White when you hover over them?

Link to comment
Share on other sites
Isaiah 40:31 Newbie

Isaiah 40:31

Posted
  • Author
Posted

So what I'm trying to do, for example, is get the first link to go to yellow when I hover, and the second to go to white when I hover over it. But my code doesn't work:

<HTML><HEAD>   <style type="text/css">a.first:link {color: red}a.first:visited {color: orange}a.first:hover {color: yellow}a.first:active {color: green}a.second:link {color: blue}a.second:visited {color: black}a.second:hover {color: white}a.second:active {color: purple}</Style></HEAD><Body><CENTER> <P> <P><a class="first"><A HREF="link1.htm"><FONT SIZE="+2">My First Link</FONT></A><P> <P><a class="second"><A HREF="link2.htm"><FONT SIZE="+2">My SecondLink</FONT></A></CENTER></BODY></HTML>

Link to comment
Share on other sites
Kingy Member

Kingy

Posted
Posted

Look at what you've done with your links, you've done this with your links.<a class="first"><A HREF="link1.htm"><FONT SIZE="+2">My First Link</FONT></A>You can put the first two parts together, you're starting of a link twice and ending it once. So as far as your script is concerned it doesn't know what to class if you see what I'm saying.If you put them togehter like this <A HREF="link1.htm" class="first"><FONT SIZE="+2">My First Link</FONT></A>That should do the trick.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title>   <style type="text/css">a.first:link {color: red;}a.first:visited {color: orange;}a.first:hover {color: yellow;}a.first:active {color: green;}a.second:link {color: blue;}a.second:visited {color: black;}a.second:hover {color: white;}a.second:active {color: purple;}</style></head><body><CENTER> <P> <P><A HREF="link1.htm" class="first"><FONT SIZE="+2">My First Link</FONT></A><P> <P><A HREF="link2.htm" class="second"><FONT SIZE="+2">My SecondLink</FONT></A></CENTER></body></html>

Link to comment
Share on other sites
Jerry62704 Member

Jerry62704

Posted
Posted
So what I'm trying to do, for example, is get the first link to go to yellow when I hover, and the second to go to white when I hover over it. But my code doesn't work:
<HTML><HEAD>   <style type="text/css">a.first:link {color: red}a.first:visited {color: orange}a.first:hover {color: yellow}a.first:active {color: green}a.second:link {color: blue}a.second:visited {color: black}a.second:hover {color: white}a.second:active {color: purple}</Style></HEAD><Body><CENTER> <P> <P><a class="first"><A HREF="link1.htm"><FONT SIZE="+2">My First Link</FONT></A><P> <P><a class="second"><A HREF="link2.htm"><FONT SIZE="+2">My SecondLink</FONT></A></CENTER></BODY></HTML>

This works:
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

You have to fix this:

<a class="first"><A HREF="link1.htm"><FONT SIZE="+2">My First Link</FONT></A>

You only need one <a> tag for the link, and XHTML requires lowercase tag names:

<a class="first" href="link1.htm">My First Link</a>

To change the size of the font, don't use a font tag, just add the style to the CSS class:

a.first { font-size: 1.2em; }

Link to comment
Share on other sites
Isaiah 40:31 Newbie

Isaiah 40:31

Posted
  • Author
Posted

Thank you, Kingy! That is exactly what I wanted! I appreciate the fast responses.Ingolme, I am starting to learn how to code correctly, just too lazy at that point to change the coding for the font size; but I do appreciate you pointing it out. I did not know about the lowercase tag names. (Unfamiliar with XHTML - though I know HTML fairly well).Jerry, how would I have different colours for different links with your suggestion?

Link to comment
Share on other sites
Kingy Member

Kingy

Posted
Posted

You're welcome, remember you can stitch those bits together so you don't have to keep declaring everything into individual elements like you did with your links.If you want a different colour for individual links you'll have to set up your CSS in the same way and declare the class accordingly as you've already done.

Link to comment
Share on other sites
Isaiah 40:31 Newbie

Isaiah 40:31

Posted
  • Author
Posted

I'm sorry, Kingy. I'm so new to this. When you say stitch those bits together, are you referring to putting the font size information in the CSS, or are you meaning that parts of the information that might be shared between the two different types of links can be declared at one time?So if I wanted to have the "visited" colour the same for both types of links I'd go like this, right?:a:visited {color: black;}a.first:link {color: red;}a.first:hover {color: yellow;}a.first:active {color: green;}a.second:link {color: blue;}a.second:hover {color: white;}a.second:active {color: purple;}Or were you referring to something else?

Link to comment
Share on other sites
Kingy Member

Kingy

Posted
Posted

No problem. I should have made it clearer perhaps. :)As Ingolme has already pointed out himself the problem you would have seen is because of the <a> tags.Your original looked like this:

<a [b]class="first"[/b]><A [b]HREF="link1.htm"[/b]><FONT SIZE="+2">My First Link</FONT></A></A>

turns into...

<a [b]class="first" HREF="link1.htm"[/b]><FONT SIZE="+2">My First Link</FONT></A></A>

Link to comment
Share on other sites
Isaiah 40:31 Newbie

Isaiah 40:31

Posted
  • Author
Posted

Sorry, I should have mentioned this before, but I did get it to work after your first suggestion, Kingy!Here's what I got:

<html><html><head><style type="text/css">a {font-size: 1.6em;}a.first:link {color: red}a.first:visited {color: orange}a.first:hover {color: yellow}a.first:active {color: green}a.second:link {color: blue}a.second:visited {color: black}a.second:hover {color: white}a.second:active {color: purple}</Style></head><body><center> <P> <P><a href="link1.htm" class="first">My First Link</A>    <P> <P><a href="link2.htm" class="second">MySecond Link</A></center></body></html>

I presume that in your last snippet of code you intended to only have one closing tag, am I correct? You did not intend to use </a></a> did you?

Link to comment
Share on other sites
rzea Member

rzea

Posted
Posted

Another approach and here's why:I will always prefer more specificity, I think the code (HTML and CSS) it's easier to understand and manage, while using the same amount of code:HTML:

<div id="first">  <a href="link1.htm">My First Link</a></div><div id="second">  <a href="link2.htm">My Second Link</a></div>

CSS:

a {font-size: 1.6em;}#first a {color:blue;}#first a:visited {color:yellow;}#first a:hover {color:red;}#first a:active {color:orange;}#second a {color:blue;}#second a:visited {color:yellow;}#second a:hover {color:red;}#second a:active {color:orange;}

:)EDIT-- Oh! I almost forgot! REMOVE that FONT SIZE="+2" tag immediately!... please. :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...