Skip to main content

Share styles across pages

Share styles across pages

In the previous tutorial, Publish your first page, you put a beautiful Hello World online. Everything — HTML, CSS, animations — sat inside a single index.html file.

That's the right starting point for one page. But the moment you create a second page (an About page, a Contact page, a blog post), you face a problem: should you copy and paste the same <style> block into every file?

The answer is no. This tutorial shows you why, and how to organize your files so that your CSS lives in one place and every page can reuse it.

The problem with inline styles​

Imagine your site already has three pages, each with its own <style> block containing the same design rules:

mysite/
├── index.html      ← 150 lines of HTML + the <style> block
├── about.html      ← 150 lines of HTML + the SAME <style> block
└── contact.html    ← 150 lines of HTML + the SAME <style> block

When you decide to change a color, a font, or the size of a button, you have to:

  1. Open index.html, find the style, update it.
  2. Open about.html, find the style, update it.
  3. Open contact.html, find the style, update it.

Three edits for one change. On a ten-page site, ten edits — and sooner or later you'll forget one, and that page will look broken.

There's a much better way: move the CSS into its own file, and tell every HTML page to load it from there.

Where we're going​

We'll rearrange your site so it looks like this:

mysite/
├── index.html                ← HTML only (no <style> block)
└── assets/
    └── css/
        └── main.css          ← All the CSS, in one place

From now on, every new page you create will load the same main.css — so any visual update happens in exactly one file and propagates everywhere.

Step 1 — Create the folders​

In your Flexweg interface, find the New folder button at the top of the file tree.

  1. Click New folder, type assets, leave the location at the root, save. A new folder assets/ appears in the tree.
  2. Click on the assets/ folder to enter it, then click New folder again and type css. You now have assets/css/ nested inside your site.
Why assets/css/?

Grouping CSS inside an assets/ folder — alongside future folders like assets/js/, assets/img/, assets/fonts/ — is a widespread convention. It separates your content (HTML pages) from the ingredients that support them (styles, scripts, images).

Step 2 — Create the CSS file​

With the assets/css/ folder open, click New file. In the dialog:

  • Filename: main.css
  • Location: assets/css/ (should already be pre-selected since you opened that folder)
  • Content: paste the CSS below
assets/css/main.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    overflow: hidden;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 50px 80px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-align: center;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-10px);
}

h1 {
    font-size: 4rem;
    color: white;
    letter-spacing: 2px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-weight: 300;
}

.blob {
    position: absolute;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    z-index: -1;
    animation: move 20s infinite alternate;
}

@keyframes move {
    from { transform: translate(-100px, -100px); }
    to { transform: translate(100px, 100px); }
}

This is the exact same CSS as in your index.html — we've just moved it out of the <style> tag into a standalone file.

Click Save and publish.

Step 3 — Update your HTML​

Now you need to do two things inside index.html:

  1. Remove the <style> block (the CSS no longer lives there).
  2. Add a <link> tag that tells the browser to load /assets/css/main.css.

In the file tree, hover over index.html and click Edit. Switch to the Code view and replace the whole file with this:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Ultra Sleek</title>
    <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>

    <div class="blob"></div>

    <div class="glass-card">
        <h1>Hello World</h1>
        <p>The future starts here.</p>
    </div>

</body>
</html>

The file is now dramatically shorter. The only change you care about is this line in the <head>:

<link rel="stylesheet" href="/assets/css/main.css">

That single line tells the browser: "before rendering this page, fetch the file at /assets/css/main.css and apply it as styles."

Click Save and publish.

Step 4 — Verify​

Open your site's URL in a new tab (or refresh the existing tab). The page should look identical to what you had before — same gradient, same frosted-glass card, same animations. That's the whole point: splitting the CSS out didn't change the end result for the visitor, only your ability to maintain the site.

If the page looks unstyled

If the page suddenly appears in plain black-on-white with no animation, the browser couldn't find main.css. Common causes:

  • Typo in the path — make sure the <link> points to /assets/css/main.css, exactly matching your folder structure (case-sensitive).
  • File in the wrong folder — confirm main.css is inside assets/css/ in the tree, not at the root.
  • File not saved — open main.css and click Save and publish again.

Why this matters — the reuse​

Here's the payoff. Create a second page — say, an About page — and see how little work it takes to reuse the same design.

Click New file, name it about.html, place it at the root, and paste:

about.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About — Hello World</title>
    <link rel="stylesheet" href="/assets/css/main.css">
</head>
<body>

    <div class="blob"></div>

    <div class="glass-card">
        <h1>About us</h1>
        <p>We build beautiful things on Flexweg.</p>
    </div>

</body>
</html>

Notice the <link> line is exactly the same. Because it's an absolute path (/assets/css/main.css), it works from any page on your site — root, nested folders, anywhere.

Click Save and publish, then open https://yoursite.flexweg.com/about.html. The new page has the same gradient, the same card, the same animation — all inherited from the shared stylesheet.

Want to change the background gradient for the whole site? Edit main.css once — every page picks it up on next refresh.

The pattern applies to JavaScript and images too​

Exactly the same principle works for any other shared asset:

mysite/
├── index.html
├── about.html
└── assets/
    ├── css/
    │   └── main.css
    ├── js/
    │   └── main.js          ← Shared JavaScript
    ├── img/
    │   ├── logo.png         ← Shared images
    │   └── hero.jpg
    └── fonts/
        └── inter.woff2      ← Shared fonts

Each file is loaded with its own HTML tag:

Inside <head> or <body>
<!-- Stylesheet -->
<link rel="stylesheet" href="/assets/css/main.css">

<!-- JavaScript (defer = run after the page parses) -->
<script src="/assets/js/main.js" defer></script>

<!-- Images (inside <body>) -->
<img src="/assets/img/logo.png" alt="My logo">

The rule is always the same: one file in assets/ — many pages referencing it. That's how every real-world website is built.

Recap​

  • Moving the CSS out of <style> and into assets/css/main.css gives every page on your site a single source of truth for its design.
  • Every HTML page declares its stylesheet once, with a single <link> tag pointing to an absolute path.
  • Because the path is absolute (/assets/css/...), it works from any depth of your site — no mental gymnastics with relative paths.
  • The same pattern applies to JavaScript (assets/js/), images (assets/img/), and fonts (assets/fonts/). Share once, reuse everywhere.

You now have the foundation of a real website architecture — the kind used by every modern static site.