<h4 dir="auto">Challenge Name</h4>
<p dir="auto"><a href="http://beta.freecodecamp.com/en/challenges/basic-css/change-the-color-of-text" rel="nofollow">http://beta.freecodecamp.com/en/challenges/basic-css/change-the-color-of-text</a></p>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">When using inline style to change the h2 element to the color red, my output says "try again" and that I need to change the h2 color to red. I have tried both inline style and using style tags.</p>
<p dir="auto">UPDATE: this also occurred a few challenges later, when directed to change h2 elements to 'blue' using CSS. Could possibly be an issue with the rest of the 'Basic CSS' section.</p>
<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version: Firefox version 51.0</li>
<li>Operating System: Windows 10</li>
<li>Mobile, Desktop, or Tablet: Desktop</li>
</ul>
<h4 dir="auto">Your Code</h4>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
  h2 {
    color: red;
  }
&lt;/style&gt;
&lt;h2&gt;CatPhotoApp&lt;/h2&gt;
&lt;main&gt;
  &lt;p&gt;Click here to view more &lt;a href=&quot;#&quot;&gt;cat photos&lt;/a&gt;.&lt;/p&gt;
  
  &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;https://bit.ly/fcc-relaxing-cat&quot; alt=&quot;A cute orange cat lying on its back.&quot;&gt;&lt;/a&gt;
  
  &lt;div&gt;
    &lt;p&gt;Things cats love:&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;cat nip&lt;/li&gt;
      &lt;li&gt;laser pointers&lt;/li&gt;
      &lt;li&gt;lasagna&lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;Top 3 things cats hate:&lt;/p&gt;
    &lt;ol&gt;
      &lt;li&gt;flea treatment&lt;/li&gt;
      &lt;li&gt;thunder&lt;/li&gt;
      &lt;li&gt;other cats&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;
  
  &lt;form action=&quot;/submit-cat-photo&quot;&gt;
    &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;indoor-outdoor&quot; checked&gt; Indoor&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;indoor-outdoor&quot;&gt; Outdoor&lt;/label&gt;&lt;br&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;personality&quot; checked&gt; Loving&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Lazy&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Energetic&lt;/label&gt;&lt;br&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;cat photo URL&quot; required&gt;
    &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
&lt;/main&gt;



"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  <span class="pl-ent">h2</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> red;
  }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>CatPhotoApp<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">main</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Click here to view more <span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span>="<span class="pl-s">#</span>"<span class="pl-kos">&gt;</span>cat photos<span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span>.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
  
  <span class="pl-kos">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span>="<span class="pl-s">#</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span>="<span class="pl-s">https://bit.ly/fcc-relaxing-cat</span>" <span class="pl-c1">alt</span>="<span class="pl-s">A cute orange cat lying on its back.</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">a</span><span class="pl-kos">&gt;</span>
  
  <span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Things cats love:<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>cat nip<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>laser pointers<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>lasagna<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">ul</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Top 3 things cats hate:<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">ol</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>flea treatment<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>thunder<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>other cats<span class="pl-kos">&lt;/</span><span class="pl-ent">li</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;/</span><span class="pl-ent">ol</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
  
  <span class="pl-kos">&lt;</span><span class="pl-ent">form</span> <span class="pl-c1">action</span>="<span class="pl-s">/submit-cat-photo</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">radio</span>" <span class="pl-c1">name</span>="<span class="pl-s">indoor-outdoor</span>" <span class="pl-c1">checked</span><span class="pl-kos">&gt;</span> Indoor<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">radio</span>" <span class="pl-c1">name</span>="<span class="pl-s">indoor-outdoor</span>"<span class="pl-kos">&gt;</span> Outdoor<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">br</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>" <span class="pl-c1">name</span>="<span class="pl-s">personality</span>" <span class="pl-c1">checked</span><span class="pl-kos">&gt;</span> Loving<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>" <span class="pl-c1">name</span>="<span class="pl-s">personality</span>"<span class="pl-kos">&gt;</span> Lazy<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">checkbox</span>" <span class="pl-c1">name</span>="<span class="pl-s">personality</span>"<span class="pl-kos">&gt;</span> Energetic<span class="pl-kos">&lt;/</span><span class="pl-ent">label</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">br</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">placeholder</span>="<span class="pl-s">cat photo URL</span>" <span class="pl-c1">required</span><span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span>="<span class="pl-s">submit</span>"<span class="pl-kos">&gt;</span>Submit<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">form</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">main</span><span class="pl-kos">&gt;</span>


