cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
King
Level: Powered On

How to apply CSS to EMAIL

what am I doing wrong?

in the email

I will show a bit of how I want to apply CSS

 

<div class='container'>
<div class='phone' style="
width: 300px;
height: 600px;
background: #0000;
background: -webkit-linear-gradient(top,#000e3b 0,#00377b 100%);
border-radius: 2.5rem;
border: 1rem solid;
box-shadow: 0px 0px 100px rgba(0,0,0,0.2);
margin: auto;
overflow: hidden;
padding: .25rem;
">
<div class='phone-head' style="
display: flex;
margin-bottom: 1rem;
flex-direction: row;
background-color: transparent;
">
<div class='phone-head--item' style="
width: 33%;
color: white;
padding: 0 .75rem;
align-items: center;
justify-content: center
">
<i class="fa fa-arrow-left"></i>
</div>
<div class='phone-head--item'>
<h6 style="
color:#ffff;
margin-top: 1rem;
text-align: center;
">My Tickets</h6>
</div>

the result is:

download.png

 

The result I hope is:

download (1).png

1 ACCEPTED SOLUTION

Accepted Solutions
CollabTechie
Level 8

Re: How to apply CSS to EMAIL

Here's an example of what I use for HTML e-mails...

 

<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>New Deal Action Tracker</title>
    <style>
 
    @media only screen and (max-width: 620px) {
      table[class=body] h1 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
      }
      table[class=body] p,
            table[class=body] ul,
            table[class=body] ol,
            table[class=body] td,
            table[class=body] span,
            table[class=body] a {
        font-size: 16px !important;
      }
      table[class=body] .wrapper,
            table[class=body] .article {
        padding: 10px !important;
      }
      table[class=body] .content {
        padding: 0 !important;
      }
      table[class=body] .container {
        padding: 0 !important;
        width: 100% !important;
      }
      table[class=body] .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
      }
      table[class=body] .btn table {
        width: 100% !important;
      }
      table[class=body] .btn a {
        width: 100% !important;
      }
      table[class=body] .img-responsive {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
      }
    }
    /* -------------------------------------
        PRESERVE THESE STYLES IN THE HEAD
    ------------------------------------- */
    @media all {
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
        line-height: 100%;
      }
      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }
      .btn-primary table td:hover {
        background-color: #34495e !important;
      }
      .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
      }
    }
    
      .Severity-Low {
	
	background-color:#f1f7ce;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;
	
	}
	
	  .Severity-Medium {
	
	background-color:#fff1cc;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}
	
	 .Severity-High {
	
	background-color:#facfd3;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}

	
	.Header {
	
	background-color:#616265 ;
	font-weight: 900 ;
	text-align: center;
	padding-top: 20px ;
	padding-bottom: 20px ;
	color: white ;
font-size: 175%;
	 

	 
}   
 
  .Button {
	
	background-color:#3876b7;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: white ;

	}

 
    </style>
  </head>

<html>
  <body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
      <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
          <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"></span>
            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">

              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
                      <td class="Header">
                        Test</td>
                    </tr>
                    <tr>
                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"></br>
                            <p>H</p>
						<strong> 
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            <!-- END MAIN CONTENT AREA -->
            </table>
            <!-- START FOOTER -->
            <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%; text-transform: uppercase">
              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                <tr>
                  <td class="Button" style="border-bottom: 2px white solid">
                    <a href="@{items('Apply_to_each_3')?['{Link}']}" style="color: white; text-decoration: none;">Open the action</a></td>
                </tr>
                </table>
            </div>
            <!-- END FOOTER -->

          <!-- END CENTERED WHITE CONTAINER -->
          </div>
        </td>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

View solution in original post

1 REPLY 1
CollabTechie
Level 8

Re: How to apply CSS to EMAIL

Here's an example of what I use for HTML e-mails...

 

<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>New Deal Action Tracker</title>
    <style>
 
    @media only screen and (max-width: 620px) {
      table[class=body] h1 {
        font-size: 28px !important;
        margin-bottom: 10px !important;
      }
      table[class=body] p,
            table[class=body] ul,
            table[class=body] ol,
            table[class=body] td,
            table[class=body] span,
            table[class=body] a {
        font-size: 16px !important;
      }
      table[class=body] .wrapper,
            table[class=body] .article {
        padding: 10px !important;
      }
      table[class=body] .content {
        padding: 0 !important;
      }
      table[class=body] .container {
        padding: 0 !important;
        width: 100% !important;
      }
      table[class=body] .main {
        border-left-width: 0 !important;
        border-radius: 0 !important;
        border-right-width: 0 !important;
      }
      table[class=body] .btn table {
        width: 100% !important;
      }
      table[class=body] .btn a {
        width: 100% !important;
      }
      table[class=body] .img-responsive {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
      }
    }
    /* -------------------------------------
        PRESERVE THESE STYLES IN THE HEAD
    ------------------------------------- */
    @media all {
      .ExternalClass {
        width: 100%;
      }
      .ExternalClass,
            .ExternalClass p,
            .ExternalClass span,
            .ExternalClass font,
            .ExternalClass td,
            .ExternalClass div {
        line-height: 100%;
      }
      .apple-link a {
        color: inherit !important;
        font-family: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
        text-decoration: none !important;
      }
      .btn-primary table td:hover {
        background-color: #34495e !important;
      }
      .btn-primary a:hover {
        background-color: #34495e !important;
        border-color: #34495e !important;
      }
    }
    
      .Severity-Low {
	
	background-color:#f1f7ce;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;
	
	}
	
	  .Severity-Medium {
	
	background-color:#fff1cc;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}
	
	 .Severity-High {
	
	background-color:#facfd3;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: grey ;

	}

	
	.Header {
	
	background-color:#616265 ;
	font-weight: 900 ;
	text-align: center;
	padding-top: 20px ;
	padding-bottom: 20px ;
	color: white ;
font-size: 175%;
	 

	 
}   
 
  .Button {
	
	background-color:#3876b7;
	font-weight: 900 ;
	text-align: center;
	padding-top: 10px ;
	padding-bottom: 10px ;
	color: white ;

	}

 
    </style>
  </head>

<html>
  <body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
      <tr>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
        <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
          <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

            <!-- START CENTERED WHITE CONTAINER -->
            <span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;"></span>
            <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">

              <!-- START MAIN CONTENT AREA -->
              <tr>
                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
                  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
                      <td class="Header">
                        Test</td>
                    </tr>
                    <tr>
                      <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
                        <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"></br>
                            <p>H</p>
						<strong> 
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            <!-- END MAIN CONTENT AREA -->
            </table>
            <!-- START FOOTER -->
            <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%; text-transform: uppercase">
              <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                <tr>
                  <td class="Button" style="border-bottom: 2px white solid">
                    <a href="@{items('Apply_to_each_3')?['{Link}']}" style="color: white; text-decoration: none;">Open the action</a></td>
                </tr>
                </table>
            </div>
            <!-- END FOOTER -->

          <!-- END CENTERED WHITE CONTAINER -->
          </div>
        </td>
        <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
		&nbsp;</td>
      </tr>
    </table>
  </body>
</html>

View solution in original post

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

firstImage

Incoming: New and improved badges!

We've given our badges an overhaul and also added some brand new ones!

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

sixthImage

Power Platform World Tour

Find out where you can attend!

seventhimage

Webinars & Video Gallery

Watch & learn from the Power Automate Community Video Gallery!

Top Kudoed Authors (Last 30 Days)
Users online (5,649)