These two methods are not mutually exclusive – You can use Site Settings to change your site\u2019s link color to purple while using code to change the color of the links in a Text Editor widget to red.<\/p>\n\n\n\n Changing the link color using Site Settings will change all the link colors throughout your site.<\/p>\n\n\n\n To choose a link color<\/strong>:<\/p>\n\n\n\n The links throughout your site will appear in the chosen color(s)<\/p>\n\n\n\n You can use code to set the link color of an individual element. This will override the color chosen in Site Settings. The color can be set:<\/p>\n\n\n\n [callout type=”note”]<\/p>\n\n\n\n [callout type=”warning”]You must use straight quotation marks and not curly ones. Sometimes when cutting and pasting the straight quotation marks become curly and you may have to manually enter the quotation marks. [\/callout]<\/p>\n\n\n\n [callout type=”note”] <\/p>\n\n\n\n [callout type=”important”]When using an element that allows you to enter content with either a Visual <\/strong>or Text <\/strong>tab, enter the code in the Text <\/strong>tab.[\/callout}<\/p>\n\n\n\n The link will now appear as defined in the CSS snippet. For more information about CSS selectors in Elementor, see CSS selectors in Elementor<\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2021\/04\/Link-Color-Example.png\")
<\/figure>\n\n\n\nChange the link color using Site Settings<\/h2>\n\n\n\n
\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-76.png\")
The Site Settings options appear in the panel.![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-77.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-78.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-79.png\")
<\/li>\n\n\n\nChange the link color of an element<\/h2>\n\n\n\n
\n
Set a link color with HTML<\/h4>\n\n\n\n
\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-80.png\")
The element options appear in the panel.![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-81.png\")
<\/li>\n\n\n\n<a style=\"color:purple;\" href=\"#\">My purple link<\/a><\/code><\/pre>\n\n\n\n\n
Set a link color with custom CSS<\/h4>\n\n\n\n
\n
![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-82.png\")
The element options appear in the panel.![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-83.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-84.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-85.png\")
<\/li>\n\n\n\n.mygreenlink:link, .mygreenlink:visited,<\/code>.mygreenlink:active {<\/code>
color:green;<\/code>
text-decoration: none;<\/code> }<\/code>
.mygreenlink:hover {<\/code>
color: red;<\/code>
text-decoration: underline;<\/code>}<\/code>
[callout type=”note”]This creates a CSS class called mygreenlink. It is defined as a link and will apply to the link when it is active and when a visitor has already clicked the link. It includes a hover state that applies when a visitor mouses over the link. The hover state will turn the link red and underline it.[\/callout]![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-86.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-87.png\")
<\/li>\n\n\n\n![\"\"](\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2024\/04\/image-88.png\")
<\/li>\n\n\n\n<a class=\"mygreenlink\" href=\"#\">My green CSS link<\/a><\/code><\/pre>\n\n\n\n\n