</pre></div>
<h4 dir="auto">Screenshot</h4>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/25524493/22936167/aabd6c94-f2a2-11e6-914f-7df9d4f03a5a.png"><img src="https://cloud.githubusercontent.com/assets/25524493/22936167/aabd6c94-f2a2-11e6-914f-7df9d4f03a5a.png" alt="screenshot 30" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/25524493/22936183/b2ba2450-f2a2-11e6-9a5b-5d60214ffe23.png"><img src="https://cloud.githubusercontent.com/assets/25524493/22936183/b2ba2450-f2a2-11e6-9a5b-5d60214ffe23.png" alt="screenshot 31" style="max-width: 100%;"></a></p>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">This is for the feature/curriculum-expansion branch only when run locally, and NOT the staging branch.</p>
<p dir="auto">For several challenges (challengeType: 0, using the code editor with the mobile-phone output layout), the jQuery method .css() doesn't seem to be accessing the styles applied in a <code class="notranslate">style</code> tag in the given code. This is affecting any assert tests that use a pattern of <code class="notranslate">assert($('selector').css('propertyToCheck') == 'valueToCompare', 'message: ...');</code>.Here's an example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;style&gt;
 h2 {
   position: relative; 
   top: 15px;
 }
&lt;/style&gt;
&lt;body&gt;
  &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt;
  &lt;h2 class=&quot;testCode&quot;&gt;Move me!&lt;/h2&gt;
  &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt;
&lt;/body&gt;
&lt;script&gt;
  console.log($('h2').attr('class')); // Works great, returns testCode
  console.log($('h2').css('position')); // returns undefined
  console.log($('h2').css('top')); // returns undefined
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
 <span class="pl-ent">h2</span> {
   <span class="pl-c1">position</span><span class="pl-kos">:</span> relative; 
   <span class="pl-c1">top</span><span class="pl-kos">:</span> <span class="pl-c1">15<span class="pl-smi">px</span></span>;
 }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>On Being Well-Positioned<span class="pl-kos">&lt;/</span><span class="pl-ent">h1</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h2</span> <span class="pl-c1">class</span>="<span class="pl-s">testCode</span>"<span class="pl-kos">&gt;</span>Move me!<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>I still think the h2 is where it normally sits.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">body</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">attr</span><span class="pl-kos">(</span><span class="pl-s">'class'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Works great, returns testCode</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// returns undefined</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Related assert tests that aren't passing:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="assert($('h2').css('position') == 'relative', 'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.');

assert($('h2').css('top') == '15px', 'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.');"><pre class="notranslate"><span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'position'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'relative'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Add a CSS rule to specify that the &lt;code&gt;h2&lt;/code&gt; has a &lt;code&gt;position&lt;/code&gt; set to &lt;code&gt;relative&lt;/code&gt;.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-en">assert</span><span class="pl-kos">(</span><span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-s">'h2'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">css</span><span class="pl-kos">(</span><span class="pl-s">'top'</span><span class="pl-kos">)</span> <span class="pl-c1">==</span> <span class="pl-s">'15px'</span><span class="pl-kos">,</span> <span class="pl-s">'message: Use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px away from the &lt;code&gt;top&lt;/code&gt; of where it normally sits.'</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h4 dir="auto">Browser Information</h4>
<ul dir="auto">
<li>Browser Name, Version: Firefox 48.0.1</li>
<li>Operating System: Mac OS X, El Capitan v10.11.3</li>
<li>Mobile, Desktop, or Tablet:</li>
</ul>