Link to home
Start Free TrialLog in
Avatar of Richard Korts
Richard KortsFlag for United States of America

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
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Hi 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:

<div class="col-xs-5 col-sm-5 col-md-5 text-left" style="font-size:20px;">
<a style="color:#002E5D" href="tel:+1-713-518-9660">713-518-9660</a>
</div>

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
Avatar of Richard Korts

ASKER

Will that leave the other colors (link over, etc.) as is, that is what I want.

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
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-9660</a></div>

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
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Perfect, thanks.

Richard