After many more hours than I would like to admit, I finally resolved the issue. The solution was not pretty. First, instead of defining the colors in the HEAD section, I indicated them in each individual SPAN (e.g. <span style="color:#336600">) as suggested here. However, that alone was not enough to keep Outlook from tampering with my span elements. So, instead of sending the email directly from a SAS data step via the FILENAME EMAIL method, I am now using a data step to create an HTML file. I then use a second data step to feed the HTML file to an email. For SAS folks, here is what that looks like:

filename report "\yadda yadda yaddaDatabase Changes as of &DTSTAMP..html";

data _null_;
file report;
set Changes end=eof;
put 'YOUR HTML HERE';
run;

filename mailbox email
to=(&to)
from=&emailid
subject="Database Changes as of %sysfunc(putn(&DTofLastUpdate,datetime.))"
content_type="text/html";

data _null_;
infile report;
file mailbox;
input;
put _infile_;
run;

filename report clear;
filename mailbox clear;

I have a SAS program that writes and sends out emails containing CSS and HTML via Microsoft Outlook. I use span elements to color substrings. Most of the time, the email that goes out looks exactly how I expected. However, sometimes substrings are the wrong color. I checked the html of the email Outlook sends out. Outlook is adding nested span elements, renaming the ones I created and sometimes deleting them. For example, <span class="greenText"> might become <span class="greenText1"> or <span class="greenText2">. Or it might delete a <span> or a </span> altogether. It will also do things like reference greenText2 when it has only defined greenText1, which also causes problems.

In the example below, Outlook replaced a </span> with </> and deleted the two <span> after it. Any idea why Outlook is doing this and how I can fix it? Is <span> the wrong tool?

Example

Here is how I set up the text colors the email uses.

.greenText {color: green}

Here is an example of how I use them.

<tr> 
  <td>6 </td>
  <td>AA<br>BA<br>BC<br>BD<br>CA </td>
  <td><span class="bluetext">Updated:</span> aa<span class="greenText"> (.14%, 1301)</span>, ba<span class="greenText"> (.13%, 3799)</span>, bc<span class="greenText"> (.16%, 347)</span>, bd<span class="greenText"> (.19%, 30533)</span>, ca<span class="greenText"> (.23%, 181)</span>, zbak_aa<span class="greenText"> (.15%, 1354)</span>, zbak_ba<span class="greenText"> (.14%, 3989)</span>, zbak_bc<span class="greenText"> (.19%, 413)</span>, zbak_bd<span class="greenText"> (.21%, 34506)</span>, zbak_ca<span class="greenText"> (.24%, 192)</span> </td> 
</tr>

Here is how Outlook is setting up those same colors.

p.greentext, li.greentext, div.greentext
 {mso-style-name:greentext;
 mso-style-unhide:no;
 mso-margin-top-alt:auto;
 margin-right:0in;
 mso-margin-bottom-alt:auto;
 margin-left:0in;
 mso-pagination:widow-orphan;
 font-size:11.0pt;
 font-family:"Calibri",sans-serif;
 mso-fareast-font-family:Calibri;
 mso-fareast-theme-font:minor-latin;
 color:green;}
span.greentext1
 {mso-style-name:greentext1;
 mso-style-unhide:no;
 color:green;}

Here is how Outlook uses them.

 <tr style='mso-yfti-irow:6'>
  <td style='border:solid #DDDDDD 1.0pt;border-top:none;mso-border-top-alt:
  solid #DDDDDD .75pt;mso-border-alt:solid #DDDDDD .75pt;padding:6.0pt 6.0pt 6.0pt 6.0pt'>
  <p class=MsoNormal><span style='font-family:"Trebuchet MS",sans-serif;
  mso-fareast-font-family:"Times New Roman"'>6 <o:p></o:p></span></p>
  </td>
  <td style='border-top:none;border-left:none;border-bottom:solid #DDDDDD 1.0pt;
  border-right:solid #DDDDDD 1.0pt;mso-border-top-alt:solid #DDDDDD .75pt;
  mso-border-left-alt:solid #DDDDDD .75pt;mso-border-alt:solid #DDDDDD .75pt;
  padding:6.0pt 6.0pt 6.0pt 6.0pt'>
  <p class=MsoNormal><span style='font-family:"Trebuchet MS",sans-serif;
  mso-fareast-font-family:"Times New Roman"'>AA<br>
  BA<br>
  BC<br>
  BD<br>
  CA <o:p></o:p></span></p>
  </td>
  <td style='border-top:none;border-left:none;border-bottom:solid #DDDDDD 1.0pt;
  border-right:solid #DDDDDD 1.0pt;mso-border-top-alt:solid #DDDDDD .75pt;
  mso-border-left-alt:solid #DDDDDD .75pt;mso-border-alt:solid #DDDDDD .75pt;
  padding:6.0pt 6.0pt 6.0pt 6.0pt'>
  <p class=MsoNormal><span class=bluetext1><span style='font-family:"Trebuchet MS",sans-serif;
  mso-fareast-font-family:"Times New Roman"'>Updated:</span></span><span
  style='font-family:"Trebuchet MS",sans-serif;mso-fareast-font-family:"Times New Roman"'>
  aa<span class=greentext1> (.14%, 1301)</span>, ba<span class=greentext1>
  (.13%, 3799)</span>, bc<span class=greentext1> (.16%, 347) </span>, bd<span
  class=greentext1> (.19%, 30533)</span>, ca<span class=greentext1> (.23%, 181)</span>,
  zbak_aa<span class=greentext1> (.15%, 1354)</span>, zbak_ba<span
  class=greentext1> (.14%, 3989)</span>, zbak_bc<span class=greentext1> (.19%,
  413)</>, zbak_bd (.21%, 34506), zbak_ca (.24%, 192) </span><o:p></o:p></span></p>
  </td>
 </tr>