when we create a hyperlink on a website or cms, why does it default to on hover red with a text decoration of underline? Is there a specific SEO reasoning behind an on hover red hyperlink?

I have been told many times to force the style of the hyperlinks to match the design, so that means changing the css for visited a etc Is this bad for SEO standards?

  • 1
    I think you are perhaps confusing SEO with usability. – MrWhite May 1 '12 at 14:26

There should be a section in your site's style sheet that looks something like

a:hover { color: red; text-decoration: underline; }

You simply have to change these values to one's that match your design.

As to SEO, search engines do not take into account elements of visual design, unless you deliberately try to hide things from it, the two are entirely unconnected, so this will have no impact on your ranking whatsoever.


The only time it would be bad for SEO is if you attempted to hide the links from users by making their color and hover color the same (or very similar) as the background they are up against.


Here's a quick workaround

a { text-decoration: none; color:yourcolorhere; }
a:visited { color:yourcolorforwhenthelinkhasalreadybeenviewed; }
a:hover {color:hovercolor;}
a:acitve {color:yourlinksclickeddowncolor;}

Also if you want fancy Links for specific links use this

{ color:special-color-foryour-domainname-in-posts}

What this selector does is it can be used to highlight your own domain name in a special way throughout your site so it stands out more. The *denotes the names attribute to find it on the site. Anything with yoursitedomain in it will be highlighted a different color.

As far as SEO, CSS doesn't effect it. If you have multiple sitemaps, that confuse crawlers then your SEO will be bad. Just don't hide your links, or have the display:none attribute. Certain crawlers can't view them, and make sure your robots.txt file is edited for even more SEO.

Hope this helps.


There is a default HTML style: http://www.w3.org/TR/CSS2/sample.html

Noticeably missing is styling for links. Unless a website has explicitly declared styling in CSS or a StyleSheet, then the color of links in their various states (link / visited / hover / active) is decided by the browser default CSS styling.

Each browser has it's own (but mostly uniform) CSS rules, e.g.:


The CSS isn't necessarily always in the style sheet, it can be inline, added with a server side or client side scripting language. An !important style could be overriding another style etc.

Use Chrome developer tool or firebug to determine what style is creating the hover color. Then edit or override the color as you need.

Blue underlined links have been shown to convert to more link clicks than other links. It's what browsers defaults were in the 90's and what were all accustomed to recognizing as a link which can be clicked.

Not the answer you're looking for? Browse other questions tagged or ask your own question.