00:00 All right in this exercise we're going to get to styling. I should have sunglasses right now, but yeah, Cody is my style But yeah, we're going to talk about the two primary ways that you style an application You can either use inline styles or an external CSS sheet and a style sheet so cascading style sheets

00:20 And typically you target elements by their class name So Though you can target it by attribute or and and tag name as well And that's a perfectly reasonable thing to do, but we're going to be focusing on class names so we're in the HTML we've got class as my class and

00:39 In JavaScript you actually get class name and so again talking about properties versus attributes They are different and so here when we're doing TypeScript or TSX and our Yeah, TypeScript JavaScript JSX stuff You're going to use the property name not the attribute name so class name

01:00 and then if we're talking about Styles inline styles, which you don't typically use a lot, but yeah, you definitely there situations where they make a lot of sense In HTML you're going to do this big long string of just CSS It's relatively limited on what you can do with it, but that's how it's done But in JavaScript

01:22 You use this it's a CSS style object or something like that, so It's this style property on the element, and then you have camel case versions of all of the kebab cased CSS properties and so you do the same thing in

01:42 JSX and we have style and then we pass this object that has the camel case version of all the properties One other neat thing is that you get the pixel attribute or Unit added automatically, so if you just provide a number for a unit that it should be pixels

02:02 Or it can be REMS or whatever, but if you just provide a number then the PX will be added for you automatically And then one thing that I know it tripped me up when I was still learning React was this double curly brace like what the heck is this? It's actually nothing special you could do the same thing with

02:21 Defining an object here, and then providing you're passing that as an interpolated value So this is just like remember we're talking about JSX land and then we get into this interpolation and so now we're in JavaScript land and the expression is an Object and so these two things are

02:39 Functionally equivalent don't get thrown off by the double curly brace. That's just Interpolation object that's all that is So talking about class names With with inline styles the styles are just with the element that you're rendering But with class names and attributes and tag names and stuff they also require a style sheet to be added

02:59 To the page and so we've got our href here And we have my class is defined in here so we can target that element in this external style sheet One other way that you can do this is with an inline style Tag in your HTML. We don't do that a whole lot, but definitely something you can do

03:21 And so then you could move your CSS inline here And you no longer need to have this so you could just stick those side-by-side and that would work just fine well, this is TSX so Yeah, a little bit different there, but yeah again. You pretty much don't do that very often at all so

03:40 We're not going to worry about that at all. I'm going to stop editing stuff So that should be enough to get you going for this exercise I think that you're going to enjoy making things look nice the other cool thing that we're going to get out of this exercise is Handling composition of these styles and things together

03:58 This is why inline styles were kind of popular for a while early on because they compose so nicely together But yeah, we can compose things nicer with tailwind these days and stuff like that So we're not going to get into the tailwind stuff, but we'll talk about composing CSS class names and the inline style property and

04:20 When we're all finished we'll have a pretty nice generic box component that has a nice API To make it easy for people to make cool boxes like this, so I think you'll enjoy this one. Have a good time