Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Changing link colours

Featured Replies

I have to change a links colour on hover and when selected.

 

I know this sounds easy ... or maybe it is.

 

I cant have a style sheet in the header and I cant have a separate style sheet. I can however use inline styles.

 

Please help, I will try any idea thrown my way.

 

Thanks

put the <style></style> in the Body? validators won't like it but it should work.

  • Author

put the <style></style> in the Body? validators won't like it but it should work.

 

ok I tried it and when I sent the mail to my hotmail account it was all out of wack, will have to try another way, thanks.

 

Maybe I should have said its for an email template I am making for a friend. I have done some research on best practices for using html in emails. All the articles I have read say I must use tables. Cant put styles into the header or have a separate stylesheet.

 

Ive got everything working and in place its just the links that are making my hair fall out.

<a href="your_link" style="color:#333;text-decoration:none">LINK</a>

 

Or whatever your colour

 

Something along those lines. Although you said on 'hover'.. let me get back to you

Edited by oakleaves

I know it sounds like a simple thing but I don't believe pseudoclasses like hover are possible with inline css.

I think the only way would be to actually use javascript for the hover state.

 

This is the closest I can get:-

 

 

<a href="your_link" style="color:#333333" onmouseover="this.style.color = '#ff9900'" onmouseout="this.style.color = '#333333'">LINK</a>

 

 

DEMO

Edited by oakleaves

I doubt you're going to get JS to work in an email?

I doubt you're going to get JS to work in an email?

 

 

I know, that was the only thing I could think of!! But you are right. Tricky one..

Edited by oakleaves

Are you sure that you cant put your styles in the head? We do this for our newsletters and it works fine.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>August 2011</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="robots" content="noindex,nofollow"> <style type="text/css"> <!-- a{ text-decoration:none; color:#965196; } .nc a, .navlist a{ text-decoration:none; color:#965196; } div{ background:#EDE2ED; } #bod{ margin:0; padding:0 } .navlist{ padding-left:15px; margin:8px 0; } .navlist li{ padding:0 0 15px 0; } .nc a:hover, .nc a:hover font{ color:#ffffff; text-decoration:underline; } a:hover, a:hover font{ color:#965196; text-decoration:underline; } a.t:hover, a.t:hover font{ color:#ffffff; text-decoration:underline; } .im{ padding:0 0 15px 22px; } --> </style> </head>

I believe you have your answer here already funsella..

 

this maybe worth a read http://www.sitepoint.com/code-html-email-newsletters/ and then tell your friend that if they want anything fancy then you will provide a 'click to read this online' link in the mail.

 

Then you can do what you want with the links, once the person is viewing the thing in a browser.

  • Author

this maybe worth a read http://www.sitepoint.com/code-html-email-newsletters/ and then tell your friend that if they want anything fancy then you will provide a 'click to read this online' link in the mail.

 

Thanks for the link cleared some other questions I may have asked after this one. +1 for you

 

 

I know it sounds like a simple thing but I don't believe pseudoclasses like hover are possible with inline css.

I think the only way would be to actually use javascript for the hover state.

 

This is the closest I can get:-

 

 

<a href="your_link" style="color:#333333" onmouseover="this.style.color = '#ff9900'" onmouseout="this.style.color = '#333333'">LINK</a>

 

 

DEMO

 

Thanks !!!

 

this is just what I was looking for

 

+1 for you too

 

Are you sure that you cant put your styles in the head? We do this for our newsletters and it works fine.

 

Well all the articles I have read about creating a template for emails say not to use styles within the head tags. But if it works, it works.

 

thanks for all the comments and help!!!

 

Thanks !!!

 

this is just what I was looking for

 

+1 for you too

 

 

Glad I could help

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.