CSS Stylesheets - Managing stylesheets

Modified on Thu, 4 Dec at 11:34 AM

CSS Stylesheets - Managing stylesheets

CSS Stylesheets in Hubhus allow you to create reusable CSS code that can be referenced across multiple web pages, emails, and templates.

On this page

Jump to any section using the links below

CSS Stylesheets in Hubhus allow you to create reusable CSS code that can be referenced across multiple web pages, emails, and templates. Stylesheets are hosted on public URLs with browser caching for optimal performance.

What are CSS Stylesheets

Table of Contents

What are CSS Stylesheets
Accessing CSS Stylesheets
Creating a new stylesheet
Stylesheet configuration
Using stylesheets in web pages
When to use each placeholder option
Browser caching explained
Common CSS patterns
Organizing stylesheets
Best practices
Using CSS variables with Hubhus placeholders
Troubleshooting
Editing existing stylesheets
Deleting stylesheets
Summary

CSS Stylesheets are:

Reusable CSS code stored centrally
Accessible via public URLs
Cached in browsers for performance (default 600 seconds)
Referenced via <link> tags or placeholders
Used across web pages, emails, layouts, and components

This allows you to:

Maintain consistent styling across all pages
Update styles in one place and affect all pages
Improve page load times with browser caching
Separate styling from HTML structure

Accessing CSS Stylesheets

Go to Account → Web Resources → CSS Stylesheets

This shows all existing stylesheets with:

Name: Friendly identifier for the stylesheet
Slug: URL path component
URL: Full public link to the stylesheet with <link> tag code
Placeholders: Placeholder references for use in templates
Caching: Browser cache duration in seconds
Edit/Delete: Management buttons

Creating a new stylesheet

Click + New Stylesheet to create a CSS stylesheet.

Stylesheet configuration

Name: Give your stylesheet a descriptive name (e.g., "Storstrom styles", "Brand colors", "Form styling")

This is for your reference and doesn't appear in the URL.

Browser cache for (seconds): Set how long browsers should cache the stylesheet (default: 600 seconds = 10 minutes)

Shorter cache (60-300 seconds): Changes appear faster, but more server requests
Longer cache (600-3600 seconds): Better performance, but changes take longer to appear
Very long cache (86400+ seconds): Best performance for rarely-changing styles

CSS code editor: Add your CSS rules without <style> tags.

Example:

css

/* Add CSS rules here without <style>-tags */

body {
    font-family: 'Arial', sans-serif;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #2563eb;
    font-size: 32px;
    margin-bottom: 20px;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #1d4ed8;
}

Click + Create to save the stylesheet.

Using stylesheets in web pages

After creating a stylesheet, you can reference it in your web pages.

Method 1: Using the public URL link tag

Copy the <link> tag from the URL column:

html

<link rel="stylesheet" type="text/css" 
href="https://leadvalidator.dk/css/storstrom/storstrom-styles.css">

Paste it in the <head> section of your web page:

html

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    
    <!-- Reference stylesheet -->
    <link rel="stylesheet" type="text/css" 
    href="https://leadvalidator.dk/css/storstrom/storstrom-styles.css">
</head>
<body>
    <div class="container">
        <h1>Welcome</h1>
        <button class="btn-primary">Click Here</button>
    </div>
</body>
</html>

Method 2: Using placeholders

The Placeholders column shows three placeholder options:

@stylesheet[slug,tag] - Generates full <link> tag:

html

@stylesheet[storstrom-styles,tag]

Outputs:

html

<link rel="stylesheet" type="text/css" 
href="https://leadvalidator.dk/css/storstrom/storstrom-styles.css">

@stylesheet[slug,url] - Generates URL only:

html

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

Outputs:

html

<link rel="stylesheet" 
href="https://leadvalidator.dk/css/storstrom/storstrom-styles.css">

@stylesheet[slug,body] - Inlines CSS content:

html

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

Outputs:

html

