Tuesday, September 13, 2011

How do change the color to a link on my website?

Okay I put a link in my layout code on my website and I want it to be the same color as my text color on my website how do I change the color of the link on my website?How do change the color to a link on my website?
There are two different ways you can do it. You can do it inline or change the color using an external stylesheet. The easiest way to change the color is to use an inline style like this.



%26lt;a href=';yourlink'; style=';color: blue;';%26gt;Your Link%26lt;/a%26gt;



There a basic colors you can change it to by simply typing the color like Blue, Black, Red, Orange, etc...



But If you want to change it to a certain color you must know what the corresponding hexadecimal code is. For example the hexadecimal code for the color blue is #0066A2.



So if you wanted to change the color of your link to this color the code would look like this.



%26lt;a href=';yourlink'; style=';color: #0066A2;';%26gt;Your Link%26lt;/a%26gt;



So you have to know what the color of your text is to match the color of your link with it. If you are using a Firefox browser you can download an Add-on called Color Zilla that will allow you to take a sample of any color on a web page and give you the hexadecimal code for it.



Firefox is a good web browser to use for designing web sites they have a lot of cool add-ons. If you don't use Firefox you should give it a try. Once you have Firefox installed you can Add-On Color Zilla



https://addons.mozilla.org/en-US/firefoxHow do change the color to a link on my website?
This is easily done with a style sheet. Create a page in the root of your web folder called style.css.



Using Notepad, put this stuff into it:



/* PAGE LINK COLORS */



a:link { color: #83F0D5; text-decoration: underline; }



a:visited { color: #83F0D5; text-decoration: underline; }



a:active { color: #83F0D5; text-decoration: underline; }



a:hover { color: #D67D10; background-color:#000000; text-decoration: underline; }



The first one controls the appearance of a link before it it clicked on.

Notice that you can set the color using the hexadecimal notation typically used for this. The second controls what the link looks like after it has been clicked on at least once. You can even control how the link appears when the mouse hovers over it (last one).



You need one more thing. On your web pages, between the %26lt;HEAD%26gt;%26lt;/HEAD%26gt; tags, add this line:

%26lt;link rel=';StyleSheet'; href=';style.css'; type=';text/css';%26gt;



This tells the browser that it needs to load the style sheet called style.css and use the information in it when displaying your page.



There are many sources of information on the Internet regarding style sheets. All good websites use them. It would be a good thing for you to learn!

No comments:

Post a Comment