Facebook
Twitter
LinkedIn
ForwardSample 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.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Etiam dignissim diam quis enim lobortis scelerisque fermentum.
- 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)
[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
w3css color libraries
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
#df376f - NCH Hot Pink : This is nch hot pink
FUTURE ADD TO CSS CODE
.w3-bold {font-weight: 600;}
.w3-zoomblue,.w3-hover-zoomblue:hover{color:#fff!important;background-color:#0e72ed!important}