Feb 13, 2018 2:25 PM - edited Feb 13, 2018 2:31 PM
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
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.
Team Treehouse (a great resource to take guided design courses)
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.