Sample default heading styles

This is H2 Heading

This is H3 Heading

This is H4 Heading

This is H5 Heading

This is H6 Heading

Sample w3css heading styles

w3h2
w3h3
w3h4
w3h5
w3h6

.w3h2 {color: #df376f;}
.w3h3 {font-size: 20px; line-height: 26 px; color: #037da2; font-weight: bold!important;}
.w3h4 {font-size: 18px; line-height: 24 px; color: #616161; text-transform: uppercase; font-weight: bold!important}
.w3h5 {font-size: 16px; line-height: 22px; color: #616161; text-transform: uppercase;}
.w3h6 {font-size: 13px; font-style: italic;}

Other Text Samples

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Bulleted text, ^unorganized.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
• Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Bulleted text, _Organized.

1. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
2. Etiam dignissim diam quis enim lobortis scelerisque fermentum.
3. Commodo quis imperdiet massa tincidunt nunc pulvinar.

Indented Text, with a link.

A quote:

This is a quote. Mi bibendum neque egestas congue. Volutpat ac tincidunt vitae semper quis. Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt.

Link Icon Types (add the text inside the brackets [ ] to the "class" field)

[interna;] Test link to an internal page.

[external] Test link to external website.

[email] Test link to email.

[phone] Test link to phone number.

[file-pdf]  Test link to download pdf file. (Not recommended for files uploaded directly to iLearn as the system adds an icon)

[file-ppt]  Test link to download powerpoint file.

Button Samples

To use: Copy and paste the code to the right of the chosen button color within the link menu. To access the link menu, double click a link, then click the advanced tag, and paste the code within the "Stylesheet Classes" field

Button 1 w3-button w3-large w3-round-xlarge w3-nch-blue

Button 2 w3-button w3-large w3-round-xlarge w3-vivid-purplish-red

Button 3 w3-button w3-large w3-round-xlarge w3-ilblue

Button 4 w3-button w3-large w3-round-xlarge w3-vivid-yellowish-green

Button 5 w3-button w3-large w3-round-xlarge w3-vivid-orange-yellow

Button 6 w3-button w3-large w3-round-xlarge w3-vivid-reddish-purple

Button 7 w3-button w3-large w3-round-xlarge w3-dark-grey

Button 1br w3-button w3-large w3-round-xlarge w3-text-nch w3-border w3-border-nch w3-nch-pale-blue

Button 2br w3-button w3-large w3-round-xlarge w3-text-vividpr w3-border w3-border-vividpr w3-hover-vividpr

Button 3br w3-button w3-large w3-round-xlarge w3-border w3-text-ilblue w3-border-ilblue w3-hover-ilblue

Button 4br w3-button w3-large w3-round-xlarge w3-border w3-text-vividyg w3-border-vividyg w3-hover-vividyg

Button 5br w3-button w3-large w3-round-xlarge w3-border w3-text-food-chocolate w3-border-vividoy w3-hover-vividoy

Button 6br w3-button w3-large w3-round-xlarge w3-border w3-text-vividpr w3-border-vividpr w3-hover-vividpr

Button 7br w3-button w3-large w3-round-xlarge w3-text-dark-grey w3-border w3-border-grey w3-hover-dark-grey

Notice Formatting

When adding notice formats, you can add it as a class to the html paragraph or div tag.
Adding the class to the paragraph will only add the background color, border, and padding.
Adding the class to a DIV tag surrounding the paragraph tag, instead of a paragraoh class, will do the same but also add the appropriate icon

For Webforms, this is a sample webform title, it is an H5

w3css color libraries

W3.CSS Reference

Vivid Colors & Fruit Colors

W3.CSS Examples

Common Colors

#ddeaef - Pale Blue : This is w3-pale-blue

#0090b9 - NCH Blue : This is w3-nch-blue

#006e9f - iLearn Blue : This is w3-ilblue

#d23366 - NCH Hot Pink : This is nch hot pink