00:00:00 So how can we apply styles in React?

00:00:03 Or maybe I should rephrase.

00:00:05 Is there any kind of styling we can't use with React.js?

00:00:09 Inline styles, CSS, Tailwind CSS, Bootstrap, Material UI, AntUI, SAS, CSS in JS, CSS modules, you name it.

00:00:19 You can choose any approach to style your React apps.

00:00:22 So let's try a couple of these styling ways in our app.

00:00:26 First of all, head over to index.css and remove all styles from here.

00:00:31 This is one way of styling where you write styles in a separate CSS files and then you import them into your component.

00:00:38 We've imported this index.css file within our main .jsx.

00:00:43 Let's start by applying some styles to this app.

00:00:45 I'll start by targeting all the elements and set some styles that you typically do at the start of every single application,

00:00:52 such as box sizing set to border box, margin set to zero, and padding set to zero.

00:01:00 This will reset those styles for all the elements on the screen.

00:01:04 Next, we can target the body element and give it some padding, like 40 pixels should be enough.

00:01:10 Oh, and I almost thought that I was writing CSS in JS, so I automatically made it a string, but that's not necessary in regular styling.

00:01:18 We can also change the background color to something like hash 151515. Let's also change the font family to something like Franklin.

00:01:31 Gothic medium, or if we don't have that, we can just do Arial.

00:01:36 And finally, we need to style the H2 element by changing its color to something like hash F3, F3, F3, giving it a text align of center,

00:01:48 as well as a margin bottom of about 30 pixels.

00:01:52 And finally, a font size of 48 pixels.

00:01:56 There we go.

00:01:57 Now I can zoom out a bit.

00:01:59 and we can see everything more clearly.

00:02:01 We just applied some styles directly to HTML elements without having to manually select them right here.

00:02:07 But if we want to be a bit more specific, then we can use class names.

00:02:11 So let me remove this first H2, and let's remove some of these props as we're not using them anyway.

00:02:17 And now we can give this div that's wrapping these three cards a class name equal to card-container.

00:02:26 Notice that unlike styling HTML, you don't have to say class name or lowercase.

00:02:31 In React, it actually has to be uppercase and in class name.

00:02:35 Now you can head back over to index.css and style that class name by saying dot card container.

00:02:43 And then you can give it a display flex, flex wrap of wrap, justify content of center, as well as a max width of something like 1024 pixels.

00:02:56 This will make it look good on all different devices.

00:02:58 I'll also give it a margin of zero and then auto.

00:03:02 And naturally, if you applied an ID to this div, you would be able to style it by saying hash and then the name of the ID.

00:03:10 Now that you know how we can use external style sheets to style our React components, let me also teach you how we can do some inline styles.

00:03:17 We can do it on this card component by giving this div a style property and an object.

00:03:23 And then here you can define styles within JavaScript by saying, for example, border is one pixel solid.

00:03:31 And then we can do hash 4B5362.

00:03:34 And now each one has a border.

00:03:38 We can give it some additional padding of maybe 20 pixels.

00:03:42 Let's give it a margin of 10 pixels as well.

00:03:45 A background color.

00:03:47 of hash 31363f.

00:03:51 And notice how if you're using inline styles within JavaScript, you cannot say background dash color.

00:03:56 It's actually using camel case, background color.

00:03:59 Let's also give it a border radius of something like 10 pixels.

00:04:04 And let's also give it a min height of about 100 pixels.

00:04:07 Now, what would happen if we mixed and match both the styles from the external style sheet and internal ones?

00:04:14 Let's add a class name right here, equal to something like a card.

00:04:19 If you now head back over to index.css and define the .card class name, and give it something like a border of 2 pixel solid red.

00:04:29 Oh, again, I'm using string signs here where I don't need to.

00:04:32 You can notice that the color didn't change.

00:04:35 That means that inline styles have the preference over all the other CSS stylings.

00:04:39 So, do remember that.

00:04:41 But it's always better to stick with one way of styling anyway.

00:04:45 And in today's world, Tailwind CSS is the way to go.

00:04:48 It's the preferred way of styling apps of any kind.

00:04:52 So in this tutorial, later on, once we actually start building your movie application, you'll use the most popular and most in-demand way of styling applications

00:05:02 through the latest version of Tailwind CSS, version 4.0, which was released exactly at the date of publishing this video.

00:05:10 So you know that with JSM, you're always getting the latest information.

00:05:14 Now let's quickly fix up our styles by heading over to the Index CSS and removing this margin bottom from the H2.

00:05:21 We don't need it.

00:05:22 And now all of our cards are looking good.

00:05:24 But remember, I already told you that it's always best to use one way of styling.

00:05:28 So in this case, I will remove these inline styles and I'll move them over to our external style sheet.

00:05:35 So let me copy all of this.

00:05:37 and exchange it for a class name of card.

00:05:41 Then we can head over into our index.css and paste all of those styles here, but you'll have to change it to use lowercase letters and dashes in between.

00:05:51 So border radius, background color, and min height.

00:05:56 And at the end, you'll have to add a semicolon.

00:05:59 And of course remove all the string signs.

00:06:01 We don't need that in native CSS.

00:06:04 So let me quickly do that.

00:06:06 And we're good.

00:06:07 Everything still works as before.

00:06:09 And with that, we are ready to dive into.