This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS: An Overview Forum

View Course

600 points
539f2bbb8c1ccc6b240004c9_778188940
Submitted by
Faiq Nadeem
about 3 years ago

How to change the color of a hyperlink text using CSS?

I have tried to change a hyperlink's color using both the | style="color:red" | attribute and the
a{color:red} tag(or whatever its called... :-| ) but all that happens is that the hyperlink's underline changes its color and not the full text..... also, if i try putting a "background-color: red " then nothing happens at all( i use Notepad to write my code) ......help!


2 votes

permalink

Here is a simple scenario:

a {
    color: ;
}
a:visited {
    color: ;
}
a:hover {
    color: ;
}
a:focus {
    color: ;
}
a:active {
    color: ;
}

These are (sans color values) base rules that will apply to all links in the document and covers all five pseudo-classes, or states.

The above is not much help where inline styles are concerned. There are no pseudo-classes in inline styles. The element is itself the selector, and it is real, not virtual.

The rules above are far reaching. They cover the entire document, at any generation level no matter how deeply nested. To narrow the field a little we need to introduce some specificity into the style sheet.

We could add element type specificity, such as,

p a {
    color: ;
}
li p a {
    color: ;
}

so that links in paragraphs get an assigned color that supersedes the base rule, and links in paragraphs that are in a list item get an assigned color that supersedes both rules. These are known as descendant selectors in addition to being element type. Not a great amount of specificity, but again, nearly as far reaching as the base rules.

There won't be room in this post to talk about class and id attributes, but they will come up, along with specificity, inheritance, cascade, dependency, among others.

Say we have base rule in the style sheet:

a {
    color: blue;
    text-decoration: none;
}

and in the HTML we have a number of links but we want one of them in particular to be green. We can traverse the document tree and zero in on it, or give it a class or id and style that, or we can as I would call it, 'cheat' and hit that anchor element with a style attribute. That one link would now be the color in the style attribute.

Problem solved for the lesson, maybe, but just begun from a presentation point of view. We have now locked that anchor element into the color we assigned in the style attribute. There are very few ways to override it. It has the highest specificity of all. [1,0,0,0].

Tough to trump that. Furthermore, no pseudo-classes will take effect, so no hover/focus effect, visited link color, or active link color. All gone because of one little inline style attribute.

Okay, now I am going to look at the lesson... Oh wait. There is no lesson. This is a topic question in segue to a current course unit. I hope the above helps a little. Feel free to press for more answers. If you are genuinely interested in CSS, I will be glad to further your understanding (from my own perspective) and leave you with some topics to research.

7847 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

1 Comment

593d545c83696644420003b7_64554016 stetim94 about 3 years ago

stupid question: what does a:focus do? i really don't see it. the other ones are fine.


2 votes

permalink

We most of us don't realize it, but there are a great many users who access the web with way less tools than we have. The pseudo-class 'focus' reminds us of this fact.

Try navigating a web page with the Tab key. Really. Do it for a few days. Then think of it as the only way you'll ever be able to do this stuff. That's what accessibility is about.

:focus is the current link in the page that the tab-index is pointing to. Press Tab and focus shifts to the next link. Keep pressing Tab and you go round and round through all the links repeatedly in a loop.

Default style rules for :focus include border-style: dashed; border-width: 1px;

We can of course redefine these style rules.

7847 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago