Transcript

Kent C. Dodds: 0:00 All right. Styling. We want to make our components look awesome and there are two primary ways to style components. You have inline styles with the style prop and the regular CSS.

0:10 Normally you're going to use the className prop to target specific elements with your CSS files. With HTML you pass a string of CSS to the inline style prop. With React you pass an object. We'll talk about that a little bit.

0:27 With the className prop, it's one of the few differences between JSX and HTML. With HTML you do the class attribute and with JSX you do a className.

0:37 We have some styles on the page. You can take a look at that in the box styles file that we're importing there. Your job is to apply the right className to the individual divs based on what those divs say they should look like.

0:52 Each one of them also will have the font style of italic and the inline style for the color as well. When you're all done, it should look something like this.

1:03 Don't forget the extra credit that we've got in here. That is going to be a lot of fun. Have a good time with this. We'll see you on the other side of the exercise.