CSS Reset and Organizing CSS

Let me ask you something.

Have you ever started a new project, written your first few lines of CSS, and noticed things look slightly different than you expected? A gap you did not add. A font size that seems off. A margin that appeared from nowhere.

That is the browser doing things you did not ask for. And as your projects grow bigger you will also start facing a different problem — a CSS file that started at 50 lines is now 500 lines and finding anything feels like searching through a jungle.

Both of these problems have simple solutions. CSS Reset handles the browser. Good organization handles the file. Let us go through both.

Why Browsers Add Styles You Did Not Write

Every browser — Chrome, Firefox, Safari, Edge — comes with its own built-in stylesheet called the user agent stylesheet. It adds default styles to HTML elements so they look reasonable even without any CSS.

That is why an h1 is big and bold without you doing anything. Why paragraphs have space between them. Why links are blue and underlined. Why the body has a small margin around it.

These defaults are helpful for plain HTML documents but they cause problems when you are building a designed website. Different browsers apply slightly different defaults which means your page can look slightly different in Chrome versus Firefox versus Safari without you changing a single line.

A CSS Reset solves this by stripping all those defaults away and giving you a clean consistent starting point across every browser.

The Simple Reset

You have already been using a basic reset throughout this course.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This removes the default margins and paddings from every element and sets box-sizing to border-box so sizing is predictable. It is the minimum reset that every project should have.

But there are a few more things worth adding for a more complete starting point.

This is a solid modern reset. Let us go through what each part does.

• *::before and *::after — extends the reset to pseudo-elements too. Without this, ::before and ::after elements could still have unexpected margins or padding.
• line-height: 1.5 on body — sets a comfortable default line height for all text. The browser default is around 1.2 which is too tight for readable body text.
• -webkit-font-smoothing: antialiased — makes text render more crisply on Mac and iOS. You will not notice it on Windows but on Mac the difference is clear.
• max-width: 100% on img — prevents images from ever overflowing their container. Without this an image wider than its parent will break out of it. This one line prevents a very common layout problem.
• display: block on img — images are inline by default which causes a small gap at the bottom because of how inline elements sit on the text baseline. Making them block removes that gap. This is especially noticeable inside card components.
• cursor: pointer on button — browsers do not always show the pointer cursor on buttons. This makes sure every button feels clickable.
• font-family: inherit on button — browsers use their own system font for buttons by default, ignoring whatever font you set on the body. inherit makes buttons use whatever font the parent is using.
• text-decoration: none and color: inherit on a — removes the default blue underline from links and makes them inherit their color from the parent instead of always being blue. You can still add underlines or colors back where you want them.

Organizing Your CSS File

Now let us talk about keeping your CSS file organized as it grows.

When a project is small — 50 or 100 lines — organization does not matter much. Everything fits on one screen. But once you are at 300 or 500 lines finding things becomes genuinely difficult without a clear structure.

Here is the organization pattern that most professional developers use. It keeps everything in a logical order that anyone can navigate quickly.

/* ================================
   1. DESIGN SYSTEM — Variables
   ================================ */

/* ================================
   2. RESET — Base defaults
   ================================ */

/* ================================
   3. BASE — Body, typography
   ================================ */

/* ================================
   4. LAYOUT — Page structure
   ================================ */

/* ================================
   5. COMPONENTS — Reusable pieces
   ================================ */

/* ================================
   6. UTILITIES — Helper classes
   ================================ */

/* ================================
   7. MEDIA QUERIES — Responsive
   ================================ */

Let us go through what belongs in each section.

• Design System — all your CSS variables. Colors, fonts, spacing, shadows, transitions. Everything goes here first because everything else references it.
• Reset — the universal reset and any base normalization. This always comes second because it establishes the foundation everything else builds on.
• Base — styles for raw HTML elements. body, h1 through h6, p, a, img. These are global styles that apply everywhere without any class.
• Layout — the overall page structure. The navbar, the hero, the main content area, the footer. The big structural sections.
• Components — reusable pieces. Buttons, cards, badges, forms, inputs. Things that appear multiple times in different places.
• Utilities — small single-purpose helper classes. Things like .text-center, .hidden, .mt-sm. Optional but useful on larger projects.
• Media Queries — all responsive styles at the bottom. Keeping them together at the end means you can find all your responsive overrides in one place.

Commenting Your CSS

Comments are the simplest thing you can do to make your CSS easier to navigate. A clear section header tells you exactly what is below it without reading a single line of code.

/* ================================
   NAVBAR
   ================================ */
.navbar { ... }
.navbar #logo { ... }
.navbar .signin { ... }

/* ================================
   HERO
   ================================ */
.hero { ... }
.hero h1 { ... }
.hero form { ... }

Those big section dividers make it immediately obvious where one section ends and the next begins. When you need to find the navbar styles you scan for the divider not through hundreds of lines of code.

For smaller notes inside sections use inline comments.

.movie-card {
  position: relative; /* needed for badge positioning */
  overflow: hidden;   /* clips image to rounded corners */
  flex-shrink: 0;     /* prevents cards from squishing in flex row */
}

These explain why you made a decision, not just what the code does. Three months from now when you come back to this file you will thank yourself.

The Final Netflix Clone CSS Structure

Here is how our Netflix clone CSS file should be structured using everything we have learned.

Here is what the organized structure gives you.

• The design system at the top — every value in one place. Change --color-brand and the entire page updates.
• The reset right after — clean consistent foundation before any styles are applied.
• Clear section headers — you can find anything in seconds. Need the movie card styles? Scan for the movie card header.
• Components grouped together — buttons, inputs, cards, notifications all have their own clearly labeled sections.
• Media queries at the very bottom — all responsive overrides in one place. No hunting through the file for where things change on mobile.

This is genuinely what professional CSS files look like. Not because the rules are arbitrary but because this structure makes the file easy to navigate, easy to update, and easy for another developer to understand.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
  <link rel="stylesheet" href="style.css">
</head>

npm install normalize.css