Using CSS & Inline Styling in HubSpot Design Manager
CSS classes
CSS Classes pull from the coded style sheet. They are coded in to be certain modules or styles. By putting the exact module / styling text in there (i.e. "padding100tb" is a common one we use), you'll be able to pull anything coded into that from the style sheet. For example, this is using "padding-top: 100" and "padding-bottom: 100" or "padding: 100px 0px 100px 0px"
In HubSpot, we change CSS classes on the template level in design manager. When you click on a section in design manager, you should see the CSS class on the right-hand side of the screen:
Inline Styling
Inline styling on the other hand are standard CSS commands across any website being used. A good resource / list of CSS styling and commands can be found through W3 Schools (https://www.w3schools.com/css/default.asp)
In using the same example above, you revert to the styles that would be coded into CSS classes (i.e. "padding-top: 100" and "padding-bottom: 100" or "padding: 100px 0px 100px 0px"). Let's say you want to add in a background color you'd leverage the HEX color code and put in "background: #56c4f5".
Note: For each styling you add, you MUST incorporate a semi-colon at the end and THEN add a space after, but not before.
Note that for each styling you add, you need to incorporate a semi-colon at the end and THEN add a space after, but not before.
In HubSpot, we change inline styles on the template level in design manager. When you click on a section in design manager, you should see the inline styling on the right-hand side of the screen under CSS class:
If you were using the above examples in this module, you would put in the following:
padding-top: 100; padding-bottom: 100; background: #56c45; text-align: center;