CSS Stylesheets - Managing stylesheets

Modified on Wed, 6 May at 6:42 AM

CSS Stylesheets: Managing stylesheets

CSS Stylesheets in Hubhus let you create reusable CSS files hosted on a public URL — reference them across multiple web pages, emails, and templates for consistent styling.

TL;DR

Access: Account → Web Resources → CSS Stylesheets → + New stylesheet. Write CSS. Save → gets a public URL (with optional custom subpath). Include in web pages via <link rel="stylesheet" href="[stylesheet-url]"> or reference in a page layout. Files are browser-cached for performance. Edit in-place — changes take effect on next cache expiry or browser refresh.

3 things to know

Creating a stylesheet

Go to Account → Web Resources → CSS Stylesheets → + New stylesheet. Set a name and optional subpath (URL slug). Write your CSS in the editor. Save → Hubhus generates a public URL (leadvalidator.dk/css/[account]/[subpath].css or similar). Copy the URL from the stylesheet list.

Using the stylesheet

Reference the stylesheet URL in any web page, email, or page layout: <link rel="stylesheet" href="https://leadvalidator.dk/css/...">. Or reference it in a page layout's <head> section so all pages using that layout inherit the styles automatically. Best for: brand colors, typography, form styling, layout grids shared across multiple pages.

Editing and caching

Edit CSS via the orange edit icon in the stylesheet list. Changes are saved immediately but browsers may cache the old version. To force a refresh during development, append a version parameter to the URL: ?v=2. For production, allow browsers to cache — this improves page load speed for returning visitors.

Read more⌄

Stylesheet configuration fields

Name — Internal label. Browser cache for (seconds) — How long browsers cache the file before re-fetching. Default: 600 sec (10 min). Use 60–300 during active development, 3600–86400 for stable production styles. Clear your own cache with Ctrl+Shift+R (Win) / Cmd+Shift+R (Mac) when testing. CSS code editor — Write CSS without <style> tags — just rules directly.

3 ways to reference a stylesheet (Placeholders column)

In the stylesheet list, the Placeholders column shows three variants:

1. ,tag — full <link> tag (recommended for web pages)

@stylesheet[my-styles,tag]
<!-- outputs: -->
<link rel="stylesheet" type="text/css" href="https://leadvalidator.dk/css/account/my-styles.css">

2. ,url — URL only (for custom attributes)

<link rel="stylesheet" href="@stylesheet[my-styles,url]">

3. ,body — inline CSS (for emails)

<style>
@stylesheet[my-styles,body]
</style>

Use ,body in email templates — most email clients don't support external <link> tags. Use ,tag everywhere else.

Common CSS patterns

Brand colors via CSS variables:

:root {
    --brand-primary: #2563eb;
    --brand-secondary: #64748b;
}
.text-primary { color: var(--brand-primary); }
.bg-primary    { background-color: var(--brand-primary); }

Combine with Hubhus placeholders (account-level brand settings):

:root {
    --brand-color: %brand_color%;
    --brand-font:  %brand_font%;
}
.header { background-color: var(--brand-color); font-family: var(--brand-font); }

Responsive container:

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 768px) { .container { padding: 0 15px; } }

Form inputs:

input[type="text"], input[type="email"], textarea {
    width: 100%; padding: 10px; border: 1px solid #ddd;
    border-radius: 4px; font-size: 16px;
}
input:focus, textarea:focus {
    outline: none; border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}

Organizing multiple stylesheets

Single sheet: One large file — simple for small sites
Multiple sheets: Separate by purpose: base.css, forms.css, components.css. Load only what each page needs
Use descriptive slug names: brand-colors, form-styling, layout-grid
To deprecate without deleting: rename slug with deprecated- prefix

Troubleshooting

Styles not applying: Verify stylesheet is referenced in <head>, check selector specificity, look for typo in class names, hard-refresh (Ctrl+Shift+R), check browser console for 404
Changes not appearing after save: Browser is serving cached version — hard-refresh or wait for cache to expire. During dev: reduce cache time to 60 seconds or append ?v=2 to the URL
Stylesheet 404: Verify slug is correct and stylesheet is saved
Email styles not working: Use ,body variant (inline), not <link> tag

Common searches

CSS stylesheet • reusable CSS • web resources CSS • stylesheet URL • shared styling • page styling

Web Pages — Creating and managing web pages
Page layouts — Creating page layouts
JavaScript — Managing JavaScript files