3.5 Adding Style to Components
In this lesson, I'll show you how to add style to your app. It's... disappointingly normal.
1.Introduction2 lessons, 06:11
2.Getting Started2 lessons, 14:39
3.Building the Hangman Game5 lessons, 39:23
4.Working With Data4 lessons, 32:39
5.Conclusion1 lesson, 00:56
3.5 Adding Style to Components
In this lesson, we are going to look at adding CSS to our application and it's actually very simple, it's easy. There's nothing really special except for one little thing that we will talk about in a few moments. But for right now, it's just CSS. All we need to do is create a new file. And I'm gonna call it app.css, you can call it whatever you want, because the name of the file doesn't matter. So I picked app.css, because for me, it makes sense to call it that. This is going to contain the CSS for the application. So it makes sense that it's named app.css. There is no magic linkage between app.js and app.css. In fact, we have to go into app.js and manually import the css. Now, really, it doesn't matter where we import the CSS, because it's global. So if we wanted to for whatever reason, we could import the css inside of the button component and everything would be fine. It might not be the best approach, but all of the CSS that we define inside of app.css is going to be accessible throughout the entire application, no matter where we import it. So it's important to know that it's not scoped, it's just available. So the first thing I want to do is create a class called app-container. This is going to go on the main div inside of the app components. Now, we could do something with styling the div with an id of root but, I want to leave that alone. Because when it comes to the publication folder, I just don't like to mess with any of that. So instead, we are going to add a class to this div element right here inside of app that is the containing div element for our entire application. And all I'm going to do is set the width to 400 pixels. Now this is just an arbitrary number, there's no magic behind picking 400 pixels here, it's just what I want the width of the game to be. So, that's what we're gonna go with. And now that we have this app-container, we can use that instead of our app component. So let's do that. So inside of our div tag, we're going to add class. We will add the app-container close to that. And it's gonna be a little difficult to see, although let's do a hard refresh here so that it loads everything. And we can see that there is some difference here. Because if you remember, the buttons were all in one line, and it flowed with the size of the available space. So now, we are just hard limited at 400 pixels. But also notice that over here, we have a warning, invalid DOM property class. Did you mean classname? So yes, even though we used the HTML class attribute and it appears to work just fine, that's not how we assign classes to our react components. Now, the question then becomes do we have to use classes? And the answer is no, you can use individual CSS properties if you want to. However, the best practice, and this isn't just a React thing, this is just a web development thing. The best practice is to use CSS classes. Because whenever you manipulate the style of an element and you do so using classes, that's the most efficient way for the browser to redraw the screen. So when it comes down to it, we typically just work with classes and that's it. There might be a few special cases here and there, where we want to define the actual style, but for the most part, it's classes. So then instead of using the class attributes, instead of our components, what we would then use is just className. And that's the main thing that we need to talk about. Whenever we assign a CSS class to a component, we do so using the className attribute. Or using React terminology, it is a prop that's just being passed on all the way down to the actual class attribute on the HTML element in the browser. So that's great. We specify a class name. We specify the classes, and we are good to go. So let's go ahead and define some other classes. The first one I want to add in is called letter. This is for the letters that are going to be on the game board. And we will have essentially a box around each letter and we will give that box a border that is one pixel. It's gonna be solid and you can pick whatever color I'm going to pick gray. The font size, let's set to 24 pixels, the font weight, we want to set to bold because we want this to be rather prominent and bold. We'll do that let's set the line height to 34 pixels. And in fact, we will do the same thing for the height and the width. So the line heights, the height and the width will all be 34 pixels. And then we will align the text to center. So we want to use this letter class inside of the letter component. So that's our span element here. We'll simply have the CSS class using className as letter. So if we take a look at the browser, ooh, that just looks horrible. But that's okay because what we are going to do is inside of the letter grid, we are going to have a class called flex. So let's go ahead and add that. This is just going to be a utility class that will simply set display flex on whatever element that we specify there. So let's just quickly add that in and then whenever we view this once again, in the browser, there we go, we have our boxes and we have T picked out so everything is looking good there. Let's apply the same thing to our button grid. So let's open up that file, we will add the className prop here, and we will set flex, but we also want the buttons to wrap. So add another utility class, and we will call that flex-wrap, and then we will simply just set the flex-wrap property to wrap. And let's go ahead and apply that to the button grid. That should make it so that the buttons do wrap. But whenever we add style for those, then they will be on multiple rows. Well, they are on multiple rows, but they'll be on more than two rows. And for the most part, we can have the same CSS for the letter, except with a few modifications. So let's change the class to button. And we don't really need the border because that's kinda built in as far as the font size, the font weight, the line heights, height width. Let's do set some margin here. So we'll set some right margin, and then we will set some bottom margin just so that there's some space between the buttons. And if we go back to the button component, which we can go and add there, we will simply set className = button. And that should give us, that's okay. Now I do want some space in between the letter grid and the button grid, and we can simply add a margin there. So let's go back to our CSS and let's add just a utility class, we can call it mt5, let's do mt10. The idea being that we're going to add some top margin for 10 pixels, and so we will then apply this class to the button grid as well. So that we will add that top margin and that looks a whole lot better. And so that's all the style that we are you're going to add right now. The warning is still there, let's refresh. Okay, that was just leftover. The reason being because there is some more style that we want to add, but it is going to require us to add some functionality. And we're going to start doing that in the next lesson by adding state to some of our components.