eLearning Center 1 Collin College
Using HTML in Canvas
Collin College – eLearning Center
Paragraph and Text
• Drop Cap
o <p><span style="float: left; width: 0.7em; font-size: 400%; font-family: algerian;
line-height: 80%;">C</span>ollin College</p>
▪ Font-family can be changed (See font types below)
• Borders
o <div style="border-color: darkblue; border-width: 10px; border-style: solid;
border-radius: 10px;">eLearning Center - HTML</div>
▪ border-color:
▪ border-style:
▪ border-width:
▪ border-radius:
o <div class="content-box pad-box-mini border border-trbl"> <p>Lorem
Ipsum...</p> <div>
• Font Types
o <p><span style="font-family: 'Times New Roman'; font-size: small;">Times New
Roman</span></p>
o <p><span style="font-family: Verdana; font-size:
medium;">Verdana</span></p>
o <p><span style="font-family: 'Comic sans MS'; font-size: large;">Comic Sans
MS</span></p>
o <p><span style="font-family: Brush Script MT ; font-size: x-large;">Brush Script
MT</span>
• Shadow Text Box
o <div style="margin: 50px 15% 50px 15%; background-color: #ccc;">
<div style="position: relative; top: -20px; left: -20px; padding: 20px; background:
#fff; border: 2px solid #ccc;">
<p>Lorem ipsum...</p>
</div>
</div>
• Horizontal Line
o <hr style="height: 20px; width: 50%; background-color: #872626;" />
• Background and Line with Text
o <h2 style="border-style: solid; border-color: #057caf; border-width: 0px 0px
10px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; background-
color: #edf0f1; text-align: left;"><span style="font-size:
24pt;"><strong>eLearning Center</strong></span></h2>
eLearning Center 2 Collin College
Alerts, Highlights, and Buttons
• Alerts
o <div class="alert alert-error"><strong>Error:</strong> This is a sample ERROR
alert style</div>
▪ <div class="alert alert-success"><strong>Success:</strong> This is a
sample SUCCESS alert style</div>
▪ <div class="alert alert-info"><strong>Information:</strong> This is a
sample INFORMATION alert style</div>
• Buttons
o <p><a id="" class="btn btn-success btn" style="width: 30%;"
href="https://community.canvaslms.com/docs/DOC-4852"
target="_blank">Canvas Styleguide: Buttons</a></p>
▪ btn-success produces a green button
▪ btn-primary produces a primary color consistent with your LMS
▪ btn-secondary produces a secondary color consistent with your LMS
▪ btn-warning produces an orange button
▪ btn-danger produces a red button
▪ style="width: 30%;" ensures consistent width when multiple buttons are
created. The 30% is 30% of the screen width.
• Popups
o <div id="dialog_for_link1" class="enhanceable_content dialog">Welcome to
Popups.</div>
<p><a id="link1" class="Button" href="#dialog_for_link1">Click Here to See A
Message</a></p>
• Flash Notice
o <div class="ic-flash-info">
<div class="ic-flash__icon" aria-hidden="true"><i class="icon-info"></i></div>
Info: Sample flash notice style. </div>
▪ <div class="ic-flash-warning"> <div class="ic-flash__icon" aria-
hidden="true"><i class="icon-warning"></i></div>
Warning: Sample flash notice style. <span class="screenreader-
only"></span> </div>
▪ <div class="ic-flash-error"> <div class="ic-flash__icon" aria-
hidden="true"><i class="icon-trash"></i></div>
Error: Sample flash notice style. <span class="screenreader-
only"></span></div> <div class="ic-flash-success">
<div class="ic-flash__icon" aria-hidden="true"><i class="icon-
check"></i></div>
Success: Sample flash notice style. <span class="screenreader-
only"></span> </div>
eLearning Center 3 Collin College
Page Elements
• Emoticons
o <p> I will display a small crown ♕ </p>
▪ Add the &# to the number followed by a ;
o <p style="font-size: 100px;"> ♕</p>
• Tabs
o <div class="enhanceable_content tabs">
<ul>
<li><a href="#tabs-1">Tab One</a></li>
<li><a href="#tabs-2">Tab Two</a></li>
<li><a href="#tabs-3">Tab Three</a></li>
</ul>
<div id="tabs-1">
<h2>Tab One</h2>
<p>Tab 1 content paragraph 1</p>
<p>Tab 1 content paragraph 2</p>
</div>
<div id="tabs-2">
<h2>Tab Two</h2>
<p>Tab 2 content paragraph 1</p>
<p>Tab 2 content paragraph 2</p>
</div>
<div id="tabs-3">
<h2>Tab Three</h2>
<p>Tab 3 content paragraph 1</p>
<p>Tab 3 content paragraph 2</p>
</div> </div>
Links
• Hex colors: https://htmlcolorcodes.com/
• Unicode for emoticons:
o https://www.toptal.com/designers/htmlarrows/
o https://www.w3schools.com/charsets/ref_emoji.asp
• Web safe fonts:
o https://blog.hubspot.com/website/web-safe-html-css-fonts
o https://www.w3schools.com/cssref/css_websafe_fonts.php
• Icon names for flash:
o https://www.w3schools.com/w3css/w3css_icons.asp
• Border styles: https://www.w3schools.com/css/css_border.asp
