<p>
RIght out of the box, the content you type into Wygwam field will have its native css applied to it like so:</p>
<p>
<img alt="native css displayed in Wygwam for ExpressionEngine" class="blog_img" src="http://viminteractive.com/images/img_blog_wygwam_display_css1.gif" style="width: 450px;" /></p>
<h2>
Enabling CSS in Wygwam</h2>
<p>
Click &quot;Add-Ons&quot; and choose &quot;Fieldtypes&quot; from the drop-down menu:</p>
<p>
<img alt="expressionengine toolbar" class="blog_img" src="http://viminteractive.com/images/img_blog_wygwam_display_css2.gif" /></p>
<p>
When the Fieldtypes listing loads, click &quot;Wygwam&quot; from the bottom of the list then choose the Editor Configuration type you want to edit:</p>
<p>
<img alt="choose which editor configuration to edit for Wygwam" class="blog_img" src="http://viminteractive.com/images/img_blog_wygwam_display_css3.gif" /></p>
<p>
When the Edit Configuration screen loads, find the <strong>CSS File</strong> row:</p>
<p>
<img alt="CSS File field in Wygwam" class="blog_img" src="http://viminteractive.com/images/img_blog_wygwam_display_css4.gif" /></p>
<p>
Type the absolute URL to your site&#39;s default stylesheet in the textfield to the right</p>
<p>
<img alt="" class="blog_img" src="http://viminteractive.com/images/img_blog_wygwam_display_css5.gif" /></p>
<p>
If you don&#39;t know the absolute path to your stylesheet, view the source code of any page from your site and copy and paste the css path from the &lt;HEAD&gt; of your HTML document. If you&#39;re using an ExpressionEngine template for your CSS file, your source code will have a version number following the template name that reflects the latest saved verison of the stylesheet:</p>
<pre class="brush: xml">
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://viminteractive.com/?css=styles/default.v.1290551258&quot; type=&quot;text/css&quot; media=&quot;screen&quot; title=&quot;default&quot; charset=&quot;utf-8&quot; /&gt;</pre>
<p>
Before you copy and paste this path into the textfield above, remove all the characters after /default. If you don&#39;t do this, whenver you make changes to your CSS template in ExpressionEngine, your absolute path will no longer reference the default file, but instead the latest saved version. This little trick makes sure you don&#39;t have to go back and change the absolute path each time you make a change to your stylesheet.</p>
<h2>
Try it Out!</h2>
<p>
After applying the absolute path to your default CSS file in the Wygwam settings, you should see your own CSS now being displayed in Wygwam.</p>
<p>
Before (right) and After (left):</p>
<p>
<img alt="comparison of header css in Wygwam" class="blog_img" src="http://viminteractive.com/images/img_blog_wygwam_display_css6.gif" /></p>
<p>
&nbsp;</p>
<p>
&nbsp;</p>