Breaking News
Home » Digital » The Internet » Coding and Customization » Modern Twist To Standard Link Colors
CSS Modern Twist to Hyperlink Colors

Modern Twist To Standard Link Colors

Today links may be red, green or even orange. There really are no limitations to the color options, so use your imagination and get creative. (Just keep in mind they should be visible to your readers.)

Hyperlink Colors

Standard Web Hyperlink Colors

(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)

Sample (made bold for easier viewing): Blue Hyperlink | Red Hover | Purple Visited

Standard Link Colors Revisited

As TDH uses the Sahifa theme, links are… understated (to put it nicely). You cannot recognize links from text as there is no difference. Instead the plan is to implement the (old-fashioned) idea of blue links with a red hover and purple visited link. However, to help it look more inline with the overall site aesthetics these colors will get an upgrade. The versions of these colors used within the different Sahifa skins will be used instead. You can see our modern twist on the hyperlink colors below.

Modern Twist on Standard Web Hyperlink Colors

Sample (made bold for easier viewing): Modern Blue Hyperlink | Modern Red Hover | Modern Purple Visited

Jump to Final Code

Side By Side Comparison

As you can see the colors are following the same idea, but with a fresher version of the colors to match the current TDH website design. The reason we are using the traditional idea of hyperlink colors is to not confuse visitors. On one of our other websites we used red as our hyperlinks and when Branndon’s dad checked it out he asked why the links weren’t blue. That reminded us that people newer to the Internet (and computers in general) are used to something and changing it can cause confusion. We are hoping to avoid that confusion with this approach.

Original: Blue Hyperlink | Red Hover | Purple Visited
Modern Twist: Modern Blue Hyperlink | Modern Red Hover | Modern Purple Visited

HTML and CSS Codes for Hyperlinks

While WordPress makes adding hyperlinks easy, here is the HTML code needed to manually insert a link.

HTML Link Syntax

Here is the simple way to add a hyperlink within your website(s).

Demo: The Digital Hippies

Beginner’s Tip: To make a hyperlink open the users mail client (ready to send an email), you simply need to change the URL ( to this: mailto:[email protected]

Demo: Email The Digital Hippies

HTML Link Attribute: Open in a New Window or Tab

Sometimes you will want to add additional functions to your link(s). The most common of the different modifiers you can use when adding a link is to have the link open the URL in a new window/tab.

Modifier: target=”_blank”

Demo: The Digital Hippies

HTML Link Attribute: Adding a Title Tag for SEO

Another common modifier used is to add a title tag for Search Engine Optimization (SEO). Essentially you are giving the URL a title when the link is hovered over.

Modifier: title=”Your Title Here”

Demo: The Digital Hippies (hover over link)

Combining Both Modifiers

Often you will want to add a title AND the ability to open the URL within a new window or tab. The following code is an example of this in action.

Demo: The Digital Hippies  

Adding Hyperlinks in WordPress

It’s very simple to add a hyperlink within the WordPress posts and pages. First you’ll need to be in the ‘Add/Edit Post’ page where you add content. At the top of text box there are several icons for editing your post/page content. You need to highlight the text you wish to make into a link. Choose the Chain Link Icon

Add a Hyperlink in WordPress

Enter the Link Destination URL (Website Address) The ‘Title’ and ‘Open in a new window/tab’ are optional. Then simply click the ‘Add Link’ button. You just added a hyperlink! WordPress - Posts - Add a Hyperlink Dialog Box

Example: The Digital Hippies

In order to modify the link colors CSS coding will be necessary. The amount of coding you will need depends on whether you are using Sahifa theme, like us, or not. You’ll find the cut and paste code below for both methods.  

Sahifa Theme: Styling the Links Within the Post

Please note that even with the Sahifa theme you will be required to make some edits the style.css file for modifying the visited hyperlinks style. This is not required if you prefer to keep the visited links the same as non-visited links. Many websites today choose this as an option, while others do not. It is simply your preference. First you’ll need to head over to the ‘Sahifa Settings’ within your Dashboard of WordPress. Click the ‘Sahifa’ menu option on the left (at the bottom).

Sahifa > Sahifa Settings > Styling > Post Styling

Make the necessary changes to your color choices in the options provided. You can see the colors we used in this example.

Sahifa - Post Styling Link Options

You could stop here or continue reading to make them bold and add a style to the visited links.

Non-Sahifa WordPress Themes

Note: Hopefully your theme has the ability to add custom CSS coding without needing to edit the style.css file (found under Appearance > Editor). This will help you avoid possibly breaking your website. If you should break your website, then you will be required to do some troubleshooting. Read this for more information.

Making Links Bold

We used the CSS font-weight property to make our hyperlinks bold. You can see our use in the code snippet below (notice we are only modifying links within a paragraph with the “p”). You can also make links bolder with ‘bolder’ instead of ‘bold’.

Adding Hover Style

When a website visitor hovers over a link it is often helpful to change the color or styling in some way. This makes it more easily distinguishable as a link that is clickable to the user. In this example the hover link color changes to the red color on our site.

Adding Visited Style

We wanted to change the color of links after a user has visited that link. After someone clicks on a link and is taken to that destination, then the link will turn (the modern) purple color on our site. This is beneficial to users wanting to know which links they have clicked on before. Again we are only modifying links found within a paragraph (p).


Final Code Snippet

Example: The Digital Hippies

You can use the following code to stylize your hyperlinks as we have done here on TDH, with the Modern Twist on the traditional hyperlinks. Remember to paste this within your CSS style sheet (style.css), or the custom CSS box your theme provides (better option).

Sahifa Users: See above as you will only need to code the bold setting and hyperlink hover setting into the style.css file. This is provided in the code snippet below.

What color are your hyperlinks? Tell us in the comments below.

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge