SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Sperryville, Virginia (USA)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Inline styles for a:link, a:hover etc in an email newsletter

    Help! Need to push out this email campaign now. CSS not supported in some email clients, so I need to set inline styles for the text links. Can't seem to get it right. CSS below. My attempt at inline css inside the container div.

    <Style a:link="color:#33348e; text-decoration: none;" a:visited="color:#33348e; text-decoration: none;" a:hover="color:#33348e; text-decoration: none;" a:active="color:#7476b4; text-decoration: underline;">

    Not working. I am new at this. I love it. Help me out?

    CS

  2. #2
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by code_sponge View Post
    Help! Need to push out this email campaign now. CSS not supported in some email clients, so I need to set inline styles for the text links. Can't seem to get it right. CSS below. My attempt at inline css inside the container div.

    <Style a:link="color:#33348e; text-decoration: none;" a:visited="color:#33348e; text-decoration: none;" a:hover="color:#33348e; text-decoration: none;" a:active="color:#7476b4; text-decoration: underline;">

    Not working. I am new at this. I love it. Help me out?

    CS
    Well, for one thing, that's not really inline CSS. Inline CSS is when you do something like this:

    Code:
    <a href="#" style="color: #555; background: #ffc;">example</a>
    For another, you can't use pseudoclasses like :hover in inline CSS.

    When you use a style element, they usually look more like this:

    Code:
    <style type="text/css" media="screen">
    a:link { color:#33348e; text-decoration: none; }
    a:visited { color:#33348e; text-decoration: none; }
    a:hover { color:#33348e; text-decoration: none; }
    a:active { color:#7476b4; text-decoration: underline; }
    </style>
    The GOOD news is that you can definitely use CSS in the head or body of your HTML email with fairly broad support. According to Campaign Monitor's email CSS compatibility guide, you can define a:hover using declarations much like how I've done it above, and the only major clients that won't get it are Gmail, Outlook 07, and Notes 6/7.

    Email HTML is HARD. It is a pain and a nuisance to get everything right in every client, and you simply do not have the same control over the presentation as you do with a web browser. If you think browser quirks and differences are hard, you ain't seen nothin' yet. It is definitely one of those situations where you just have to be content with a slightly different look between clients.

    I'd suggest you have a good close look at the guide linked on that CM page so that you have the goods on what's available and with which techniques. It's a great little cheat sheet. (No, I don't work for Campaign Monitor, i work here )
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code Sponge, you can either do "true" inline styles as Raena suggests or you can stick to the old HTML tags (which are not CSS and therefore not stripped out).

    The <style> declaration is made for the document HEAD and so is not my choice for email. I personally use inline styles for everything, it's not as clean as for the browser. Looks like:

    Code:
    <p style="color: #000000; font-size: 11px; font-family: Arial, Helvetica, sans-serif;">
    Email paragraph about something 
    <span style="font-weight: bold;">important</span>.</p>
    ~LG

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might take a look at this article that shows the ins and outs for making a solid html e-mail.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Missed that one buddy
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's ok . There are also many threads on it here on Sitepoint if the OP wants to google.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah. But i belive the conclusion is: do it with tables for a reliable result
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Sperryville, Virginia (USA)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to all. The articles are very informative. I'll reference them on my next project. Hope to tackle a full css website soon! Like Luki_be, learning each day.

    CS


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •