CSS

Learn how to use CSS to design pages in Essepage.

You can write a <style> element directly in a page file or separate your CSS into another file and reuse it across multiple pages. You can also use external CSS libraries such as Tailwind CSS.

Writing CSS in a Page File

CSS used only by a particular page can be written in a <style> element inside its +page.essepage file.

<main>
    <h1>About Us</h1>

    <p>
        We create simple tools that help people
        build and publish websites.
    </p>
</main>

<style>
    main {
        max-width: 640px;
        margin: 80px auto;
        padding: 20px;
        font-family: system-ui;
    }

    h1 {
        color: royalblue;
    }

    p {
        line-height: 1.7;
    }
</style>

A <style> element written inside a page file is automatically placed in the document’s <head> when the page is assembled.

You do not need to move it into <head> yourself. Writing CSS below the HTML also makes it easier to distinguish the page content from its design.

Previewing CSS in Real Time

Start the id of a <style> element with an underscore (_) to preview CSS changes in real time.

<style id="_css">
    h1 {
        color: royalblue;
        font-size: 48px;
    }
</style>

When you change a color or size, the preview updates without requiring you to save the file.

You must still save the file when you finish editing. If you close the page or move to another file without saving, you may lose your changes.

Separating CSS into Another File

If your CSS becomes long or is used by multiple pages, you can move it into a separate file.

For example, create a CSS file in a /styles folder.

/
├── public
│   ├── +page.essepage
│   └── about
│       └── +page.essepage
└── styles
    └── site.css

This CSS file is source code included in pages rather than a public file requested directly by the browser, so it can be stored outside /public.

Write the CSS in /styles/site.css.

body {
    margin: 0;
    font-family: system-ui;
}

h1 {
    color: royalblue;
}

p {
    line-height: 1.7;
}

Include the CSS file in a page file.

<h1>About Us</h1>

<p>Learn more about our website.</p>

<style>
    {{+ css : /styles/site.css +}}
</style>

The contents of the included CSS file are inserted into the <style> element and applied to the page.

If you are unsure of the exact path, right-click the CSS file in the file explorer and select Copy Path. Pasting the copied path helps prevent typing errors.

See Including Files to learn about other ways to include files.

Linking an External Stylesheet

You can use a <link> element to load CSS provided through a CDN or another external service.

<head>
    <link
        rel="stylesheet"
        href="https://example.com/styles/library.css"
    >
</head>

Because an external stylesheet is provided by another service, the page may no longer display correctly if that service becomes unavailable or changes the file URL.

Check the terms of use and license of the service before using it.

Using Tailwind CSS

Tailwind CSS is a CSS tool that lets you design HTML by combining predefined classes.

In Essepage, you can load the Tailwind CSS Play CDN and use it without installing anything or running a build process.

<head>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<main class="mx-auto max-w-2xl px-5 py-20">
    <h1 class="text-5xl font-bold text-blue-600">
        About Us
    </h1>

    <p class="mt-6 leading-7 text-gray-600">
        We create simple tools that help people
        build and publish websites.
    </p>

    <a
        href="/contact"
        class="mt-8 inline-block rounded-full bg-blue-600 px-6 py-3 text-white"
    >
        Contact Us
    </a>
</main>

You can apply spacing, colors, font sizes, and layout by combining classes without writing a separate CSS file.

See the official Tailwind CSS documentation for available classes and detailed usage instructions.

The Tailwind CSS documentation describes the Play CDN as a tool for development and testing. If you need to work without a build process and runtime size and performance are important, you may also want to consider UnoCSS.

Using UnoCSS

UnoCSS also lets you design pages by combining classes.

UnoCSS provides a CDN Runtime that runs in the browser. It requires no installation or build process and generates the required CSS while the page is running.

<head>
    <script src="https://fastly.jsdelivr.net/npm/@unocss/runtime"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css">
</head>

<main class="mx-auto max-w-2xl px-5 py-20">
    <h1 class="text-5xl font-bold text-blue-600">
        About Us
    </h1>

    <p class="mt-6 leading-7 text-gray-600">
        We create simple tools that help people
        build and publish websites.
    </p>
</main>

UnoCSS Runtime provides a relatively lightweight way to run utility classes in the browser. It can be considered as an alternative to the Tailwind CSS Play CDN when you want to use utility classes without a build environment.

The default UnoCSS configuration and supported classes are not identical to Tailwind CSS. When moving existing Tailwind CSS code to UnoCSS, check whether UnoCSS supports the classes you use.

See the official UnoCSS Runtime documentation for details.

Applying Changes to the Published Site

After modifying CSS inside a page file, follow these steps:

Save the page file.
Check the design in the preview.
Select Apply Changes.
Check the result on the published page.

When you modify a layout or a shared CSS file included by multiple pages, the change may affect all those pages. Check the result in the preview, and then use Apply All to apply the related changes together.

It may take up to one minute for the cache to update after applying changes. If the published page still shows the previous design, wait briefly and refresh it.

When CSS Is Not Applied

If CSS is not applied as expected, check the following:

The file containing the CSS has been saved.
The selector matches the HTML class or id.
The CSS contains no syntax errors.
The path of the included CSS file is correct.
The URL of the external CSS library is correct.
The cache has finished updating after applying the changes.

If Tailwind CSS or UnoCSS classes are not applied, also check the following:

The <script> that loads the CDN is written inside <head>.
Your internet connection is working.
The tool supports the class you are using.
Tailwind CSS and UnoCSS are not both loaded on the same page.

Next Steps

Once you understand how to use CSS, continue with the following documents:

Use images, PDFs, and other files through URLs: External Files
Separate CSS into another file and include it: Including Files
Share a common design across multiple pages: Layouts
Design content written in Markdown: Styling Markdown
Apply shared changes to the published site: Publish, Apply, and Apply All

Languages

On this page

Title