Skip to main content

How to use custom HTML and CSS

Flourish Team
Updated

In several of our templates, there are opportunities to customize your content by adding HTML and CSS code. Whether it's adjusting the styling of your Cards or adding multimedia to your popups, here's a list of useful HTML tags and CSS properties to help you out.

In this article

Useful HTML tags

HTML tags are often used to wrap around text to style it in a particular way or change its semantic meaning. For example, when used correctly, heading tags can improve accessibility as technologies like screen readers use them to identify the most important bits of text.

There are also HTML tags for adding specific elements, like hyperlinks and images.

Text elements

HTML tag What it is How to use it
<h1> <h2><h3>
<h4><h5> <h6> 		Headings - from the most important  <h1> to the least important <h6> Wrap around the heading text. E.g. 
<h1>Heading 1</h1>
  
<ul> or <ol> Unordered/bulleted  <ul> and ordered/numbered lists <ol> Wrap around list elements. E.g. 
<ul>
  <li>List element 1</li>
  <li>List element 2</li>
</ul><br>
  
<li> List elements within a  <ul> or <ol> See above  

Text styling

HTML tag What it is How to use it
<b> or <strong> Both bolden text, but  <strong> also highlights text as being "important" Wrap around the required text. Can be used within other HTML tags. E.g. 
<p>This is an <strong>important</strong> paragraph.</p><br><br>
<i> or <em> Both italicize text, but  <em> also highlights text as being "emphasized" Wrap around the required text. Can be used within other HTML tags. E.g. 
<p>This is an <em>emphasized</em> paragraph.</p><br>

Other HTML elements

HTML tag What it is How to use it
<br> Single line break On its own, does not require a closing tag
<hr> Horizontal line On its own, does not require a closing tag
<a> Hyperlink Wrap around the text that should be linked, specifying a URL with the href attribute. E.g. 
<a href="url-goes-here">Click me!</a><br><br>
For a link that opens in a new tab, use: 
<a href="url-goes-here" target="_blank">Click me!</a><br>
<div> Defines a section or division. Can be used to wrap other HTML elements in to add IDs, classes, or inline styling Wrap around other content and add classes or styling. E.g. 
<div class="intro" style="background-color: black">
   <h1>Heading 1</h1>
   <p>Paragraph here</p>
</div><br><br>
<span> An inline container that can be used to style a certain bit of text.

See our help doc here for more


 Wrap around text and add styling. E.g. 
These countries <span style="color: #ff4136">negative</span> values.<br>
<img> Image Include an src attribute with the image URL and specify a height and/or width. Does not have a closing tag. E.g. 
<img src="image-url-here" height="100"><br>
<video> Video Wrap around a  <source> tag with the video URL and specify a height and/or width. Does not have a closing tag. E.g. 
<video width="320" height="240"> <source src="video-url-here" type="video/mp4">

Useful CSS properties

CSS is the language used to describe how HTML elements should be displayed, from layout to styling that changes color, size, and more. These properties can be added to specific elements using  inline style tags, or by targeting HTML elements, classes, and IDs in a stand-alone style element.

For example, if we want to color a single heading red, we can use an inline style tag:

<h1 style="color:red">Heading 1<h1>

If we want to color our heading 1 green and paragraphs blue, we can use a style element:

<h1>Heading 1</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>

<style>
h1 {
color: green;
}
p {
color: blue;
}
</style>

The CSS properties you can use and what they do depends on the type of HTML element.

CSS property What it does How to use it
color For text elements, changes the text color Use either named colors, HEX, RGB/RGBA, or HSL/HSLA formats
font-size Changes the font size Defined in px, %, em, or rem
Learn more about rems here
font-style Changes the font style Most commonly normal or italic
line-height Changes the height of the line Defined in  px, %, em, or rem
Learn more about rems here
text-align Changes text alignment Most commonly left, right or center
background-color Changes the background color of the element Use either named colors, HEX, RGB/RGBA, or HSL/HSLA formats
width and height Changes the width and height of the element. Useful to specify the exact size of images. Defined in  px, %, em, or rem
Learn more about rems here
     

See more examples in our help doc on coloring parts of your text with custom HTML.

Related articles