Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling email links in CSS

Tags:

css

selector

I'm just starting off with HTML / CSS and was having a little trouble formatting an email link embedded in a <p> tag. What sort of CSS selector could I use to access the <a> element here?

I'd like to be able to edit it as a link, hovered over, etc., so a selector using a:link or something like it would help. Thanks!

<div id="content" class="rounded-corners">
    <h2>Contact Me</h2>
    <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
    <p>aim: deadunderdecor</p>
</div>
like image 561
Nick Van Hoogenstyn Avatar asked Apr 07 '11 01:04

Nick Van Hoogenstyn


People also ask

How do I style links in CSS?

Links can be styled with any CSS property, such as color, font-family, font-size, and padding. Here is an easy example: In addition, links can be styled differently depending on what state they are in. Links also have 4 states, and many programmers style each state differently. The four states are:

Can I add CSS to HTML email?

Adding CSS to HTML Email has come a long way since every last style declaration needed to be inserted inline with your tables in order for email clients to recognize the style. With that being said, some of the older clients still require inline styling and Microsoft Outlook requires styling inside of conditional statements .

How do I include internal CSS styles in my email?

Internal CSS Styling is included in the <head> section of the document using the <style> tag along with media queries for responsive-specific CSS and Dark Mode. For a complete guide to which CSS styles are supported in email clients, check out Campaign Monitor’s Guide to CSS.

What is the best way to style email clients?

Here are some of my tips about styling for maximum compatibility between email clients. Inline styles are you best friend. Absolutely don't link style sheets and do not use a <style> tag (GMail, for example, strips that tag and all it's contents).


1 Answers

a[href^="mailto:"] {
   ...
}
like image 126
alex Avatar answered Sep 23 '22 23:09

alex