Apply Styles to a UI in JSX

Instructor: [0:00] I've added this normalize.css file to our project. This is going to give us a consistent baseline of styles that we can build on top of. I've also updated app.css and pasted a bunch of styles in here. You can see we have things for our header, our header <h1>. We have a handful of classes in here that we're going to apply in our JSX.

[0:18] Let's go into app.js and make sure we're importing both of our CSS files. You'll see that we already have the import for app.css, but we also want to pull in our normalize.css file. Just above that, I'm going to add a new import line. I'm going to import and just supply the path to normalize.css. I'll save that.

[0:40] Without applying anything to our markup, let's look at the browser and see what this has done to our application. We can see between the normalized script and the element selectors that have been pasted into that app.css, we've applied a lot of styling without having to change our JSX all that much, but we do want to apply some classes.

[0:58] Let's go back into our code and add some classes to our markup. Let's start by applying a little bit of styling to our app title. I'm going to come in here. I'm going to split the words "Study" and "Deck" using a span. We'll put Deck inside the span here. To my span, I want to apply a CSS class.

[1:18] Because we're in JSX in React, we can't use the word class because this doesn't match up with the underlying JavaScript API that they use. We're going to use className instead. Then we can just pass it in a string with the name of our class from our CSS file. The name of our class is titleHighlight. I'm going to save this.

[1:41] Let's look in the browser. We'll see Study Deck is now two colors with Deck being a lighter blue. I'm going to go through and apply a few more of our styles. I'll drop down here into main. The div under the yourCards heading is going to be a container for a CSS grid layout. I'll give this a className. The className that's defined in our app.gss is called gridContainer.

[2:06] For the div that's going to represent our individual flashcard, I'm going to give this a className. That's going to be called Tile. Our <h4> is going to get the className cardTerm. The div that holds the buttons is going to get the className cardButtons.

[2:32] We're also going to style our buttons. We're going to come down here. We'll give each of these a className. Both the Edit and Delete buttons are going to get a class called secondary. The Edit button will keep secondary by itself. The Delete button is also going to get a class called danger.

[2:52] In our showBack button, I'm going to make this a tertiary button. We have primary, secondary, and tertiary styles. We're going to use tertiary and secondary here for these three buttons. Let's save this and take a look at our application now.

[3:10] We can see that our card has been styled. It has an outline, a background color, little bit of a drop shadows, rounded corners. You can also see our buttons have been styled. Our secondary button is blue. Our secondary button with the danger class also applied to it turns it red. Then tertiary gives it this dark gray color.

[3:28] The only other thing I want to do here is I want to basically keep the showBack button here. I want to push the Edit and Delete buttons together over here, on the right-hand side. You can see they're lined up and spread out. This is because the cardButtonsContainer class applies a flex layout to this.

[3:47] Really, all we have to do is add an extra container here to push everything over. Let's go back into our code to do that. After our showBack button, I'm going to add a div. I'm just going to take the Edit and Delete buttons. I'm going to move those up into the div, save this.

[4:07] If we look in the browser again, we'll see that it's taken those and pushed them together over to the right and left our show back button over to the left.