organizing your files ♡ tutorials

the folder structure

neocities gives you a blank dashboard, and it's tempting to just dump every file straight into the root. don't! group things by type instead, it makes the dashboard readable at a glance and makes your html much easier to follow later. here's the structure i use on my own sites:

/
├── index.html
├── /styles
│   ├── main.css
│   ├── layout.css
│   └── animations.css
├── /scripts
│   └── main.js
├── /media
│   ├── /graphics
│   └── /backgrounds
└── /pages
    └── about.html

/styles: every css file goes here, no exceptions. this is the folder this whole tutorial is really about
/scripts: any javascript files, same idea as styles, one folder for all of them
/media: images, gifs, icons, backgrounds. splitting this further into /media/graphics and /media/backgrounds is optional, but worth doing once you have more than a handful of images
/pages: extra html pages beyond your homepage, like an about page or a guestbook

why bother? a folder per file type means you always know where to look. six months from now, when you've forgotten which of your 40 files does what, "it's css, so it's in /styles" is a lot faster than scrolling through one giant unsorted list.

linking multiple files to your page

once your files live in folders, you link them from your html using a path that matches where they actually are. for css, that's a <link> tag in your <head>:

<link rel="stylesheet" href="/styles/main.css">
<link rel="stylesheet" href="/styles/layout.css">
<link rel="stylesheet" href="/styles/animations.css">

the leading / means "start from the root of the site", so this works the same no matter which page it's sitting in. if you leave the / off, the path is read relative to the current page instead, which is a common source of broken styles once you have pages living inside /pages instead of the root.

order matters

css rules are read top to bottom, and when two rules target the exact same element with the same specificity, whichever one is read last wins. this means the order you list your <link> tags in actually changes how your page looks:

put broad, foundational styles first, things like resets, base fonts, and colors that apply site-wide
put layout rules next, the css that arranges your boxes and sections into position
put specific overrides and small tweaks last, so they're the final word and actually take effect instead of getting overwritten by something more general listed after them

example: if main.css sets p { color: black; } and a later file sets p { color: pink; }, your text ends up pink, because the second rule was read last. swap the link order and you'd get black text instead, same two rules, opposite result. this is also why a rule can silently "not work" the first time you write it, it's not broken, it's just being overridden by something further down the list.

the same top-to-bottom rule applies to <script> tags for javascript too: if one script depends on a function or variable from another, the file that defines it needs to be linked before the file that uses it.

so, can you combine your css into one file?

technically, yes. you can paste the entire contents of every css file into one and link just that single file instead. but here's why i wouldn't recommend it, especially as your site grows:

it gets hard to find anything. one file holding your resets, your layout, your button styles, your animations, and your color palette all mixed together means you're constantly scrolling and searching just to find the one rule you meant to tweak
it gets slow to even open. once a single css file gets long enough, text editors and the neocities online editor both take noticeably longer to load it and to respond as you type, so something that should take ten seconds to fix turns into a slow, laggy chore
one typo can break everything at once. a missing bracket in a huge combined file is much harder to track down than the same typo in a small, focused file where you already know roughly where to look

the actual goal isn't fewer files on your dashboard, it's fewer files cluttering the root. that's what the /styles folder from earlier already solves! you can have ten css files and a tidy dashboard at the same time, they just need to be tucked into their own folder instead of sitting loose next to your html.

splitting css by purpose instead

rather than one combined file, split your css into a few files, each with a clear, single job. a common breakdown looks something like this:

main.css: resets, base typography, colors, anything that applies broadly across the whole site
layout.css: the structural stuff, your grid, your boxes, your nav, anything about positioning and spacing
animations.css: keyframes and transitions, kept separate so they're easy to find (and easy to remove entirely, if you ever want to add a prefers-reduced-motion override without digging through unrelated rules)

you don't have to use this exact split, name your files whatever makes sense for how you actually think about your own site. the point is that each file answers to one clear question ("what does this file handle?"), rather than "everything, somewhere in here".

organizing within a single css file

even inside one properly-scoped file, things can still turn into a wall of rules with no clear structure. css comments fix this, and they're written a little differently from html comments:

/* this is a css comment */

use comments as section dividers, so scrolling through the file feels like flipping through labeled tabs instead of hunting blindly:

/* ==========================================================
   colors & variables
   ========================================================== */

:root {
  --pink: #f7d6e0;
  --text-dark: #4a3b3f;
}

/* ==========================================================
   navigation
   ========================================================== */

.site-nav {
  display: flex;
  gap: 12px;
}

/* ==========================================================
   buttons
   ========================================================== */

.btn {
  border-radius: 6px;
  padding: 6px 12px;
}

tip: most text editors let you jump straight to a comment by searching for it, so a distinctive divider like ===== or a section name in all caps makes it fast to search your way to the right spot, even in a file that's a few hundred lines long.

result

a clean dashboard isn't about squeezing everything into as few files as possible, it comes from putting files into folders that match what they are, and linking them in an order that respects how css and javascript actually read top to bottom. inside each file, comments keep sections easy to find, so nothing needs to be crammed into one giant block just to look tidy from the outside.