Changing the hyperlink color in CSS is a fantastic option that works on any website and anywhere on the website – be it in Elementor, WordPress’ Gutenberg Editor, your Woocommerce store, etc. In this tutorial, I’ll be showing you step-by-step how to change the color of a link in CSS – directly in the HTML source code. It’s QUICK and EASY, and requires just a little bit of CSS color coding!
How to change the hyperlink color in CSS?
After I’ve recently showed you how to change the hyperlink color of your WordPress theme in Elementor and how to change the link color of the current page with Elementor, I’m going to show you today how you can change the color of a link in CSS!
Don’t worry, changing the hyperlink color in CSS isn’t as scary as it may seem at first sight – there’s just a tiny bit of code you’ll need to add, and I’m going to walk you through all the steps, one by one!
The amazing thing about changing the color of a link in CSS is that you can use this method anywhere on your website – in Elementor, in the WordPress Gutenberg Editor, in your Woocommerce product details and descriptions, in text blocks, in headings, in image captions, you name it.
And it does not only work with WordPress, you can also use it on your Squarespace artist site, on Wix, Weebly, Shopify, and so on. It just works. fine. everywhere. 😆
Related: → Best Hyperlink Colors For Your Artist Website
By the end of the tutorial, I’ll be showing you some more possibilities to style your links with CSS to make them appear underlined, bold, and italic!
But without further ado now, let’s get into it and see how you can change the color of a link in CSS!
How do i change the color of a link in CSS?
To change the color of a link in CSS, these are the 4 steps you'll need to follow:
Step-by-Step Tutorial
How to change the color of a link in CSS
STEP 1: Type in the hyperlink text
All you need to do in Step 1 is type in all the text that you want to show on your website, including the text that you later on want to use as a hyperlink!
For the example here, you can see that I’ve taken some dummie text from Elementor’s Text Editor Widget and typed in the text that I wish to link later on – right in the middle of the dummie text (“This is a link to my website.”).
If you’re using the Gutenberg Editor to build your WordPress site, you just enter your text, including the prospective hyperlink, into one of the Paragraph blocks.
That was already all for Step 1. So let’s move on to the next step and add a link to the target page!
STEP 2: Add the hyperlink target as usual
In Step 2, we’re going to add the hyperlink target – just as usual.
If you’re using Elementor, go to the Text Editor and select the text that you want to link.
Then click on the “Insert/edit link” icon and type your target website into the text bar.
Once you’re done, hit the Return arrow icon and your link is there!
If you’re using the Gutenberg Editor for your WordPress site, you can basically follow the same process.
In the Paragraph block, select the text that you want to link. Then click on the Link icon in the top bar menu. This will bring up a dialog box where you can type in the link target. Once you’re done, just hit the Return arrow icon.
Feel free to add options like “Open in new tab” or “Sponsored link” etc., if you wish.
STEP 3: Switch to source code view
Step 3 of our tutorial on how to change the color of a link in CSS is a very IMPORTANT one.
Because, before you can enter any CSS code, you’ll need to switch to source code view.
Different website builders have different names for ‘Source Code View‘ – but the principle is always the same: you get to see the actual ‘skeleton‘ of your text, the way it is built up in HTML – the stuff websites are made of!
So, if you’re using Elementor, go to the Text Editor and click on Text view.
This will immediately show you what your text looks like in HTML.
To access the source code view in the Gutenberg Block Editor, you need to click on the three little dots in the top bar menu. Then, from the dropdown menu, select ‘Edit as HTML‘.
Again, you’ll see your text in HTML, which looks exactly the same as in Elementor!
Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder
Right now, the HTML structure of the example text is not too complicated. That’s why you see only one HTML tag in the source code. That HTML tag is a so-called anchor tag and includes the hyperlink we’ve just added in Step 2.
Just like all HTML code, the anchor tag starts with an opening angle bracket ( < ), followed by an ‘a‘ for anchor. After ‘href’ (hyperlink reference) comes the link to the target website, and the closing angle bracket ( > ) ends this first HTML tag.
When you look down a bit further, you’ll see that there’s another HTML anchor tag that marks the end of the hyperlink. That one includes a forward slash ( </a> ).
STEP 4: Insert the following line of CSS code
Step 4 is actually where the magic happens!
Now we’re going to insert a small line of CSS code that will allow you to change the color of your link!
CSS stands for Cascading Style Sheets, and that’s exactly why the code starts with the word ‘style‘.
After ‘style‘ comes the word ‘color‘, followed by a colon and a hash ( # ). After that, there’s a so-called hexadecimal value, which is the color code.
Altogether the CSS color code looks as follows:
Note the equal sign and the quotation marks. It’s very important to copy the code exactly the way it is. Make sure to not add any spaces or drop any of the special characters – because then it won’t be working any more!
The color code usually consists of 6 digits, a combination of the numbers 0 – 9 and the letters A – F.
The 6 Fs in the example above stand for ‘white’.
Let’s say I want my link to be a pink color. I know that the color code of the pink color I want is ‘#C54678’.
So what I’m going to do now is paste the entire CSS color code (style=”color:#C54678″) inside the HTML anchor tag.
You can paste the code right after the ‘a‘ at the beginning. You can also insert it right before the closing angle bracket ( > ).
It really doesn’t matter where you put the code within the HTML tag – just make sure to leave spaces around the string of code and to not accidentally paste it into the link itself.
Once you’re done, your code should look something like above in the Elementor Text Editor, or something like below in the WordPress Gutenberg Editor! 😊
Now just hit Publish or Update, and you’ve just changed the color of a link in the HTML source code!
Your hyperlink should now appear in the color that you’ve assigned to it using CSS.
When you hover the mouse over the pink text in the example below, you’ll see that the pink text is a link you can click!
The color of a link changed in CSS.
As you may have noticed, the only downside to this method is that you cannot assign a hover color to the link. The only thing that will indicate to the visitor that this is a link is the different color and the cursor transforming into a hand.
If you’d like to have more dynamic links with a hover effect, check out my tutorials on how to change the hyperlink color in Elementor for your entire WordPress theme or just for the current page.
How do I style a link in CSS?
There are different ways to find out the code of a color. For example, you can use Photoshop’s color picker tool or that of another free alternative, such as Gimp or Pixlr. You can also install a color picker extension to your Chrome browser.
The easiest way, however, is probably to use Elementor’s or WordPress’ own color wheel.
In the Elementor Text Editor, go to the Style tab in the top bar, and then click on the color icon next to ‘Text Color‘ in the Text Editor dropdown.
This will open Elementor’s color picker dialog box, where you can choose a color in the color wheel.
The code of the color will appear in the bottom field. From there, you can simply copy and paste it into your CSS code!
Things work very similarly within the Gutenberg Block Editor.
First of all, click on the little downwards arrow at the very right in the top bar menu. This will show you a dropdown menu from where you can select ‘Text Color‘.
Once you’ve clicked on ‘Text Color‘, a dialog box with preset colors will pop up. Click on ‘Custom color‘ at the bottom to get to the color wheel in the WordPress Gutenberg Editor.
From here, you can choose your preferred link color. Then copy the code in the bottom field and paste it into the CSS code!
Other ways to style a link in CSS: Underline, Bold, and Italic
There are a couple other options that you can use to style your links in CSS. Apart from changing the link color, you can make your links appear underlined, bold, and/or in italics!
The following strings of CSS code will allow you to make your link appear underlined, bold, or italic:
You can use any of these strings individually, or combine several or all of them to change the style of one particular link.
For example, if I want to create a link in a pink color that is bold, italic, and underlined, the CSS code that I will have to paste into the source text looks as follows:
Note that all strings are separated by semicolons ( ; ), and quotation marks are only at the beginning and at the end of the entire line of code!
With all the code from the example, my pink hyperlink will now look as below:
Link style changed to underline, italic, and bold in CSS.
How do I remove a link color in CSS?
To remove the color of a link in CSS, all you actually need to do is delete the ‘style‘ attribute from your source text.
However, if you want to make a link look like regular text, while still being a link, you can assign it the same color as your text. For example, if I use a dark gray color for my normal text, I would assign the same gray color to my link to make it ‘blend in’ perfectly!
This tutorial showed you how to change the color of a link in CSS – in both WordPress’ Gutenberg Editor and Elementor!
I’m using Elementor for my entire WordPress site! It’s super-easy and fast – and so versatile, you can just create any web page design you can think of!
Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
Learn More About Elementor:
I hope this little tutorial on how to change the color of a link in CSS was able to help you! If you enjoyed, please share the tutorial with other users and don’t forget to drop me a comment. Bye for now, Angie 🌟
Hi Angie! You’ve done a great job. I love your content and will definitely suggest it to my friends. I’m confident they’ll benefit from this site!
Thank you so much, Mia, it means a lot to me to hear that from my readers! ♥︎
I’m still learning from you, while I’m trying to achieve my goals. I definitely liked reading everything that is posted on your website.Keep the posts coming. I liked it!
I wish you the best of luck for achieving your goals, Scsarpisnato! Thanks for stopping by and dropping a comment (: