styling hyperlinks with ID

[Befuddled53]

I am trying to style a hyperlink using an ID (or class).

#myID {
a:link {color:#ffffff}
}

Then referencing it:

<a href="https:\\etc" id="myID" target="_blank">CLICK HERE</a>

I don't want to do this inline as there are many links to style identically, so I need a class or ID, but I cannot get the syntax correct. Can you help?
Thank you.

[not2easy]

Using class is usually the simpler way to apply style because of the limitation of "id" to one element on the page. For links, you probably want a default appearance and then alternates of that appearance for particular links. So you first specify your default appearance and then only specify the difference in the alternate classes. for links you will need entries for various states of the links such as hover and visited and less used "active" when you want some change on-click.

In this example, the class name is "green" and only the color is changed:

a.green:link {color: #00ff00;}
a.green:visited {color: #00ccff;}
a.green:hover {color: #00eeaa;}

Referencing it:

<a href="https://example.com/page.html" class="green" target="_blank">CLICK HERE</a>

or

<a class="green" href="https://example.com/page.html" target="_blank">CLICK HERE</a>

[lucy24]

If you mean all links that happen to be located inside an element of some class (or id) the syntax would be:

.classname a:link {blahblah}
#idname a:link {blahblah}

and so on as in not2easy's examples (which are the forms to use if the link itself has a classname). The : colons refer to three pseudo-classes that apply specifically to links; they should be self-explanatory.

And try to purge your mind of those nested {braces} ;) That's not what they are for.

[Befuddled53]

Thank you for both replies above. They should work, but for some reason I cannot get the color to update. The background colour changes so the syntax must be correct. It's as if there's a previous css command overwriting the link color, but I can't find it. I tried adding

!important

to the line but it made no difference. I won't ask for more help on this, I just have to investigate.

[not2easy]

!important is mostly a note-to-self by the writer of the css, the browsers don't pay much attention to it.

If the link is within an #id container, it could have id styling applied and ignore classes. One more reason I use id sparingly.

[lucy24]

Styling links is especially tricky because you have to keep emptying your browser cache; otherwise it will forever remember that, yup, I’ve previously visited this link. Or keep using different browsers. The pseudo-class “hover” is useful because it doesn’t rely on potentially cached information, but just responds to what you’re doing right then and there.

I agree that !important is a non-starter. Instead you have to pore over your collected stylesheets and rules, and figure out what’s overriding what.

Edit: Oh, wait, I just took a closer look at the OP.

<a href="https:\\etc" id="myID"

The syntax for this would be

a#myID {blahblah}

but as not2easy says, this is almost certainly not what you want anyway.

[Befuddled53]

Thank you again for replying. I have been trying most of the night to figure this out, often on the precipice of complete software meltdown - it takes so little to wreck so much. I take on board comments about IDs but I am stuck with many of them. To change them all to classes would be a major challenge which I tried about three hours ago but it was too fraught. I also cleared the cache. Anyway, the code Lucy24 suggested,

a#myID

works for a single link, which is a step forward. I need to find the syntax for including that within a DIV. Currently, the enclosing DIV for all the links seems to be working:

<div class="myDIV {
 background-color:#4E1B1C; 
 color:#ffffff; 
 padding-bottom:12px;
}

What I need to do, if humanly possible, is include the

a#myID

into myDIV so that it affects ALL the links. I have tried adding

a:link color:#fff

; and

a: color:#fff;

and even

a colour:#fff

but nothing works. I feel that this should be easy. It's basically setting the colour (color to you) of hyperlinks! I don't know why it is giving me such grief. Thanks again for your advice. This is probably some override which I have to discover, but there is so little code between the DIV and the link that it's hard to know what that override might be.

[not2easy]

The

<div class="

is not part of the css, that belongs in the html of the page where it is to be seen and needs an end > and a closing </div>

In the page html your #myID link would use

<a id="myID" href="https://example.com/page.html" target="_blank">CLICK HERE</a>

The # is only used with id and for class it would be

<a class="myID" href="https://example.com/page.html" target="_blank">CLICK HERE</a>

To automatically color all states of all links into the

<div id="myID">content</div>

you would need to include the definitions for links in the #myID in the css. That way all the links in <div id="myID"> would take on #myID styles.

If there will be various slugs on the same page, and if you want them to each have different appearance of links, there would need to be a separate id that included the link properties in the #id css. for each slug of content.

[not2easy]

It might help to illustrate how the css would work in this kind of environment. This is only an example, you can add antthing from your current #myID css

#myID {
 text-align: left;
 padding: 20px;
 font-family: Georgia;
 display: block;
 a:link colour: #00ff00;
 a:visited colour: #00ccff;
 a:hover colour: #00eeaa;
}

So that it can define everything in your

<div id="myID">

[Befuddled53]

Many thanks. The missing ">" was a typo in my message here, not in the code. The class and ID were also correct in the code, despite the 'myID' label. I had exactly what you'd written but the link colo[u]r is still not displayed. This has been my problem throughout. The slugs are to have the same appearance, which is why I wanted the colour defined for all of them in a single class. I can get them to respond individually, no problem, bur there's a lot of repetition. That's the way I'll go, though, if I can't sort this out. Once again, thank you.

[not2easy]

You may get some hints on where the problems originate if you were to validate the code. w3.org offers a free validator that can give you printable reports to show you things that need work.

They are over-zealous in nitpicking, some things they point out may not make a difference. But you can paste in your URL and get a free anonymous report, there are links in the Charter of this css forum: [webmasterworld.com...] (also found in the Forum Options drop-down menu at the top of every thread.) The W3 NU Validator is somewhat less picky.

[lucy24]

Before anything else, Stop Using Nested {} Braces

:)