De-Mystifying the Many Ways to Style Pages

With inbound marketing, content is king. But with more companies embracing this idea than ever before, how do you make sure your great content gets noticed? By dressing it up to look all nice, of course! HubSpot offers a lot of different ways to edit your page style to get your content looking exactly the way you like. In fact, there are so many ways to edit your page's look, it can become rather daunting.

It’s not as complicated as it may seem at first glance. With this guide, you’ll be able to understand how to add styling rules to your site, from general style down to minute tweaks.

1. Add a stylesheet to your domain

This strategy is the “set it and forget it” option. It offers the broadest possible coverage—when you add a stylesheet to your domain, you’re saying that every page published to that domain should reference those styles. The downside of this option is that it makes it harder to match up your stylesheet with potentially very different templates. That's why it’s recommended that you only use this option for your “Primary CSS” file.

To add a stylesheet to a specific domain, navigate to Content > Content Settings and then choose the domain from the dropdown menu where you’d like the styles to apply. Then, scroll down to the “Attached Stylesheets” section, click “Add Stylesheets,” and select the stylesheet you’re looking to add. And don’t forget to click “Save changes”!

2. Add a stylesheet to your template

This approach is the recommended way to add styling rules to your site. By adding a stylesheet to a specific template, those rules will only affect pages that use that template and you can use the “Preview” function to check that the styles you’ve added work with the template’s content.

To add a stylesheet to your template, open the template, click Edit > Edit Head, select “Add Stylesheets,” and click “Done.”

Once you’ve added the stylesheet to your template, you’ll then be able to add specific classes to groups of modules or to individual modules themselves.

3. Add a stylesheet to your page

In rare cases, you may find that you need to change the overall styling of a single page. You can add a stylesheet to a single page by opening the editor for that page, clicking the “Settings” tab, scrolling down to “Page-specific Stylesheets,” and clicking “Add stylesheet.”

Just like with the domain-specific option, in almost all cases, you’ll want to avoid this strategy, as it's less efficient than adding a stylesheet to your template (just think about how many pages you'd have to edit if you ever changed stylesheets, versus changing just a handful of templates that take care of your whole site).

4. Edit an individual part of your page

Now we’re in the real nitty-gritty. This is the realm of one-off styling choices, where you need to make a specific part of a single page look a certain way. Lucky for us, it's also the simplest edits, and most users make changes like these every day.

I'm talking about in-line edits using your typical text editor:

The most important takeaway from all of these various strategies for styling your pages is to be consistent. If you don’t have a single person or team in charge of design, make sure that everyone is on the same page (pun intended) about where styling rules have been added. That way, everyone will know exactly where to look when changes need to be made. And even if you don’t make any changes to your site’s styling, simply knowing where you can edit the design of your site helps de-mystify the whole process.