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>
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:
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 .
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.
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).
a[href^="mailto:"] {
...
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With