title: Setting CSS styles, color, for MathJax
body: <p>Hi I am trying to add styles to my MathJax output. In particular I would like to set a global color for my equations (so that it matches the styles on the rest of my page). Currently I have the following configuration.</p>
  
  <pre><code>&lt;script type="text/x-mathjax-config"&gt;
      MathJax.Hub.Config({
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
          inlineMath: [ ['$', '$'] ],
          displayMath: [ ['$$', '$$']],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        },
        messageStyle: "none",
        "HTML-CSS": { 
            preferredFont: "TeX", 
            availableFonts: ["STIX","TeX"], 
            styles: {".MathJax" {color: "#CCCCCC";}} 
            }
      });
  &lt;/script&gt;
  &lt;script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>However if I include the <code>styles</code> tag in my configuration the math on my page just refuses to display at all. On the other hand if I remove it, it displays fine.</p>
  
  <p>Edit: I should also note that I have tried adding the styles directly to my CSS as suggested in other questions but this resulted in the same thing, no math being displayed at all.</p>
  
  <hr>
  
  <p><em>UPDATE:</em> I have added the : as Davide suggests below, now my equations display but the styling information is ignored. The styling seems to be inherited from the body of the page but wrapping the math in a div with different styling doesn't seem to affect it either.</p>
  
  <p><em>UPDATE2:</em> I have solved my the issue of the mathjax ignoring style commands. The color for text was globally set by a line in my CSS * { colour: #292929 }. This meant that the style from MathJax was being ignored. Simply changing * to body, a, p, h1, h2 fixed the issue.</p>