How to create multicolor links in HTML

Updated: 05/21/2018 by Computer Hope

There are a few different ways to create multicolor links on a web page. However, for anyone interested in doing this the proper way, we recommend the CSS (Cascading Style Sheets) solution, because the font tag is deprecated in HTML5.

CSS class solution

To create multicolor links using CSS, follow these steps.

Code

The first and most proper method of creating a multicolor link is to use CSS to define your color and then use them later in the actual link. In the code example below, you would place the below CSS code into the <head> portion of your web page and define the two color names and colors using HTML color codes.

<style type="text/css">
 .blue {color: #00f;}
 .green {color: #008000;}
</style>

Next, is a link containing span tags that use the above CSS defined colors.

<a href="/"><span class="green">Computer</span><span class="blue">Hope</span></a>

Example

Computer Hope

Style attribute

Another method of creating a multi-color link is to use the style attribute on a tag such as the span tag. However, we still recommend the solution above because once the CSS is created, it can be used multiple times throughout the page and requires less code.

<a href="/"><span style="color:#008000">Computer</span> <span style="color:#00f">Hope</span></a>

Example

Computer Hope

HTML font tag solution

Using the <font> tag is another method of creating multicolor links. However, the font tag is deprecated in modern HTML (hypertext markup language). Therefore, we recommend you only use this solution if CSS is not available.

Code

<a href="/"><font color="green">Computer</font><font color="blue">Hope</font></a>

Example

Computer Hope