Share Your Work

rsheldon
Academy-Professor/in
Academy-Professor/in

CSS with a CSS (Customer Support Specialist): A 4-Week Guide to Styling (Week 1: Styles Tab)

Hi Community,

 

My name is Rachel Sheldon, and I’m an Associate Customer Support Specialist based in our Cambridge office. Since joining HubSpot in August 2017, I’ve found that along with solving workflow puzzles and building reports, I enjoy tackling design challenges. In an effort to empower you all with some design tips and tricks, I wanted to share my guide to “Where should my styling go?”

 

(*Note: This article will focus on styling for Landing Pages, Website Pages, and Blogs.)

 

When looking to make a design change to your HubSpot content, there are quite a few places styling can live within your portal. From the page level to the stylesheet, the options can seem daunting and confusing.

 

Over the next four weeks, I’m going to  walk through some of the most common places styling lives and explain what they’re meant for, when they should be used, and when they shouldn’t be used. The methods I outline will begin with tips for beginners, and become a bit more advanced as the weeks go on.

 

So without further ado, let’s get started!

 

Method 1: The Styles Tab

Method 1 involves adding styling in the Styles tab of your modules on the page level.

 

Who this method is best for: Any one, regardless of HTML/CSS experience!

 

The simplest and most user-friendly way to add styling is using the Styles Tab of the module editor on your page. You can get here by clicking into a module, then toggling over to the tab entitled “Styles.” You have a few options here for some simple style changes you can make to your pages, including font size, color, and text alignment.

 

What I did: I set the font size to 48px, the background color of the text white, aligned the text center, and set the font-weight to “Lighter.”

 

Styles Tab - EditorStyles Tab - Editor

This styling is applied directly to the element using a HubSpot-generated ID as a selector.

 

One thing to be aware of when using the Styles tab is that whatever you put in there will override styles declared in other places. I’m going to go through what these other places are in the next few sections.

 

Pros to the Styles tab:

The Styles tab is great for beginners, since it doesn’t involve any coding at all. You can also make changes to your page right from the page editor, and they take effect immediately.

 

Cons to the styles tab:

The reason I don’t usually use the Styles Tab is because, as you can see when I inspect the page in Chrome, this adds styling with “! important” tags. (If you want to learn more about “! important” tags and what they do, check out this article.)

 

Styles Tab - Chrome InspectorStyles Tab - Chrome Inspector

So there you have it, a quick introduction to the Styles tab! If you have any questions about anything I’ve discussed above, please post your questions in our designers forum. Check back next week for Method 2: The Page's Head HTML. 

 

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.

1 Antwort
roisinkirby
HubSpot-Produktteam
HubSpot-Produktteam

CSS with a CSS (Customer Support Specialist): A 4-Week Guide to Styling (Week 1: Styles Tab)

Thanks for sharing @rsheldon!

0 Upvotes