Intro to Next.js | Lesson 11: Styling

Transcript

English (Auto-generated)

so we've already done a lot of things in this uh next Js application, we've got the links and we've got the checks and everything but what about putting some colors? I mean really it looks you know like a little odd without having any color. So I'm going back to the code panel, the V. S code and here I'm going to put some colors means I'm gonna do some CSS styling here. So when when we talk about the styling, there is a folder which is uh styles, you can see that that's here. And in this folder we have we got two files by default. One is the global dot CSS. The second one is the home dot module dot CSS we'll be talking about this one later but for now let's just cover the Global's okay. In this whole page we didn't literally we didn't talk about the we didn't we didn't add these global dot CSS severe, we've added this file. I'm going to talk about, I'm gonna tell you but just give me a little minute anyway right here um if I just go to the index dot Js and you can see that there is the introduction text or there is a class which is the my class so I can simply go there and I can, you know do something like I'm going and writing at one and uh I'm not doing this for the my class class for now. I'm just doing this for each one and I'm adding some color color and the color. I can add anything like I'm adding the red for now. Okay. And I'm saving it simply, I'm going back to the browser and I'm gonna have some change here. Okay, that's awesome. It is updated. But again, the question is I didn't have to file the global dot CSS anywhere than how it works. It's working. So in the app dot Js file, the, which bootstraps the whole whole application. The bootstrap is not the the bootstrap framework with style. I mean bootstrap means actually, you know, it's starting any application booting any application or executing any application is called bootstrapping. Okay. There it is. And you can see that the very first and the only import is the the import of these tiles global dot CSS this file the global dot CSS which is in these tiles folder. That's totally understandable what we did. We just simply imported a CSS file right here and then we just bootstrapped it and absolutely because of that, this file became global. This is not about the name, the name is global as I know but no matter whatever the the name name of the file is. But when you just bootstrapped the file here, then ultimately you can see that we got it and uh, you know, we got it in um in the whole whole application, like like in the index dot Js file, the about the Js filer or the blogs, these files or I mean any page anyway, so anything you do here will be applied on the whole document. But what, This is the home dot module dot com. This is something a little different. But let's just talk about it. So here I apply the H1 and absolutely every H1 in the whole document will be affected. But if I, you know, I go there, there is another opinion, as we know that the next year's is opinionated language. So there is another opinion they have and they are applying on us, which is naming convention right here. So what is the name of this module? The name of this module is the home, even though the page name is index dot Js, but the name of the module is the home. So uh the name of this file has to be the same. And then you write home dot module dot CSS. Okay. And then you have to import it. The file in that specific module. For now, we are not importing this file. There are some more rules we're going to talk but for now, so we have to import the file right here. And the way of importing is totally different. So I'm writing import and then I'm going to import the file and I'm going to write these piles import styles from um now styles slash home dot modules dot CSS. I'm importing these tiles from this file. Okay, now, what next in this home file? Actually we we have different classes but these classes for our for the previous designs. so I do not need, I literally do not need any of the class. I'm gonna delete all of them this way. Okay, now there is a there is one rule we're going to apply that we just cannot call the tags.
145 Views 0 Likes 0 Comments

In this cast, we will discuss different possible ways of Styling in NextJs

Comment
Leave a comment (supports markdown format)