Global CSS in NextJS - Step-by-Step Execution

Concept Flow - Global CSS

Create global CSS file

↓

Import global CSS in _app.js

↓

Next.js applies styles globally

↓

All pages/components share styles

↓

Styles cascade and override as usual

Global CSS files are created and imported once in the main app file, then Next.js applies these styles across all pages and components.

Execution Sample

NextJS

/* styles/globals.css */
body { margin: 0; font-family: Arial; }

// pages/_app.js
import '../styles/globals.css'

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

This code imports a global CSS file in the main app component so styles apply to the whole Next.js app.

Execution Table

Step	Action	File	Effect	Result
1	Create global CSS file with styles	styles/globals.css	Defines body margin and font	CSS file ready
2	Import global CSS in _app.js	pages/_app.js	Next.js loads CSS globally	Styles available app-wide
3	Render App component	pages/_app.js	Apply global styles to body	All pages use Arial font, no margin
4	Navigate to any page	any page	Global styles persist	Consistent look across pages
5	Override styles in component CSS	component CSS	Overrides global styles locally	Local styles take precedence
6	Exit	N/A	No more steps	Global CSS applied successfully

💡 All steps complete; global CSS loaded and applied across the app

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
globalCSS	undefined	imported	applied	applied globally
bodyStyle	default browser	overridden by global CSS	applied on render	Arial font, margin 0

Key Moments - 2 Insights

Why do we import the global CSS only in _app.js?

Because _app.js wraps all pages, importing global CSS here ensures styles apply everywhere once, as shown in execution_table step 2.

What happens if a component has its own CSS that conflicts with global CSS?

Component CSS overrides global CSS locally due to CSS cascade rules, as seen in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the global CSS first applied to the app?

A Step 3

B Step 2

C Step 4

D Step 1

💡 Hint

Check the 'Effect' column for when styles are applied on render.

According to variable_tracker, what is the state of bodyStyle after step 3?

A default browser style

B overridden by global CSS

C applied on render

D undefined

💡 Hint

Look at the 'After Step 3' column for bodyStyle.

If you remove the import from _app.js, what would happen to the global CSS?

A It would still apply globally

B It would not apply anywhere

C It would apply only to _app.js

D It would apply only to pages but not components

💡 Hint

Refer to key_moments about why import in _app.js is necessary.

Concept Snapshot

Global CSS in Next.js:
- Create a CSS file (e.g., styles/globals.css)
- Import it once in pages/_app.js
- Styles apply globally to all pages/components
- Local component CSS can override global styles
- Ensures consistent styling across the app

Full Transcript

Global CSS in Next.js means creating a CSS file with styles you want everywhere. You import this file once in the special _app.js file. This file wraps all pages, so importing here makes the styles global. When the app renders, these styles apply to the whole app, like setting the font or margin on the body. If a component has its own CSS, it can override these global styles locally. This way, you keep a consistent look but still customize parts. Without importing the global CSS in _app.js, the styles won't apply anywhere.