Monday, September 19, 2011

How do I override my CSS link colors?

I have used a CSS to create the colors for the links on the page as a whole. There are a couple of links however that are on a dark background so I want to change those links only to different colors. Where and what code do I put in to do this?How do I override my CSS link colors?On the CSS just set up pseudo-links for those you want to change:



a:link.selector_name { color: #xxxxxx; text-decoration: none; }

a:visited.selector_name { color: #xxxxxx; text-decoration: none; }

a:hover.selector_name { color: #xxxxxx; text-decoration: none; }

a:active.selector_name { color: #xxxxxx; text-decoration: none; }



Put in whatever code you want to style those links. Then for the links you want to change only:



%26lt;p%26gt;%26lt;a class=%26quot;selector_name%26quot; href=%26quot;URL%26quot; title=%26quot;Mouseover Description%26quot;%26gt;Text Name%26lt;/a%26gt;%26lt;/p%26gt;



Name your 'selector_name' whatever you like. Remove paragraph tags if you have links in a DIV or unordered list.



RonHow do I override my CSS link colors?This is great, perfect thanks so much genius. You see I had a css for that, another css inside the html, and what was making the colors all wrong was this css included in this imagemenu thing i got from the net cant understand how it works! but nevermind that code changed the color yehey! Kudos!

Report Abuse

How do I override my CSS link colors?Finally, something that worked! Thanks!

Report Abuse

How do I override my CSS link colors?There a few ways to do this.



1)The simplest is to put this code directly on your page:

%26lt;a href=%26quot;your link url%26quot; style=%26quot;color:#newcolor;%26quot;%26gt;the link%26lt;/a%26gt;

This will override the link definition in your css.



2) The better way of doing this is in your css code add another style definition:



.link2 a:link, .link2 a:hover; .link2 a:active { color:#newcolor; }



and in your web page use this code:

%26lt;a href=%26quot;your link url%26quot; class=%26quot;link2%26quot;%26gt;your link%26lt;/a%26gt;



This way if you want to tweak the color you just need to change the css definition and don't have to touch your web page.



Good luck!How do I override my CSS link colors?jus open your css page and you should be able to change the colors there or delete all the rules for the link colors and put new rules inHow do I override my CSS link colors?Apply them inline or create a class or id for those specific links. Make sure those styles are AFTER the original ones, so they override.How do I override my CSS link colors?CSS are of basically 3 types.



External Stylesheet

Internal Stylesheet

Embedded Stylesheet



You can override an external CSS using an internal stylesheet and internal stylesheet can be overridden using embedded style sheet



external style sheet is implemented like this with in the %26lt;HEAD%26gt; tag of the html page



%26lt;link rel=%26quot;stylesheet%26quot; type=%26quot;text/css%26quot; href=%26quot;mystyle.css%26quot;%26gt;



Internal style sheet is implemented like this with in the %26lt;HEAD%26gt; tag of the HTML page



%26lt;style type=%26quot;text/css%26quot;%26gt;

a

{

color: orange

}

%26lt;/style%26gt;



Embedded style sheet can be implemented anywhere with in the body of the html document for any element on which you want to apply the style which will also override previous definitions either specified in internal/external stylesheet.



In your case, say you have a link for which you don't wish to use the style specified in either external/internal style sheet. You can achieve it like this.



%26lt;body%26gt;

%26lt;a href=%26quot;www.google.com%26quot;%26gt;Google%26lt;/a%26gt;

%26lt;a href=%26quot;www.yahoo.com%26quot;%26gt;Yahoo!%26lt;/a%26gt;

%26lt;a href=%26quot;www.myblog.com%26quot; style=%26quot;color:green%26quot;%26gt;My Personal Blog%26lt;/a%26gt;

%26lt;/body%26gt;



Further, If you have multiple links for which you do not want to apply the common style but would like to specify a different style for say links on dark background, you can derive a class for such links and create a different style under that class and put your style definition either in internal/external style sheet just like other styles and while applying that style specify the class in the elements wherever you want to apply the particular style



example



%26lt;style type=%26quot;text/css%26quot;%26gt;

/* This will be common style for all links */

a

{

color: red;

}



/* Specific style for links that appear on dark background */

/* dark is a class here */

a.dark

{

color: yellow;

}

%26lt;/style%26gt;





Now in your html body use this style like this



%26lt;body%26gt;

%26lt;a href=%26quot;www.google.com%26quot;%26gt;Google%26lt;/a%26gt;

%26lt;a href=%26quot;www.yahoo.com%26quot;%26gt;Yahoo!%26lt;/a%26gt;

%26lt;a href=%26quot;www.myblog.com%26quot; class=%26quot;dark%26quot;%26gt;My Personal Blog%26lt;/a%26gt;

%26lt;a href=%26quot;www.favorite.com%26quot; class=%26quot;dark%26quot;%26gt;My Favorite Site%26lt;/a%26gt;

%26lt;/body%26gt;



I hope that it answers your question!!!