Today, it’s extremely common to see hyperlinks within a webpage that are any color but blue. Some are underlined, some aren’t. Some even have flashy mouseover effects.

“That’s all well and good,” you might be thinking, “but what about my email messages?” Well, you can rest easy: you can also change the style of your email links using inline cascading style sheets, or CSS.

Applying Styles To A Link In Bronto

Before you get started, it’s important to remember that not all email clients will honor link colors set within your message. That’s right: some subscribers will still see the default link color and style for their particular email client. With that in mind, it’s a good idea to avoid using colored backgrounds that might hide your links if the default styles are displayed (stay away from those electric blue backgrounds!)

Let’s say you’re editing a message in Bronto, and you want your readers to click on the text “Check out our latest specials here.” You’d like the text to be green with no underline. You can do that by specifying the text-decoration and color attributes for your link. Here’s how it’s done:

Step 1:

Click and drag over the desired text to select it.

Step 2:

Click the Insert/edit a link icon in the WYSIWYG editor toolbar.

Step 3:

A pop-up box will appear with link options. Type the desired target in the Link URL field.

Step 4:

The Style field is where you will enter your CSS data. We’ll use the text-decoration value to remove the underline, and the color value to change our link to green.

Be sure to enter the punctuation just as you see above.

The value text-decoration: none; removes the underline from the text, and color: #009900 changes the text color to green. #009900 is the hex color code for the specific green we chose; you can find hex codes for your desired color via a number of free resources available on the web.

Step 5:

Click the Insert button to insert the link into your message.

Step 6:

You may notice that the link is still blue and underlined in the edit window. Click the Preview button to see how the link looks with the styles applied.

Step 7:

Click Save and Close.

You now have a link that reflects your own style!

As always, if you have any questions about link styles, feel free to post in the comments or to open a case from the Support link within your account.

Brad Gurley
Support Associate at Bronto

Related posts:

1. Adding Style To Your Images Do your images have style?  If not, why?  It’s...
2. Tips & Advice for Creating Bronto Templates In addition to the stock email templates available, clients also...
3. Social Sharing Links: Titles And Summaries Last year, I wrote a post about our Social Sharing...