Richard Korts
asked on
Can't override page CSS with inline CSS
Trying to override page CSS with inline CSS for a:link color on a specific link, doesn't work.
Please see attached file, line 75.
What's wrong?
Thanks.
help.htm
Please see attached file, line 75.
What's wrong?
Thanks.
help.htm
ASKER
Will that leave the other colors (link over, etc.) as is, that is what I want.
Thank you.
Thank you.
That depends how you've styled the link:hover elsewhere in your page, but it should leave them as-is
Actually, no it won't - if you inline style it, then it'll override the pseudo class. Like I said, if you want fine-grain control over the link and the pseudos, you're going to need to use the <style> tag, rather than inline. Technically, you could use the !important tag, but I'd strongly recommend against that
ASKER
OK, not following how to fix this.
So I tried this:
in <style> section of header:
/* styles for non white links */
.bdlink {
a:link {
color: blue;
}
/* visited link */
a:visited {
color: #40FFFF;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
}
In html:
<div class="col-xs-5 col-sm-5 col-md-5 text-left" style="font-size:20px;"><a class="bdlink" href=”tel:+1-713-518-9660″ >713-518-9 660</a></d iv>
Rendering of link color still white.
Note that ALSO in style section of head is this
/* unvisited link */
a:link {
color: white;
}
/* visited link */
a:visited {
color: #40FFFF;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
That is where the white comes from; I have other links I WANT white (on a black background). I am trying to make the specific link in question blue, so I defined another class, bdlink. But it doesn't override the previously defined link styles for the document.
What I am doing wrong?
Thank you
So I tried this:
in <style> section of header:
/* styles for non white links */
.bdlink {
a:link {
color: blue;
}
/* visited link */
a:visited {
color: #40FFFF;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
}
In html:
<div class="col-xs-5 col-sm-5 col-md-5 text-left" style="font-size:20px;"><a
Rendering of link color still white.
Note that ALSO in style section of head is this
/* unvisited link */
a:link {
color: white;
}
/* visited link */
a:visited {
color: #40FFFF;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
That is where the white comes from; I have other links I WANT white (on a black background). I am trying to make the specific link in question blue, so I defined another class, bdlink. But it doesn't override the previously defined link styles for the document.
What I am doing wrong?
Thank you
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Perfect, thanks.
Richard
Richard
You've added the style for a:link to a DIV !! This won't work. If you want to add inline styles, they only apply to the elements they're added to, so if you want to inline the link style, then you need to add it to the link:
Open in new window
You don't add CSS selectors (a:link) to inline styles. Also, you can't style pseudo classes (:active / :hover etc) like this, so if you want to style those differently, you'll need to use the <style> tags or an external CSS file