css help required!

Hi Julia,

Css isn't my forte. But...

you should be able to do something like:

#purple {
...preferred styles go here...
}

I have always used this to differentiate between styles for hover:

simply add .classname to a copy of your original link values

so a:link becomes a:link.orange etc

so I would just put class="orange" within the link tag then?

That didn't work, well sort of did - changed the colour of the link but not the hover part! Here's my style sheet any way :

table { font-family: Verdana; font-size: 12px; color: #000066}
a { color: #6666CC; text-decoration: none}
a:active { color: #000066; text-decoration: underline}
a:hover { color: #99CCCC; text-decoration: underline}
li { list-style-image: url(1bullet.gif)}
.headers { font-family: Verdana; font-size: 12px; font-weight: bold; color: #FFFFFF}
a.bottom { font-size: 10px; font-weight: bold; color: #99CCCC; text-decoration: none}
a:active.bottom { color: #000066; text-decoration: underline}
a:hover.botton {color: #6666CC; text-decoration: underline}

yep....

With this style sheet it's now just changing it so the links are green all the time!

this is how I did it:

Then the ref tags you put this:

or type2 or type3 - whatever it corresponds to.

Brooke

sorted it by doing this:

table { font-family: Verdana; font-size: 12px; color: #000066}
a { font-weight: bold;color: #6666CC; text-decoration: none}
a:active { color: #000066; text-decoration: underline}
a:hover { color: #99CCCC; text-decoration: underline}
li { list-style-image: url(1bullet.gif)}
.headers { font-weight: bold; color: #FFFFFF}
.bottom { font-size: 9px; font-weight: bold; color: #99CCCC}
.bottom a { color: #99CCCC; text-decoration: none}
.bottom a:active { color: #000066; text-decoration: underline}
.bottom a:hover {color: #6666CC; text-decoration: underline}

found a good tutorial here and they do them specifically for use with DW but good anyway if you don't use it.

Hmmm... interesting... three different ways to do it here:

.bottom a:hover
a.bottom:hover
a:hover.bottom

Which is the correct way? Or does it matter? I use the second method.

Quote: That didn't work, well sort of did - changed the colour of the link but not the hover part! Here's my style sheet any way :

table { font-family: Verdana; font-size: 12px; color: #000066}
a { color: #6666CC; text-decoration: none}
a:active { color: #000066; text-decoration: underline}
a:hover { color: #99CCCC; text-decoration: underline}
li { list-style-image: url(1bullet.gif)}
.headers { font-family: Verdana; font-size: 12px; font-weight: bold; color: #FFFFFF}
a.bottom { font-size: 10px; font-weight: bold; color: #99CCCC; text-decoration: none}
a:active.bottom { color: #000066; text-decoration: underline}
a:hover.botton {color: #6666CC; text-decoration: underline}

When in doubt, check your spelling

Yeah I did actualy realise I had spelt the bottom bottom wrong but at that point it still was working even when I changed it!!

Thanks for all your help

According to proper CSS via here , the proper anchor pseudo-class would be:

Now I suspect that some of the other variations would work but not cross browser. I generally do mine like so:

You all go and discuss some of my favourite topics!

The first two methods that Mark and Megan demonstrated work cross-browser, the but the explicit a.class:pseudoclass is preferred because of inheritance issues with Netscape 4.x.

.class a:pseudoclass requires that the browser understand parent/child distinctions and it's better safe than sorry with Netscape 4.x...

I think this question (how to have links different in different places on the page) is THE most asked question for CSS.

Suzanne

Suzanne, I knew that you would have to get in on this. Seeing as how you are the Queen of CSS.

Ok, next question!

I want to have the following in a cell of a table which has the text set via css to be blue, veranda, 12pixels.

link (underlined all the time & bold)
text description (normal text as per css above)
link (not underlined & not bold)

How can I accomplish this using css? I'm getting very tied up in knots trying to get my head around this one!

link (underlined all the time & bold)

.bu {
font-weight: bold;
text-decoration: underline;
}

text description (normal text as per css above)

add td to your list of items:

p, td {
color: blue;
font-family: verdana, geneva, sans-serif;
font-size: 12px;
}

link (not underlined & not bold)

.nochange {
font-weight: normal;
text-decoration: none;
}

bold underlined link and some regular text and another link.

Suzanne

What characters are valid for class and id names?

I think I ran into a problem using the underscore (or maybe it was the dash)... So I try to stick to alpha characters.

Thanks Suzanne, I might get it all straight in my head one of these days!!

hey Mark - from downtown

Quote: * In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Note that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE] and [ISO10646]).

from the blooberry patch

Quote: * Netscape 4.x and Opera 3.5+ do not allow CLASS or ID attributes to contain underscore characters ("_".) Underscores are legal in HTML atributes according to the HTML standards but not according to the CSS standard.