Page Comparison

Styles of Fonts with HTML

You can style your fonts in three basic ways:

Bold face font, Italics font, and bold&italics font together. 

Bold Face

To make a format bold you will have to use this HTML code:

...

<strong>This text is bold.</strong>

Italics Font 

To make a format italics you will use this HTML code:

...

<em>Do this and your text will be in italics style.</em>

Bold and Italics 

To make a format italics and bold, you will use the HTML code:

...

<strong><em>To get your text italics and bold, do this.</em></strong>

Font Colors and Sizes with HTML

Another couple of different simple formatting options you can do in REDCap surveys or forms is having different font colors and font sizes.

...

All you have to do is use/copy these HTML Codes: 

Font Colors 

To make a words in REDCap have font colors, use this HTML code:

...

<font color="red">This color will be red.</font> 
<font color="purple">This color will be purple.</font>
<font color="green">This color will be green.</font>
<font color="blue">This color will be blue.</font>

Font Sizes

For different font sizes, use this HTML code: 

...

<div style="font-size: 10pt">This is how you change the size of the font.</div>
 
<div style="font-size: 14pt">This is how you change the size of the font.</div>
 
<div style="font-size: 20pt">This is how you change the size of the font.</div>
 
<div style="font-size: 22pt">This is how you change the size of the font.</div> 
 

Background Class Colors with CSS

REDCap's css includes some familiar background-colored warning boxes. Here is an example where a descriptive text question is used as a warning when someone tries to collect another time point in a longitudinal study without checking the enrollment status of the participant first. The code presented below is placed in the Field Label column (column E) in your data dictionary, or the Field Label box in the Online Designer.

...

You can also use "yellow" and "green".

Highlight a sub-section within a larger section with CSS

This can be used to highlight or distinguish sub-sections within a larger section, without using the Section Header column. This is a 'descriptive' field.

...

You can use standard colors ("red", "yellow", "green", "blue", etc.), or hexadecimal color codes (link to more html colors)

Smaller italic text for additional data in a question with CSS

Here is a common one for adding some meta-data to a question.

...

Were antiplatelet drugs begun on any day prior to the procedure date listed above?
<span style="font-weight: lighter; font-style:italic;">(your text here)</span>

Text in a box and colored, centered, larger text using H3 with CSS

The code looks like: (with some extra carriage returns so it doesn't scroll so far to the right)

...

<div class="green">Full Name</div> 

...