Different formats for <a> tag

[brycol]

Hi
I am using dreamweaver 2004 for designing websites. I have formated the <a> tag within CSS. My problem is that I would like to have different font colours and background colours of the <a> tag over the website. I don't know how to do. Can anybody please help? Thank you.

[Medyman]

You can use CSS class or id identifiers to change colors. An id would be used if that particular <a> tag is unique (i.e. you will not be using that color scheme elsewhere on the site). Class identifiers are used for repeating elements.

Let's test this.

First, in your HTML, add the following:

<a href="#">Today's Headlines</a>

<a href="#" id="good">Good News</a>
<a href="#" class="goodnews">Steve Wins $1,000,000 Lottery</a>
<a href="#" class="goodnews">New School Opens in Timbuktu</a>

<a href="#" id="bad">Bad News</a>

<a href="#" id="badnews">Fire Breaks Out in Enchanted Forest</a>
<a href="#" id="badnews">Child Loses his Bike, Mother Says</a>

Notice the various class= and id= declerations.

Now to the CSS, let's add the following

a {
   display:block;
   padding:5px 10px;
}
a#good {
   background:#50E923;
   font-weight:bold;
   color:white;
}
a#bad {
   background:#ee0000;
   font-weight:bold;
   color:white;
}
a.goodnews {
   color:#50E923;
}
a.badnews {
   color:#ee0000;
}

You should see the relationship between the various CSS declerations and the anchors we used.

a is the default setting for all anchors. Unless these specific settings are redecleared in class/id style tags, they will still apply.
a#good refers to id="good".
a.goodnews refers to class="goodnews".

Hopefully that's clear. Let me know if there are any questions.

[boogyman]

An id would be used if that particular <a> tag is unique (i.e. you will not be using that color scheme elsewhere on the site).

thats wrong... its unique to the page, not the site

you can have multiple pages that have an element with the same ID, however you cannot have multiple elements with the same ID on the same page.


allowed--

index.html

<a href="/path" id="dd">Dynamic Drive</a>

contact.html

<a href="mailto:spam@alsfjalflaj.com" id="dd">Contact Us</a>

not-allowed --

index.html

<a href="/path" id="dd">Dynamic Drive</a>
<br>
<a href="mailto:spam@alsfjalflaj.com" id="dd">Contact Us</a>

for the second example you would need to use a class attribute

[Medyman]

Ehh, semantics. In all practicality, what I suggested is correct. If someone is just learning CSS, the likelihood, that they're using multiple stylesheets across a site. To be technical though, yes you're right.

In most instances, however, if you're repeating a particular style across several pages, and using one stylesheet, standards say to use class identifiers. Of course, there are exceptions where specificity demands, but let's not try to confuse people who are just starting out with CSS.

[boogyman]

that is incorrect... and telling people the right way to do it in the first place is better than having them learn incorrectly.

id = name [CS]
This attribute assigns a name to an element. This name must be unique in a document.

aka that style is unique to that page

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances.

[Medyman]

boogyman, don't argue for no reason. Reread what I stated before. You're getting into a semantic argument. We both mean the same thing. I think the OP understands. If they don't they can ask for a clarification.

[techno_race]

You could use simply colored text and a JS cursor changer onMouseOver.