In this lesson, we will get up to speed with the fundamentals of styling components in React, including using plain CSS, JavaScript style objects and even CSS modules. So let's go to demonstrate the styling of simple elements using React, we will be using two simple data containing two simple pieces of text. Now, the simplest way to style components is to use what you already know and love, which is simple CSS. So for this app ts six component, we will create a corresponding CSS file called App Cs S, and within that we will create two simple CSS classes, one for the color red and one for the color blue.

Now, in order to use these classes within our component, we need to import the CSS file, which we can do with a simple import statement pointing to app css. Note that this is actually a global import of the CSS, which means that the class name red and blue are now actually available globally anywhere within our application, which of course means that we can point our first div to the class name of red and use the class name prop on the second div to point it to the CSS class Blue. With these simple changes in place, you can see that we are styling our two divs using simple CSS.

Our question that you might have at this point is currently do these simple styles with just JavaScript, and the answer is yes. So we can create a simple style object called red, which will contain the color value pointing to a valid CSS color string, for example, the string red. And we can repeat the process with another style object for the color blue. Now, in order to use these style objects, instead of wiring them to the class name prop, we buy them to the style prop. And this essentially sets the style attribute on the native HTML development that React will eventually render. And you can see that with these two style objects wired,

we get the desired red and the blue devs. Even though there are advantages to style objects, they do come with limitations in that you cannot use at Marc css. Features like media queries and pseudo selectors. Let's take a look at an example of something that we can only do within HTML using class names and not with the style attribute. We have our twos why to the class names red and blue, and we will define these classes within our CSS file. In addition to defining the colors for the red and the blue classes, we will add a CSS transition prop, which will transition all the properties over a duration

of 0.2 seconds. So if we use a feature of CSS called pseudo classes to change the color of the red and the blue classes, when someone hover over these elements, they will transition over a duration of 0.2 seconds. And doing this in the CSS means that it is handled very efficiently by the browsers, by offloading to the GPU, which is more efficient than manually handling JavaScript events. Wouldn't it be great if you could get the benefit of the strong link between the style and the reference to when it's used, along with advanced features offered by CSS?

Now, two solutions exist for this particular problem, one being CSS and Js, and the other being CSS Modules. Your syntax for CSS and JS will depend upon the chosen library for that purpose, whereas CS s modules are fairly universally available and are built into modern project React templates, including the one that we just started with. To convert from simple CSS to CSS modules, we need to add dot module to the file extension. Now with this file renamed, we can jump into our app TSX and instead of importing globally app css, we will import

specifically the styles from app module css. This means that these styles don't just magically apply all over our code base and we have to specifically specify when we want to use it by using them from this imported styles object. And now once we have the class names applied to Styles Red and Styles Blue, you can see that we get the same behavior that we were getting previously and we even get to use the advanced CSS features like pseudo hbar classes. Now, the way that this is working underneath is that instead

of creating just those global classes, red and blue CSS modules is generating CSS classes, which are hashed in order to avoid conflicting with other general terms like red and blue used somewhere else within the code base. Another fact worth pointing out is that we can combine the class name and the style prop on the same component. For example, we can also add the style attribute and point it to a JavaScript object that contains font weight with the value bold. And now for this di, the color is coming from the class name and the font weight is coming from the style prop.

And of course, we can do something similar for the second diviv wearing its style prop and setting its font weight to be italic. Now these props have the same behavior that they would have with standard HTML. The class name prop is setting the class name and the style prop is setting the style attribute and they might conflict and decide which one is a winner based on standard CSS rules. As always, thank you for joining me and I'll see you in the next one.