Next JS comes with built-in support for global CSS. A common use case is for web projects to use this feature to set up a CSS baseline throughout the project. Within the base next JS project, you can see that we are importing Globals CSS from our main layout component and currently we have this file completely emptied out so that there is no CSS customization happening at this point. Now consider a simple page that has a bunch of content on it and essentially because the different content sections are separated by 100 View Heights, they are going to cause a scroll bar to appear.

And this demonstrates a common problem of the default CSS for modern browsers. Even though the scroll bar is present, it is not currently being shown and without the text scroll down, the user would have no indication that they would need to scroll in order to see further content. Of course, as we scroll through the content, the scroll bar does appear and this is the default behavior on a Mac. And additional motivation for customizing the scroll bar is to give the user a clear indication of where they are even when they are not scrolling. So let's use our global CSS to make this customization. We can set the width of the scroll bar

using web kit scroll bar. We can set the color of the track with web kit, scroll bar track. We can set the color of the handle using web kit, scroll bar thumb, and the color of the handle when the mouse hovers over on top of it using web kit scroll bar, thumb hover. And now within our user interface, when there is a scroll bar present, it is quite clearly visible. And as the user scrolls through the different sections, even when this stop scrolling, there is a clear indication of content present on top as well as at the bottom. As you would imagine putting all your global CSS in a single

file can become messy. Fortunately, the CSS technology built into next year is CS s modules and this allows you to split your CSS into separate files. So instead of having all of this styling within a global load css, we can create a new file anywhere within our folder structure. For example, it is common to use SLC slash styles for your global CS s and here we are going to create a new file called Scroll bar css and we paste in the same content that we previously had within the global CSS file. Now all that is left to do in order

to have the CSS being activated is to import it from our global CS s file. For this we use an add import rule and provide a relative path to the CSS that we want to import. And as far as behavior is concerned, this is exactly the same as if we had written that C CS s within the global CSS file. And as you can see, the scroll bar is still being stalled. It's common for web projects to use one of the popular CSS baselines available on NPM. You can use the import feature to import styles from note packages as well. Here is a simple example

to demonstrate a reason why you need to have a CS three reset within your project. We have two divs being rendered within this page and both of them have the width 500 as a part of their style, but additionally, the second div also has a border and a padding applied. Now with the width 500, you would imagine that both of these divs should still be 500 within the visual layout. However, you will find that the one with the padding and the border is going to take more space than the one without these properties. And this makes making reliable layouts bit difficult

because when you say something is 500, it might take up more space depending upon its padding and border. Fortunately, this is easily fixed by setting the default value for the CSS property box sizing to be border box, and that way padding as well as borders become a part of the calculated width. Now, of course, you could fix this particular thing with its own reset, but there is actually a package that does this and more good things to normalize a bunch of things across the different browsers. And that package is modern normalize and you can install it from NPM just like you install

other NPM packages. Now with this installed, in order to make it a part of our global CSS, all that we need is an add import rule followed by the package name, which is modern dash normalized, followed by the CSS file that we want to import, which is modern dash normalized css. And with this CSS reset imported. Now within all the browsers, if we say something is going to be 500 pixels, it is going to be 500 pixels, irrespective of other factors like whether it has a border or a padding. A feature worth pointing out with the app route is

that you can actually import global CSS from any component that you want. This allows you to conveniently bring in components that you might already have, which work on top of global CSS. For example, on our homepage, we are trying to render a legacy red blue component, and this component consists of two simple js. One is red and one is blue, and they expect to be styled using global CSS classes, red and blue. Fortunately we have the Cs s file that we've also brought in that has these Cs S class names defined. Now, of course, we could link the CSS file from our global

css, but fortunately with the app route we can even import it directly into our component. So we use the standard import syntax for TypeScript and JavaScript and provide a relative path through the CSS file that exists right next to this component file. And now whenever this component is imported, its global CSS will also be imported and we can see the red and the blue divs components importing their own global CSS is great for existing code migration and gives us nice colocation of a component and it's CSS, but make no mistake, it is still global CSS. It is not isolated

and should not be your go-to approach for new components. To demonstrate that we have two simple pages over here in the new page. We have two deals each with a class applied to it, so a class red and a class blue, and you can see that they are not being colored as red and blue right now. If there is a global CSS loaded that contains these classes, Then these divs would get colored. If you go to the old page that does have a component that relies on global CSS, of course, that global CSS gets loaded. But now if you visit the new page, that CSS is not unloaded,

it stays in the dorm and therefore starts coloring these new divs. So you should treat global CSS with the respect of global CSS, even if you split it into different files for component level CSS. Instead of globals, you should prefer CSS modules, which we will cover in the next lesson.