Use External CSS Files

CSS Tips

Back to Blog

How to Use External CSS Files for Dubsado Customizations

When it comes to styling your Dubsado forms, injecting CSS directly into each form may seem convenient at first. But as your customizations grow, managing all that code across multiple forms can become a headache. This is where external CSS files come to the rescue, offering a streamlined way to centralize your styling and make […]


When it comes to styling your Dubsado forms, injecting CSS directly into each form may seem convenient at first. But as your customizations grow, managing all that code across multiple forms can become a headache. This is where external CSS files come to the rescue, offering a streamlined way to centralize your styling and make updates with ease.

In this post, we’ll explore why external CSS files are a game-changer for Dubsado users and walk you through the steps to implement them effectively.

What is an External CSS File or Stylesheet?

An external CSS file (or stylesheet) is a separate document that contains all the CSS code used to style a website or application. Instead of writing your CSS directly within an HTML file or injecting it into a specific platform like Dubsado, you store the CSS in a standalone file, usually with the .css extension.

This file is then linked to your forms or pages, allowing the styles to be applied without embedding the code directly. Here’s an example of what an external CSS file might look like:

Example External CSS File (styles.css)

/* Button Styles */
.btn {
    background-color: #D4B984;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

/* Hover Effect */
.btn:hover {
    background-color: #BD9C5E;
}

/* Header Styling */
.header {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color: #333;
}

The external stylesheet is then linked to your form or webpage using a <link> tag in the HTML or through platform-specific settings. For example:

HTML Example

<link rel="stylesheet" type="text/css" href="styles.css">

Why Use an External CSS File for Dubsado Forms?

Using an external stylesheet offers several advantages:

  • Centralized Management: Keep all your styles in one place, making them easier to edit and maintain.
  • Reuse Across Forms: Apply the same styling to multiple forms without copying and pasting code.
  • Scalability: As your forms and business grow, managing CSS in an external file is far more efficient than inline styles.
  • Advanced Editing: Leverage text editors with features like syntax highlighting, search-and-replace, and debugging tools for a smoother coding experience.

By using external CSS files, you can take your Dubsado forms to the next level, ensuring consistency, professionalism, and ease of updates. Stay tuned as we dive deeper into how to set up and use external CSS files in Dubsado!

How to Use External CSS Files in Dubsado

Step 1: Create Your CSS File

  • Open a text editor (e.g., VS Code, Notepad++) and create a new file.
  • Save the file with a .css extension, e.g., dubsado-styles.css.

Step 2: Add Your Custom Styles

Write your CSS code in the file. For example:

/* Global button styles */
.btn {
    color: #fff;
    background-color: #D4B984;
    border-radius: 4px;
    padding: 10px 20px;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #BD9C5E;
}

/* Header styles */
.header {
    font-family: 'Lato', sans-serif;
    color: #333;
    text-align: center;
    margin: 20px 0;
}

Step 3: Host Your CSS File Online

To use an external stylesheet in Dubsado, you need to host the file on the internet. Here are a few hosting options:

  1. Your Website: Upload the CSS file to your website hosting server.
    • Example: Upload it to a directory like https://yourwebsite.com/css/dubsado-styles.css.
  2. Google Drive: Use a public link from Google Drive (ensure it allows direct file access).
  3. GitHub: Host the file in a GitHub repository and use the raw file link.
  4. Free Hosting Services: Platforms like Dropbox or Netlify also work for hosting CSS files.

Step 4: Link the CSS File in Your Dubsado Form

Once the file is hosted, link it to your Dubsado form:

  1. Open your Dubsado form.
  2. Go to the “Form Styling” Settings > Edit CSS
  3. Add the line of code shown below.
  4. Replace the URL with the hosted location of your CSS file.
<link rel="stylesheet" href="https://yourwebsite.com/css/dubsado-styles.css">

Step 5: Test Your Changes

  • Publish the form and view it in a browser.
  • Verify that the styles from your external CSS file are applied correctly.

Best Practices for External CSS in Dubsado

  1. Organize Your Code: Use comments and group styles by form elements to keep your CSS file clean and structured.
  2. Use Descriptive Filenames: If you have multiple stylesheets, name them according to their purpose, e.g., proposal-styles.css or questionnaire-styles.css.
  3. Test Before Publishing: Preview forms after updates to ensure your changes look good and function as expected.
  4. Keep a Backup: Save a local copy of your CSS file and consider using version control to track changes.

Want to learn more about external stylesheets? We’ve got you covered there, too! Check out this blog.

When to Use External CSS Files

External CSS is especially beneficial if you:

  • Manage multiple Dubsado forms with similar styles.
  • Frequently update your designs or branding.
  • Want to keep inline CSS to a minimum for cleaner forms.
  • Need to leverage advanced CSS editing tools.

Conclusion

Switching to external CSS files for your Dubsado forms is a smart move for entrepreneurs who value efficiency, consistency, and scalability. With just a few steps, you can centralize your styling, save time on updates, and ensure your forms always look polished and on-brand.

Ready to take your form design to the next level? Explore our Code Snippets and Templates for beautifully designed, customizable solutions that streamline your Dubsado experience.

✨ Your brand deserves seamless style that’s easy to manage—let’s make it happen!

Menu

Search...

My Portal