title: Using CSS with React/JSX
body: <p>This may be a very simple question but I cannot figure out how to use CSS with React.
  I have heard of inline styles but I couldn't figure out how to get it to work.</p>
  
  <p>More so, if I use CSS where do I apply it to considering all my HTML is JSX within the react class. So I would not be able to do normal CSS i.e</p>
  
  <pre><code>.className{
  
  }
  </code></pre>
  
  <p>One of my react classes contains this code:</p>
  
  <pre><code>render: function() {
  
      return (
          &lt;div&gt;
            &lt;h1&gt; Todos &lt;/h1&gt;
  
            &lt;form className="todoForm" onSubmit={this.handleSubmit}&gt;
              &lt;input
                  type="text"
                  placeholder="Enter task"
                  value={this.state.text}
                  onChange={this.handleChange}
                  /&gt;
              &lt;input
                  type="submit"
                  value="Submit todo"
                  /&gt;
            &lt;/form&gt;
  
            &lt;h4&gt; List of todos: &lt;/h4&gt;
  
            &lt;ToDoList deleteItem={this.deleteItem} listItems={this.state.submittedValues}/&gt;
          &lt;/div&gt;
      );
  </code></pre>
  
  <p>How would I say make the input box in the form have a green background or how would I make the <code>&lt;h1&gt; heading</code> blue in font? In CSS I would just have a css file link it to html and say: <code>h1 { color: blue };</code>
  cant quite see it in react though? </p>