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 suggest using the CSS 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 theportion of your web page and define the two color names and colors using HTML color codes.

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

ComputerHope

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.

Computer Hope

HTML font tag solution

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

ComputerHope

  • How to change the color of links on a web page.
  • How to create an HTML link on a web page.
  • See our HTML color code page for a full listing of color codes.
  • See our hyperlink definition for further information on links.
  • CSS and HTML color help and support.