Here we are going to show you some basic code that will help style your HTMA reports. 

To make a pararagraph simple wrap your text in p tags like the example below

<p>Your text goes here</p>

Paragraph

Heading tags make your texts bigger, this is good for titles and other sections.

Below are headings and examples of the sizes.

<h1>Heading 1</h1>

Heading 1

Heading 2 is the main heading tag we use for titles on the HTMA reports

<h2>Heading 2</h2>

Heading 2

Heading 3

<h3>Heading 3</h3>

Heading 3

Heading 4

<h4>Heading 4</h4>

Heading 4

Heading 5

<h5>Heading 5</h5>

Heading 5

To make text go bold we use strong tags

<strong>This would be bold</strong>

This is bold

To add bold text inside a paragraph just add <strong> tags inside the paragraph text like below

<p>This is a sentence with <strong>bold</strong> text inside</p>

This is a sentence with bold text inside

If you want to draw a line like below in order to separate text we use <hr> which stands for horizontal rule


If you want to add a link aka a hyper link we use this code

<a href=”https://www.google.com”>Google.com</a>

Google.com

Colours

We can change the color of text by using this simple code below. We add style=”color:red;”> inside a paragraph tag.

<p style=”color:red;”>This text would be red</p>

This text is red

You can also use hexadecimal colors for more precise coloring. You can visit this website for a list of hexadecimal colours. 

https://htmlcolorcodes.com/color-picker/

Using Hexidecimal colors means you can get very precise colors. 

For example this below text has a hexadecimal code of #0CA19A

<p style=”color:#0CA19A”>This is a green color</p>

This is a green color

You can combine code quite easily, lets make a h2 sentence with a bold word and a green color. The change color inside sentences we can use the <span></span> code, let’s try below. 

<h2>You are in a <strong><span style=”color:#0CA19A”>FOUR LOW</span></strong> pattern</h2>

You are in a FOUR LOW pattern

Other useful bits of code you may want to use is 

Underline <u></u>

<p><u>This text is underlined</u></p>

This text is underlined

Italics <i></i>

<p><i>This text is in italics</i></p>

This text is in italics

Bullet points

Bullet points come in 2 different forms. Regular bullet points are called unordered lists and just show bullet points. Ordered list bullet points show as numbers. Let’s give it a try. You always start with coding whether the list is unordered or ordered and then each item is wrapped in <li></li> tags

<ul>

<li>Bullet 1</li>

<li>Bullet 2</li>

<li>Bullet 3</li>

</ul>

  • Bullet 1
  • Bullet 2
  • Bullet 3

Now lets do a numbered list

<ol>

<li>Bullet 1</li>

<li>Bullet 2</li>

<li>Bullet 3</li>

</ol>

  1. Bullet 1
  2. Bullet 2
  3. Bullet 3