🔒 Locked

[web] HELP - CSS

Started by Brocketino Mar 20, 2005 at 3:41 AM 4 replies 850+ views

Original Post

Mar 20, 2005 at 3:41 AM

I'm trying to modify the look of the links in a page using css. I want the color of the text to change when the mouse is over it (and only then), this works fine but if I have used the link then the fontcolor wont change as the mouse hovers over it, why? This is a part of the stylesheet -> a:link, a:visited { color: black; text-decoration: none; font-size: 15px; } a:active { color: black; text-decoration: none; font-size: 15px; font-weight: bolder; } a:hover { color: white; text-decoration: none; font-size: 15px; }

Kylotan

Mod

3,487

Kylotan

Mar 20, 2005 at 10:47 AM

What if you swap the order of active and hover sections in the stylesheet?

Brocketino

Author

Brocketino

Mar 20, 2005 at 12:48 PM

Quote:
Original post by Kylotan
What if you swap the order of active and hover sections in the stylesheet?

It worked:), would be great if you could tell my why?

Sander

145

Sander

Mar 21, 2005 at 6:34 AM

Because the CSS is applied top-to-bottom. In your old order, the CSS would first set the text to white because of the :hover, and then reset it to black again because of the :active. Now it does the other way around (first the black :active and then the white :hover, so he text comes out as white). The :tag pseudo-tags are not mutually exclusive. Multiple pseudo-tags can apply at the same time.

Brocketino

Author

Brocketino

Mar 21, 2005 at 7:04 AM

ok. Thanx alot. I've got a new question: Can I include one tags attribute in another? Example -> can I include the < pre > tag into the < code > tag, and how do I do this if possible? Also, can I define my own tags somehow?

*** NOTE MODIFIED

[Edited by - Brocketino on March 21, 2005 10:04:00 AM]

Sander

145

Sander

Mar 21, 2005 at 7:52 AM

I am not sure what you mean with the code tag question, but defining your own tags is possible (though it will probabely not be rendered properly, or will not be rendered at all). I sometimes use custom tags and attributes to hook javascript behavior. It only works (according to the specs) with XHTML though. Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">  <head>    <title>my page</title>  </head>  <body>    <h1>A header</h1>    <c:custom xmlns:c="http://yourdomain.com/custom">      this is a custom element. Rendering is unpredictable.    </c:custom>    <p e:custom="custom attribute" xmlns:e="http://yourdomain.com/custom2/">      A normal paragraph witha  custom attribute. The paragraph will be rendered as normal. The attribute is skipped by the browser but can be used by javascript.    </p>  </body></html>

Read up on XML Namespaces but remember that a browser will probabely just render the understandable HTML and skip your custom tags. The custom tags can be read and used through javascript though. I prefer this XHTML namespacing method over the custom DTD method recently featured on A List Apart.

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.