<style>
body { font-family: 'Arial', sans-serif; color: #333; }
/* ... rest of CSS ... */
</style>

When to use each placeholder option

Use ,tag (recommended for web pages):

Generates complete <link> tag
Browser caching works
Best performance
Standard practice

Use ,url (for custom attributes):

When you need to add custom attributes to <link> tag
Example: media queries, integrity checks

Use ,body (for emails or inline styles):

Email templates (most email clients don't support <link> tags)
When external CSS is blocked
Testing purposes
Note: No browser caching benefit

Browser caching explained

How caching works:

Browser requests stylesheet for the first time
Server sends stylesheet with cache headers (600 seconds)
Browser stores stylesheet in cache
For next 600 seconds, browser uses cached version (no server request)
After 600 seconds, browser requests fresh copy

Benefits:

Faster page load times (no network request)
Reduced server load
Better user experience

Trade-off:

Changes take up to cache duration to appear for users
Users with cached version see old styles until cache expires

Best practice:

Use 600-1800 seconds (10-30 minutes) for active development
Use 3600-86400 seconds (1-24 hours) for stable production styles
Clear browser cache during testing (Ctrl+Shift+R or Cmd+Shift+R)

Common CSS patterns

Brand colors:

css

:root {
    --brand-primary: #2563eb;
    --brand-secondary: #64748b;
    --brand-success: #10b981;
    --brand-danger: #ef4444;
}

.text-primary { color: var(--brand-primary); }
.bg-primary { background-color: var(--brand-primary); }

Responsive layout:

css

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

Form styling:

css

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);
}

Button styles:

css

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-primary {
    background-color: #2563eb;
    color: white;
}

.btn-primary:hover {
    background-color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Organizing stylesheets

Single stylesheet approach:

One large stylesheet with all styles
Simple to manage
Larger file size
Good for small to medium sites

Multiple stylesheet approach:

Separate stylesheets by purpose
Examples: base.css, forms.css, components.css
More organized
Can load only needed styles per page

Naming conventions:

Use descriptive names: brand-colors, form-styling, layout-grid
Include version if needed: styles-v2, theme-2024
Use consistent slug format: lowercase with hyphens

Best practices

CSS organization:

Group related rules together
Use comments to section your CSS
Follow consistent naming conventions (BEM, utility-first, etc.)
Keep specificity low

Performance:

Minimize CSS file size
Remove unused styles
Use CSS shorthand properties
Avoid overly complex selectors

Maintainability:

Use CSS variables for colors, spacing, fonts
Document complex or non-obvious rules
Keep stylesheet focused on one purpose
Regular cleanup of deprecated styles

Browser compatibility:

Test in major browsers (Chrome, Firefox, Safari, Edge)
Use vendor prefixes when needed
Provide fallbacks for newer CSS features
Consider using CSS preprocessors for complex styles

Using CSS variables with Hubhus placeholders

You can combine CSS variables with Hubhus placeholders for dynamic styling:

css

:root {
    --brand-color: %brand_color%;
    --brand-font: %brand_font%;
}

.header {
    background-color: var(--brand-color);
    font-family: var(--brand-font);
}

When the stylesheet is loaded, Hubhus placeholders are replaced with actual values from your account settings.

Troubleshooting

Styles not applying:

Verify stylesheet is referenced correctly in <head>
Check CSS selector specificity (more specific selectors win)
Look for typos in class names
Clear browser cache (Ctrl+Shift+R)
Check browser console for 404 errors

Changes not appearing:

Browser cache may still be serving old version
Clear browser cache or wait for cache duration
Use incognito/private window for testing
Reduce cache time during development

Performance issues:

Check stylesheet file size (should be < 100KB ideally)
Remove unused CSS
Combine multiple small stylesheets into one
Increase cache duration for better performance

URL not working:

Verify slug is correct
Check that stylesheet is saved
Ensure public access isn't blocked

Editing existing stylesheets

To edit a stylesheet:

Go to Account → Web Resources → CSS Stylesheets
Find the stylesheet in the list
Click the Edit button (orange pencil icon)
Modify the CSS code
Optionally adjust cache duration
Save changes

Important: After editing, users with cached versions will see old styles until their cache expires (based on cache duration setting).

Deleting stylesheets

To delete a stylesheet:

Click the Delete button (red trash icon)
Confirm deletion

Warning:

Pages referencing the deleted stylesheet will lose those styles
Check usage before deleting (no automatic dependency tracking)
Consider archiving instead of deleting by renaming with "deprecated-" prefix

Summary

CSS Stylesheets in Hubhus provide centralized, reusable styling accessible via public URLs with browser caching. Create stylesheets in Account → Web Resources → CSS Stylesheets with a descriptive name, slug, and cache duration. Add CSS code without <style> tags, then reference stylesheets in web pages using <link> tags or placeholders (@stylesheet[slug,tag] for full link tag, @stylesheet[slug,url] for URL only, or @stylesheet[slug,body] for inline styles). Browser caching (default 600 seconds) improves performance by storing stylesheets locally. Use multiple stylesheets for organization or single stylesheet for simplicity. Follow best practices including CSS organization with comments, performance optimization by removing unused styles, maintainability with CSS variables, and browser compatibility testing. Combine with Hubhus placeholders for dynamic styling based on account settings.

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