COloring links

L

Lewis

I used to know how to do this.

I have a link on a page that I need to color differently from the rest
of the links on the rest of the page, but I can't remember the syntax to
set the link, visited, and hover, and active colors within a style
declaration in the <a> tag.

I cannot edit the css file in this case to add a custom link color
section, which is what I would normally do.

I suppose I could do something like

<span style="color: red;"><a style="color: inherit" href="...">The
Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
hover/visted/active colors.
 
C

Chris F.A. Johnson

I used to know how to do this.

I have a link on a page that I need to color differently from the rest
of the links on the rest of the page, but I can't remember the syntax to
set the link, visited, and hover, and active colors within a style
declaration in the <a> tag.

I cannot edit the css file in this case to add a custom link color
section, which is what I would normally do.

I suppose I could do something like

<span style="color: red;"><a style="color: inherit" href="...">The
Link</a></span> but that 1) feels like a kludge 2) doesn't let me set
hover/visted/active colors.
Click to expand...

Give the anchor a class or an id:

<a id=imaginary href="">whatever</a>

Add a <STYLE> element to the <HEAD> or your page:

<HEAD>
<STYLE type="text/css">
a#imaginary:visited { color: british-racing-green; }
a#imaginary:hover { color: sky-blue-pink; }
</STYLE>
</HEAD>
 
L

Lewis

Give the anchor a class or an id:
Click to expand...
<a id=imaginary href="">whatever</a>
Click to expand...
Add a <STYLE> element to the <HEAD> or your page:
Click to expand...
<HEAD>
<STYLE type="text/css">
a#imaginary:visited { color: british-racing-green; }
a#imaginary:hover { color: sky-blue-pink; }
</STYLE>
</HEAD>
Click to expand...

I do not have access to the head (I am editing a section of a site, and
I only have access to that little section of the HTML. I can't change
the page's CSS because I don't have access to it.
 
C

Chris F.A. Johnson

I do not have access to the head (I am editing a section of a site, and
I only have access to that little section of the HTML. I can't change
the page's CSS because I don't have access to it.
Click to expand...

Use HTML5's scoped style:

<div class=scoped>
<style type="text/css" scoped>
.scoped a#imaginary:visited { color: british-racing-green; }
.scoped a#imaginary:hover { color: sky-blue-pink; }
</style>
<a id=imaginary href="">whatever</a>
</div>

The scoped attribure is not implemented on all browsers yet, but
with the additional class of a containing division, it should work.
 
L

Lewis

Use HTML5's scoped style:
Click to expand...
<div class=scoped>
<style type="text/css" scoped>
.scoped a#imaginary:visited { color: british-racing-green; }
.scoped a#imaginary:hover { color: sky-blue-pink; }
</style>
<a id=imaginary href="">whatever</a>
</div>
Click to expand...

Oh, that's clever. I know when last I had to do this it was far more
complicated than that.

Thanks!
 
J

Jukka K. Korpela

2013-07-05 6:00 said:
Use HTML5's scoped style:

<div class=scoped>
<style type="text/css" scoped>
.scoped a#imaginary:visited { color: british-racing-green; }
.scoped a#imaginary:hover { color: sky-blue-pink; }
</style>
<a id=imaginary href="">whatever</a>
</div>

The scoped attribure is not implemented on all browsers yet, but
with the additional class of a containing division, it should work.
Click to expand...

"Not implemented on all browsers" is an understatement. It seems that
only Firefox, from version 21 or so, supports it:
http://caniuse.com/#feat=style-scoped
(And I would not bet much on the reliability of Firefox support,
especially since the whole scoped thing is experimental and debated.)

But the point here is that virtually all browsers actually let you put a
<style> element inside the <body> element, too, and act as if it were
inside the <head> element, even though this violates HTML
specifications. The proposed HTML5 rules would *restrict* the effect of
the style sheet.

It's really sufficient to use #imaginary in conjuction with the
pseudo-classes, since an id selector restricts the effect to a single
element.

Names like british-racing-green should not be used as dummies, since by
their form, they could be real color names, but they aren't.

Regarding the different states and the order of setting them, the LoVe -
HAte rule applies :)link, :visited, :hover, :active). On the other hand,
you don't need to set color on :hover and :active, if you prefer to use
other visual means, like background color or outline, for highlighting them.

Example (assuming you can wrap the link in a <div> element, which is
really needed here just to make the markup conform to proposed HTML5 rules):

<div>
<!-- the scoped attribute is here to keep HTML5 gods pleased. -->
<style scoped>
#imaginary:link { color: blue; }
#imaginary:visited { color: magenta; }
</style>
<a id=imaginary href="...">whatever</a>
</div>
 
L

Lewis

In message said:
2013-07-05 6:00, Chris F.A. Johnson wrote:
Click to expand...
"Not implemented on all browsers" is an understatement. It seems that
only Firefox, from version 21 or so, supports it:
http://caniuse.com/#feat=style-scoped
(And I would not bet much on the reliability of Firefox support,
especially since the whole scoped thing is experimental and debated.)
Click to expand...

Seems to work in Safari. Forgot to check Chrome.
<div>
<!-- the scoped attribute is here to keep HTML5 gods pleased. -->
<style scoped>
#imaginary:link { color: blue; }
#imaginary:visited { color: magenta; }
</style>
<a id=imaginary href="...">whatever</a>
</div>
Click to expand...

Maybe that's why the example works in Safari.
 
J

Jukka K. Korpela

Seems to work in Safari.
Click to expand...

That's a misunderstanding. If you visit page
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
on Safari, then the text
"This text should be black. If it is red your browser does not support
the scoped attribute."
appears in black.

Safari, like most browsers, does not support the scoped attribute in
<style> but simply ignores the attribute. As I explained earlier,
virtually all browsers support the <style> element within the <body>
element, so when you use <style scoped>, the style sheet works but not
as per HTML5 (as a scoped style sheet) but as a style sheet that applies
to the entire document. As discussed, you can still limit its effects to
content within a specific element, but you need to use that with
selectors, just as you would do in an external style sheet.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Difficulties with the addition of an accordion 0
Slideshow not working properly 2
Dropdown menu in a fixed navbar 1
<Button ...> display is fine, except for two things 1
How can I arrange a series of radio buttons? 2
I need help making a zooming function 11
I need help fixing my website 2

Members online

Total: 22 (members: 3, guests: 19)
Robots: 228

Forum statistics

Threads
473,755
Messages
2,569,534
Members
45,007
Latest member
obedient dusk

Latest Threads

Top