Can't override page CSS with inline CSS

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>

Select allOpen 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

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

Perfect, thanks.

Richard