CSS Style a specific link

Question

Scenario: I am in the process of creating a website for the company I work for. I need to follow their visual style guide so I\'m creating a CSS file for th

Answer 1

HTML

<a href="whatever.html" class="more">More</a>

CSS

body {
    font-size: 12px;
}

a.more {
    font-size: 11px;
}

Answer 2

specify a class for more link. for eg...

<a href="#" class="link">more</a>

In CSS:

Use..

body
{
 font-weight:13pt;
}
a.link
{
font-weight:11pt;
}

Answer 3

"Can you give those links CSS classes?"

So, you could use something like:

<a class="more-link" href="http://clownlovers.com">MORE</a>

And thus you could style those with CSS along the lines of:

a.more-link {
    font-size:11px;
}

If you can't do that, then I think you could write a little javascript program to go through and change any such links to the font you want. That's kind of minimal to implement, but I think that's an ugly hack, particularly since on slower machines, you may even initially see the default font appear until js runs and shifts things.

Answer 4

There isn't a way for CSS to sift through content like that, but could use jQuery to find all anchors that have the word "more" in it and change it based on that:

$("a:contains('more')").css("font-size", "11pt");

Not a CSS solution, but this is pretty much the only way you could do what you are asking for. Example for you here.