Page Comparison

...

<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> 
 


<p style="font-weight:normal;">Here is a selection of text styles:</p> 

<p style="color:red; font-size:75%;">small and red<p> 

<p style="color:green; font-weight:bold; font-size:150%;">bold, large and green</p> 

<p style="color:blue; font-family: monospace;">blue monospace</p> 

<p style="display:block; padding:5px; border:1px black 

 

Combining it together

<p style="font-weight:normal;">Here is a selection of text styles:</p> 

<p style="color:red; font-size:75%;">small and red<p> 

<p style="color:green; font-weight:bold; font-size:150%;">bold, large and green</p> 

<p style="color:blue; font-family: monospace;">blue monospace</p> 

<p style="display:block; padding:5px; border:1px black</p>

 

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)

<p style="border:1px solid black;padding:2px;">
<span style="display:block;border:1px solid grey;padding:10px;font-size: 125%;">
I am going to ask you a few questions to determine whether you are eligible to be in the study. 
<span style="font-weight: normal; font-style:italic;">
[Interviewer: Ask all questions without stopping until you reach "Determine Eligibility before continuing!"]
</span></span></p>
<h3 style="text-align: center; color: #800000;">Identifying Information</h3>
1. Name:

Highlighting 

Image Modified

The code looks like:

SmallerDemographics italicInformation<br text/> for
additional
data in a question with CSS
Here is a common one for adding some meta-data to a question.

The code looks like:
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><div style="width:100%; color:#FFF; background-color:#F00; padding:5px; position:relative; top:-5px; left:-5px;">Confidential</div> 

Image Added

The code looks like:

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