.png "HubSpot Employee"){kind=icon}
CSS with a CSS (Customer Support Specialist): A 4-Week Guide to Styling (Week 4: The Stylesheet)
Hi Community,
Over the last three weeks, we’ve talked about adding styles to the Styles tab of your modules, to the Head HTML of your pages, and to the CSS declarations of the modules in your templates. ( Check them out here, here, and here.) For the final post, we’re going to discuss your template’s stylesheet.
Method 4: The Template’s Stylesheet
All templates should have a stylesheet (or multiple) attached to them, which is where the vast majority of the CSS for a page lives.
Who’s this method is best for: Those who are comfortable making CSS changes
The best practice for customizing your styling is to make edits to the stylesheet. The stylesheet is where almost all the CSS for your pages lives, making them look the way they do. It will make your life easier to keep all your styling in one place in this stylesheet. However, these often have hundreds or even thousands of lines of code, and should only be edited if you are familiar with code and comfortable making changes to CSS. If you’re a beginner, W3 Schools, Stack Overflow, and the Mozilla MDN Web Docs are great resources for starting to learn CSS and HTML, as well as other coding languages.
What I did: I changed the background color of the footer to teal.
Pros of the stylesheet:
This is the cleanest way to add styling, as you can see in the Chrome inspector that the styles are added to the existing classes “.footer-background, .footer-background a” instead of adding new places for styles to live. This also makes it far easier to troubleshoot your CSS if something goes wrong, since you know exactly where to look to fix the issue.
Cons of the stylesheet:
As I mentioned before, stylesheets can include thousands of lines of code, making them difficult to navigate. Also, be sure to note that when you change something on your stylesheet this will affect all your templates and pages using that stylesheet!
And there you have it: an overview of the four most common places styling can go in your portal! Now, you have the tools and knowledge to go forth and customize some of the styles of your pages, and you know where to look when something goes wrong. If you’d like to learn more, I’ve linked some helpful resources below, in addition to the ones I included in the article.
Happy HubSpotting!
-Rachel
Resource Guide:
HubSpot Academy Design Manager User Guide
HubSpot Academy How to use the Styles tab
HubSpot Academy Troubleshooting CSS
HubSpot Academy How to create, edit, and attach CSS files to style your site
Team Treehouse (a great resource to take guided design courses)
MDN Intro to HTML and Intro to CSS Tutorials
The tips and tricks outlined above are suggested techniques and meant to empower users. If you are unfamiliar with design, it is always best to work with a designer to implement changes to your site. For a complete outline of HubSpot Support’s design scope, click here.
