Styling handlebars with inline CSS?

I’m currently on the skill path for learning how to build websites, and part of my job as a UX/UI designer is to know basic HTML/CSS to build HTML emails.

For the work I do I’m using a program called Sendgrid, and some of the data uses something called ‘handlebars’ which I am not familiar with.

Now the handlebar data in question uses list items, and I’m having difficulty styling them. Can anyone help with this, or point me in the direction of a Codecademy course that specifies how to style handlebars with CSS?

The design looks like this:

The code looks like this: <ul style="list-style-type: none; color: #FFF; background-color: #014C6A;"> {{#each medicines}} <li>{{this}}</li> {{/each}} </ul>

What is it you want to achieve?

You can either modify the inline CSS or link a stylesheet to your HTML and style from there.

Because I’m building an email, I can’t use an external stylesheet as most email clients either won’t render it correctly or will ignore it altogether, hence why I’m having to use inline CSS. To add to that the program my work uses (Sendgrid) does not use linked stylsheets for the above reasons.

I’m trying to build the email so it looks like the design as shown in the example above. I’m not familiar with handlebars so I’m looking for help/information on how to style the data pulled from the handlebars with inline CSS (if this is possible).

1 Like