title: C# WebBrowser control not applying css
body: <p>I have a project that I am working on in VS2005.  I have added a WebBrowser control.  I add a basic empty page to the control</p>
  
  <pre><code>private const string _basicHtmlForm = "&lt;html&gt; "
                                        + "&lt;head&gt; "
                                        + "&lt;meta http-equiv='Content-Type' content='text/html; charset=utf-8'/&gt; "
                                        + "&lt;title&gt;Test document&lt;/title&gt; "
                                        + "&lt;script type='text/javascript'&gt; "
                                        + "function ShowAlert(message) { "
                                        + "   alert(message); "
                                        + "} "
                                        + "&lt;/script&gt; "
                                        + "&lt;/head&gt; "
                                        + "&lt;body&gt;&lt;div id='mainDiv'&gt; "
                                        + "&lt;/div&gt;&lt;/body&gt; "
                                        + "&lt;/html&gt; ";
  
  private string _defaultFont = "font-family: Arial; font-size:10pt;";
  
  private void LoadWebForm()
  {
      try 
      {
          _webBrowser.DocumentText = _basicHtmlForm;
      }
      catch(Exception ex)
      {
          MessageBox.Show(ex.Message);
      }
  }  
  </code></pre>
  
  <p>and then add various elements via the dom (using _webBrowser.Document.CreateElement).  I am also loading a css file:</p>
  
  <pre><code>private void AddStyles()
  {
      try
      {
          mshtml.HTMLDocument currentDocument = (mshtml.HTMLDocument) _webBrowser.Document.DomDocument;
          mshtml.IHTMLStyleSheet styleSheet = currentDocument.createStyleSheet("", 0);
  
          TextReader reader = new StreamReader(Path.Combine(Path.GetDirectoryName(Application.ExecutablePath),"basic.css"));
          string style = reader.ReadToEnd();
          styleSheet.cssText = style;
      }
      catch(Exception ex)
      {
          MessageBox.Show(ex.Message);
      }
  }
  </code></pre>
  
  <p>Here is the css page contents:</p>
  
  <pre><code>body {
      background-color: #DDDDDD;
  }
  
  .categoryDiv {
      background-color: #999999;
  }
  
  .categoryTable {
      width:599px; background-color:#BBBBBB;
  }
  
  #mainDiv {
      overflow:auto; width:600px;
  }
  </code></pre>
  
  <p>The style page is loading successfully, but the only elements on the page that are being affected are the ones that are initially in the page (body and mainDiv).  I have also tried including the css in a  element in the header section, but it still only affects the elements that are there when the page is created.</p>
  
  <p>So my question is, does anyone have any idea on why the css is not being applied to elements that are created after the page is loaded?  I have also tried no applying the css until after all of my elements are added, but the results don't change.</p>