Alright, guys.
So, now we're going to learn how to use CSS within React.
It's pretty straightforward.
What I'm going to do is, I had to reopen my editor so I'm going to rerun the application here. And then
in the source directory I'm going to create a new folder called css.
That's going to load up here, so just let that do its thing. In the CSS directory
I'm going to create a new file called style.css, and we're going to start making some CSS changes.
So if you guys have taken any of my other courses, you will know that I enjoy writing my CSS within the
browser itself.
So I'm going to select that button, and then the elements styles I'm going to start shaping it through
using CSS.
So, let's just do something quick and simple. Padding is going to be 10 pixels, border is going to be none,
border radius...
that's weird.
Way down there.
Alright. Border radius is going to be 50 pixels, and let's change the padding to 10 pixels and then
30 pixels.
Letter spacing is going to be 1 pixel, text-transform uppercase. And then one more,
just change the color of this a bit.
And so that's our one rule.
So we're going to copy that and then refresh the page so we can see that it's not applied.
And then in my style file, I'm going to target body button,
and we're going to copy those there. And then inside of my application file, all we need to do is import
the CSS file.
So rather than importing something from the file, we're just going to go ahead and write import
and then the path name.
So in this case it's gonna be ./css/style.css. I'm going to save it and then we wait for this to reload,
and the style sheet has been included.
It's literally that simple.
And then a really cool thing is that in the style sheet, this is where it's imported into the application,
it's going to be recompiled automatically when it changes, basically.
So, let's go ahead and add background color of red,
and I'm going to save, and it will automatically refresh or reload that. In fact, it doesn't even refresh.
And then this will be the color of every button as such.
So that's a really basic look at CSS.
But now let's...
well, we have enough, I guess.
So, what we're going to do now is, by using what we've just learned, I want you guys to build a calculator.
So you guys can do it in whatever way you think will work.
Just make sure it has the number buttons, and then the operations like the plus and minus button. And,
yeah.
Make it look like a calculator.
And when we come back in the next video I will build mine. Or, you guys can just build one along with
me. If you're feeling a bit eager, though, feel free to build the calculator, and then compare it to what
we build in the next video.