CSS with a CSS (Customer Support Specialist): A 4-Week Guide to Styling (Week 2: Page Head HTML)
Hi Community,
Last week, we talked about adding styling to the Styles tab of your modules. (Check it out here.) This week, we’re going to discuss adding styles to the Head HTML of your page.
Method 2: The Page Head HTML
Method 2 involves adding styling to the head HTML of your page.
Who this method is best for: Anyone with a little HTML/CSS experience
Adding styling to the Head HTML of your page adds the style declarations directly to the “Head” of your page between <style> tags. The Head HTML of your page is also where you can link other stylesheets, JavaScript, metadata, and more (learn more about that here!)
What I did: I made the font color red and set the font family to “Monospace.”
Pros of the Head HTML:
This method works best in cases where you want to make a specific change to a particular page, without affecting other pages, especially when they use the same template or stylesheet.
Cons of the Head HTML:
Though this method allows you greater specificity, it’s best used sparingly. Adding too many style declarations to the Head HTML can make editing your styling more difficult. As I mentioned before, the Head HTML of your page is also where you will add other pieces of code, so filling it with CSS styles as well can be confusing when you’re going back to edit or troubleshoot your styles.
So there you have it, a quick introduction to the Head HTML! If you have any questions about anything I’ve discussed above, please post your questions in our designers forum.
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.
