Create React App, by default, supports us getting CSS into our application in a number of different ways. 

We can get CSS directly into our components by writing a style attribute and giving it some arbitrary CSS, as in the following code:

const Example = () => {
  return (
    <div className="Example" style="border: 1px solid red;">
      Hello
    </div>
  );
};

This will give us a little div with the word Hello in it, surrounded by a single-pixel red line for the border. While this is something you technically can do, generally speaking, you should avoid it. Using inline style statements like the preceding example makes it hard to keep your styles organized and track them down when formatting does go awry. Plus, if a designer or another non-developer needs to update the look and feel (for example, if the standard colors for things change), they will have to search to find where this one random little one-pixel red border is coming from!

We can also create .css files and then import them into our project via a statement like the following:

import "./someStyle.css";

This is a technique that you've seen used before and that we've used a great deal in our application. It's useful, of course, and allows us some small amount of separation of code and styles, but it doesn't give us everything that we need. In fact, it actually introduces a new problem that we now have to solve, and one that can make fixing your projects and cleaning up the visual display of your projects incredibly frustrating and difficult over time: CSS conflicts!