‫So at this point, we know
‫that React components can also contain CSS styles.
‫And so let's now learn about some simple ways
‫of applying CSS to React applications.
‫So in React we have many different ways
‫of styling our components
‫and React doesn't really care about how we do that.
‫It doesn't have an opinion about styling.
‫And the reason for that is that just
‫as we learned in the very beginning
‫React is actually more of a library than a framework.
‫So it doesn't have a preferred way of how we should style
‫our components and in the end our applications, therefore
‫we can choose between many different options.
‫For example, we can use inline styling
‫we can use external CSS or even SAS files.
‫We can use CSS modules, styled components, or even Tailwind
‫CSS is an option to style our components.
‫Now in this lecture
‫we will not go into all of these of course
‫but we will talk about many of them later.
‫For now, I just want to use inline CSS
‫and then also later include an external CSS file.
‫So as you might know, in HTML
‫we can actually style elements using this style attribute.
‫So just like this.
‫And then in HTML we write those styles
‫in a string like this.
‫However, in JSX, that's not how it works.
‫So in JSX, we actually need to define inline styles
‫using a JavaScript object.
‫So if we need to write a JavaScript object
‫we first need to enter JavaScript mode.
‫So that's what the curly braces are for.
‫But then we need another set of curly braces.
‫And so that is again, to now create an object.
‫And so here we can now define some properties.
‫So let's say we want to style this text
‫so this H1 text with a red color.
‫And so now as I give it a save, there it is,
‫there it changed.
‫And so with this, you have the easiest way.
‫So the most straight forward way to style components in JSX.
‫So simply using the style attribute that is also
‫available in HTML.
‫Now in HTML, we basically never ever use this
‫and that's because of the separation
‫of concerns that we talked about in the previous lecture.
‫So where we always had the CSS
‫in a separate file and never mixed together with the markup.
‫But here in React, as we just discovered,
‫doing that is completely fine and natural.
‫Let's try another one.
‫So now font size, which in CSS you would write
‫like this, right?
‫So font-size, but in JavaScript
‫that's not a valid property name.
‫And therefore all the CSS property names have
‫been converted basically in JSX to this camel case notation.
‫So you need to write font size like this.
‫Let's say 32 pixels.
‫And so since we're writing an object
‫then also this value always needs to be a string.
‫Now, well that didn't change anything.
‫Maybe that's already the size.
‫Let's see what happens with 48.
‫Yeah, so now it's bigger.
‫And let's try another one. Text transform.
‫And you see that as always vs code already
‫shows you here the available options.
‫So make sure to always write these property values.
‫Then basically here S strings, because again,
‫this is in the end just a JavaScript object
‫and you could even extract this out here.
‫So just cutting this, let's create a variable here.
‫Const style, and it could be any variable name of course.
‫Then let's place that here.
‫And it all still looks the same.
‫Great. So this is the easiest way
‫of adding some styling to individual components.
‫However, when the application gets just a little bit bigger
‫it can get out of hand
‫and can be a lot of work to write our styles like this.
‫So like creating an object
‫for each of these components, it's perfectly doable
‫but you don't see many people doing that in the real world.
‫Now one thing that we can do is to actually
‫include an external CSS files just
‫like we have been doing all the time in our applications.
‫And so that is the easiest way I would say to
‫style React applications, which is basically the same
‫as styling any other webpage.
‫Now in that case we're not really mixing DCSS concern
‫with the JavaScript and HTML concerns
‫in the way that we learned in the last lecture
‫but that's of course not a problem.
‫And also we will learn how to do that a little bit later
‫again, using something called styled components.
‫But for now, let's take a look at the CSS file
‫that we included here in the very beginning of this lecture.
‫And so this is, well
‫a very pretty standard CSS file with some classes here.
‫And so now we need to add these class names
‫to the JSX elements so that these classes then get applied.
‫So let's go back and before we do any of that,
‫so before we add the classes
‫we need to first import this CSS file.
‫So right now our application has no way
‫of knowing that the CSS file exists in the project.
‫So what we need to do here is to simply import that file.
‫And so once again
‫it is actually web pack that will take care
‫of then taking the styles out
‫of the CSS file and injecting them into our application.
‫So index dot CSS.
‫All right.
‫And you see already things changed here.
‫So the background color is different
‫the font family has changed.
‫Yeah, for now, think that's all.
‫And we also get this nice yellow border
‫at the bottom of the page.
‫So you see that immediately web pack
‫included these styles now in our application now, okay,
‫but now let's add the classes.
‫So you see that we have one container
‫we have a header, we have menu, and we probably have footer.
‫Yeah, so just very straightforward.
‫So here, let's add the class of container
‫and let me first do it in the wrong way.
‫So I will just write class as we would do in HTML
‫but then React will actually warn us.
‫So you see here, Invalid DOM property class
‫did you mean class name?
‫And so this is one of the important rules of JSX.
‫So in JSX we cannot use class, but instead class name.
‫Okay?
‫So this is a common beginner mistake, but now
‫you have been warned it still does work here somehow
‫but we are really not supposed to use class in JSX.
‫Now that's probably because class is already
‫a reserved keywords in JavaScript.
‫Okay, but let's keep going here.
‫So again, let's add last name here of header.
‫Alright? And now this didn't really change a lot
‫and that's because we still have this style here applied.
‫So we probably don't want that.
‫And so just to keep this here
‫I will duplicate this one, comment it out
‫and then I will just make this an empty object.
‫Well, and that didn't really change a lot
‫and I know why that is.
‫It is because here we are actually supposed to
‫have a header element first.
‫Alright? And so that class should go there.
‫So this is a little bit just of semantic HTML right here
‫or let's say a semantic markup where the header
‫element is a bit better suited here
‫than simply having the H-1.
‫And here we have some problem.
‫Let's maybe change something here very quickly.
‫So here we have this 12 rim of width.
‫Let's change that to four.
‫So that's a bit better, even though it's not perfect yet
‫because of course this page is very narrow, but nevermind,
‫we will fix that in a moment.
‫Next up here, let's add the class of menu.
‫And again, that's class name.
‫And then just a simple string.
‫So menu.
‫And here, since we were talking about semantic markup
‫let's actually use the main tag, so the main HTML element
‫and then of course we need to close it correctly as well.
‫Ah, beautiful.
‫So you see that.
‫Now we get this nice styling here on the menu.
‫Okay, next up we have this class name here
‫which will just be footer.
‫All right, so let's see what we get here
‫we have this weird styling applied to these titles
‫which is not supposed to be happening.
‫And so let's just make them H3 not H2.
‫Yep. And so here we have the footer.
‫Nice. So with this, we actually have some styling applied
‫to our application right now.
‫And as I mentioned, we are getting these styles now
‫from this external CSS style sheet, which remember we
‫simply imported here using this import syntax
‫which will make web pack import the styles
‫into our application.
‫Then here, remember that we used class name and not class
‫because class is a reserved keyword in JavaScript already.
‫And by the way, there are a few more JSX rules like this
‫which we will talk about a little bit later in this section.
‫For now, just notice that the styles that we included here
‫are global styles, so they're not scoped
‫to each particular component, and that's very easy to show.
‫For example, we could add the header class also here.
‫And while that looks kind of the same
‫let's try something else.
‫Let's add maybe the footer class also to the header.
‫Yeah. And again, it doesn't change a lot, but if
‫we inspect the element here, yeah, so right here, then
‫of course both of these classes here.
‫So all of these styles will be applied to this same element
‫and in the end to the same component.
‫And so again, each component does not really contain
‫its own styles but simply uses the global styles
‫that are in index.CSS.
‫And this works fine for small apps,
‫but we will also use something called styled components
‫later in another project.
‫And so then we will have CSS that really only belongs
‫to one single component.